Necesita usar favicons SVG. Son compatibles con todos los navegadores modernos (bueno, casi todos).
Además, no necesita todas esas referencias a iconos y dimensiones que copia de un proyecto a otro. Averigüemos cuál es el mínimo absoluto que se requiere para esto.
Icono
El fivicon principal puede ser SVG de cualquier tamaño. El tipo type="image/svg+xml"
no es necesario.
<link rel="icon" href="favicon.svg">
Máscara de icono
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 conclusión, aquí hay un consejo para el modo oscuro. Una de las ventajas del icono SVG es que puede cambiar el color usando CSS. Al utilizar una consulta de medios, el prefers-color-scheme
color de su icono cambia según el modo oscuro o claro del usuario. Este método no funcionará mask-icon
porque el color está especificado en el atributo, pero Safari agrega un fondo blanco si no hay suficiente 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>
Resultado
Aquí esta el resultado final. Cópielo en <head>
su sitio web y no olvide colocarlo favicon.ico
en la raíz.
<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">