Você precisa usar favicons SVG. Eles são suportados em todos os navegadores modernos (bem, quase todos).
Além disso, você não precisa de todas as referências a ícones e dimensões que copia de projeto para projeto. Vamos descobrir qual é o mínimo absoluto necessário para isso.
Ícone
O fivicon principal pode ser SVG de qualquer tamanho. O tipo type="image/svg+xml"
não é necessário.
<link rel="icon" href="favicon.svg">
Máscara de ícone
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
-. , .
Concluindo, aqui vai uma dica para o modo escuro. Uma das vantagens do ícone SVG é que você pode alterar a cor usando CSS. Ao usar uma consulta de mídia, a prefers-color-scheme
cor do seu ícone muda dependendo do modo claro ou escuro do usuário. Este método não funcionará mask-icon
porque a cor é especificada no atributo, mas o Safari adiciona um fundo branco se não houver contraste suficiente.
<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
Aqui está o resultado final. Copie-o para o <head>
seu site e não se esqueça de colocá-lo favicon.ico
na raiz.
<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">