Vous devez utiliser les favicons SVG. Ils sont pris en charge dans tous les navigateurs modernes (enfin, presque tous).
De plus, vous n'avez pas besoin de toutes ces références aux icônes et dimensions que vous copiez d'un projet à l'autre. Voyons quel est le minimum absolu requis pour cela.
Icône
Le fivicon principal peut être SVG de n'importe quelle taille. Le type n'est type="image/svg+xml"
pas nécessaire.
<link rel="icon" href="favicon.svg">
Masque d'icône
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
-. , .
En conclusion, voici une astuce pour le mode sombre. L'un des avantages de l'icône SVG est que vous pouvez changer la couleur en utilisant CSS. Lorsque vous utilisez une requête multimédia, la prefers-color-scheme
couleur de votre icône change en fonction du mode sombre ou clair de l'utilisateur. Cette méthode ne fonctionnera pas mask-icon
car la couleur est spécifiée dans l'attribut, mais Safari ajoute un arrière-plan blanc s'il n'y a pas assez de contraste.
<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>
Résultat
Voici le résultat final. Copiez-le sur <head>
votre site Web et n'oubliez pas de le placer favicon.ico
à la racine.
<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">