Haftungsausschluss: Ich bin der Autor von RealFaviconGenerator, von dem ich erwarte, dass es auf dem neuesten Stand ist (meistens siehe unten). Seien Sie also nicht überrascht, wenn diese Antwort mit der von RFG generierten übereinstimmt.
Der Mythos der Einheitsgröße
Es gibt kein Symbol "Einheitsgröße". Sie können kein einzelnes SVG-Symbol erstellen und erwarten, dass es überall funktioniert.
Aus technischer Sicht wäre ein einziges SVG-Symbol eine gute Sache. Aus Sicht der Benutzeroberfläche und der Benutzeroberfläche ist dies jedoch kein wünschenswertes Ergebnis. Vergleichen Sie iOS und Android. Unter iOS sind alle Startbildschirmsymbole Quadrate mit abgerundeten Ecken ( iOS füllt transparente Bereiche von Touch-Symbolen mit Schwarz ). Unter Android verwenden Startbildschirmsymbole häufig nicht quadratische Formen und Transparenz (einschließlich Google App-Symbole). Senden Sie ein einzelnes Touch-Symbol, und Android Chrome verwendet es. Sie können jedoch nicht mit den Richtlinien für Android-Symbole übereinstimmen , wohingegen ein dediziertes Symbol dies könnte.
Ich rate daher, die Verwendung eines einzelnen Symbols bewusst zu vermeiden. Wenn möglich, zielen Sie lieber auf jede Plattform einzeln ab (dies ist nicht immer der Fall).
Symbole, Plattform pro Plattform
iOS Safari
iOS Safari erwartet ein Touch-Symbol . Ab heute ist dies ein 180x180 PNG-Bild. Dieses Bild sollte keine Transparenz verwenden und seine Ecken werden beim Hinzufügen zum Startbildschirm automatisch abgerundet. Erklärt mit:
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
Im Laufe der Jahre wurde dieses Symbol für viele Browser zum "Standard-Symbol mit hoher Auflösung". Sie finden es also an anderer Stelle, wenn Sie es zu einem Lesezeichen hinzufügen usw.
Android Chrome
Android Chrome basiert auf dem Web App Manifest . Obwohl dieses Manifest nicht für Android Chrome bestimmt ist, ist es derzeit der Hauptförderer. Daher ist es im Moment noch ziemlich sicher, die Symbole aus dem Web App Manifest als für Android Chrome zu betrachten.
Wie der Name schon sagt, ist das Web-App-Manifest für Web-Apps gedacht. Aber jede Website kann es verwenden, um auf einige Symbole zu verweisen.
Android erwartet ein 192x192 PNG-Symbol, Transparenz erlaubt und empfohlen.
Das Manifest wird deklariert mit:
<link rel="manifest" href="/icons/site.webmanifest">
Edge und IE 12
Microsoft hat die browserconfig eingeführt , ein XML-Dokument, in dem verschiedene Symbole aufgelistet sind, die zur Metro-Benutzeroberfläche passen.
Die Datei und die Hintergrundfarbe werden deklariert mit:
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
Klassische Desktop-Browser
Windows / MacOS Chrome, Windows / MacOS Firefox, Safari, IE ... Hier sind die Dinge etwas verschwommener. In der Vergangenheit gab es eine einzige favicon.icoDatei, die noch unterstützt wurde. Die neuesten Browser wählen jedoch eher PNG-Symbole aus, die leichter sind. Außerdem können einige Browser nicht das richtige Symbol in der ICO-Datei auswählen (dieses Format kann mehrere Versionen eines Symbols einbetten), was dazu führt, dass ein Symbol mit niedriger Auflösung falsch verwendet wird.
Man könnte versucht sein, das Alte favicon.icoganz fallen zu lassen . Obwohl ich diesen Sprung in RFG machen möchte, habe ich nicht die notwendigen Tests durchgeführt, um die Auswirkungen auf die alten Browser zu bewerten.
Daher die Kombination, die ich heute noch empfehle, mit der favicon.icoEinbettung von 16x16-, 32x32- und 48x48-Symbolen:
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">
Andere Browser
Andere Browser verfügen möglicherweise über dedizierte Symbole. Zum Beispiel sucht Coast by Opera nach einem 228x228-Symbol . Die Notwendigkeit, sich auf diese Browser zu konzentrieren, ist nicht offensichtlich. Sie verwenden normalerweise das Touch-Symbol oder andere Symbole, wenn sie "ihr" Symbol nicht finden können.
Fazit
Wie eingangs angekündigt, erstellt RealFaviconGenerator genau dies .