Sie müssen SVG-Favicons verwenden. Sie werden in allen modernen Browsern unterstützt (fast alle).
Außerdem benötigen Sie nicht alle Verweise auf Symbole und Dimensionen, die Sie von Projekt zu Projekt kopieren. Lassen Sie uns herausfinden, was das absolute Minimum dafür ist.
Symbol
Das Haupt-Fivicon kann SVG jeder Größe sein. Der Typ wird type="image/svg+xml"
nicht benötigt.
<link rel="icon" href="favicon.svg">
Symbolmaske
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
-. , .
Abschließend hier ein Tipp für den Dunkelmodus. Einer der Vorteile des SVG-Symbols besteht darin, dass Sie die Farbe mithilfe von CSS ändern können. Bei Verwendung einer Medienabfrage prefers-color-scheme
ändert sich die Farbe Ihres Symbols je nach Dunkel- oder Hellmodus des Benutzers. Diese Methode funktioniert nicht, mask-icon
da die Farbe im Attribut angegeben ist. Safari fügt jedoch einen weißen Hintergrund hinzu, wenn nicht genügend Kontrast vorhanden ist.
<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>
Ergebnis
Hier ist das Endergebnis. Kopieren Sie es auf <head>
Ihre Website und vergessen Sie nicht, es favicon.ico
im Stammverzeichnis zu platzieren.
<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">