You need to use SVG favicons. They are supported in all modern browsers (well, almost all).
In addition, you don't need all those references to icons and dimensions that you copy from project to project. Let's find out what the absolute minimum is required for this.
Icon
The main fivicon can be SVG of any size. The type is type="image/svg+xml"
not needed.
<link rel="icon" href="favicon.svg">
Icon mask
Safari, . mask-icon
. SVG, . .
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
(Touch Icon)
IOS , . 180 x 180
, sizes .
manifest.json
- -. Lighthouse.
Android Chrome. 512 x 512.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
theme-color
meta
- Chrome Android.
<meta name="theme-color" content="#ffffff">
, , . msapplication-TileImage
, Windows, apple-touch-icon
. TileColor .
, , , favicon.ico
32 x 32
-. , .
In conclusion, here's a tip for dark mode. One of the advantages of the SVG icon is that you can change the color using CSS. When using a media query, the prefers-color-scheme
color of your icon changes depending on the user's dark or light mode. This method will not work with mask-icon
because the color is specified in the attribute, but Safari adds a white background if there is not 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 is the final result. Copy it to <head>
your website and don't forget to place it favicon.ico
at the root.
<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">