内容简介：You should be using SVG favicons. They’re supported in all modern browsers right now.Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word.Th
Are you using SVG favicons yet? A guide for modern browsers.
Apr 19 ·3min read
You should be using SVG favicons. They’re supported in all modern browsers right now.
Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word.
Icon
The main favicon can be an SVG of any size. The type type=”image/svg+xml”
is unnecessary.
<link rel="icon" href="favicon.svg">
Mask icon
For Safari, it’s a bit different. You need to add a mask-icon
. It’s also an SVG, but it has to be made of a single colour and placed on a transparent background. The browser adds the colour of the attribute.
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
Touch icon
The icon for iOS devices as well as favourites from browsers new tab page and more. You only need the 180 x 180
size, and the sizes
attribute is superfluous.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Manifest
The manifest.json
provides information about your web app or website. These lines are mandatory to pass Lighthouse
’s test. The icon linked is used by Android and Chrome. The largest size 512 x 512
is the only one needed.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
The theme-color
meta
is still required for Android’s Chrome browser colour.
<meta name="theme-color" content="#ffffff">
Done
That’s it, that’s all the icons you need for the current modern browsers, everything else is unnecessary. The msapplication-TileImage
can be added if you want a different icon in Windows tiles otherwise the apple-touch-icon
is used. The TileColor
isn’t used anymore.
Everything else
Sadly, not everyone is on modern browsers yet BUT it can be easily resolved by dropping a 32 x 32
favicon.ico
at the root of your website. This works everywhere else, even at your grandma’s.
Dark mode
To finish, here’s a tip for dark mode. One of the benefits of an SVG favicon is that you can change the colour with CSS. Using the prefers-color-scheme
media
query, the colour of your favicon changes with the users dark or light mode. This method won’t work with the mask-icon
since the colour is in the attribute but Safari adds a white background if there isn’t enough contrast.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
Result
Here’s the final result. Copy this in the <head>
of your website and don’t forget to place a favicon.ico
at the root. :v:
<meta name="theme-color" content="#ffffff"> <link rel="icon" href="favicon.svg"> <link rel="mask-icon" href="mask-icon.svg" color="#000000"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="manifest" href="manifest.json">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
数据驱动设计
[美]罗谢尔·肯（RochelleKing）、[美]伊丽莎白F.邱吉尔（Elizabeth F Churchill）、Caitlin Tan / 傅婕 / 机械工业出版社 / 2018-8 / 69.00元
本书旨在帮你了解数据引导设计的基本原则，了解数据与设计流程整合的价值，避免常见的陷阱与误区。本书重点关注定量实验与A/B测试，因为我们发现，数据分析与设计实践在此鲜有交集，但相对的潜在价值与机会缺大。本书提供了一些关于在组织中开展数据实践的观点。通过阅读这本书，你将转变你的团队的工作方式，从数据中获得大收益。后希望你可以在衡量指标的选择、佳展示方式与展示时机、测试以及设计意图增强方面，自信地表达自......一起来看看 《数据驱动设计》 这本书的介绍吧!
