Ein Favicon muss an mehreren Stellen gleichzeitig funktionieren: im Browser-Tab, bei Lesezeichen, auf dem iOS-Startbildschirm und als Icon einer installierten Web-App auf Android — und jeder dieser Orte verlangt sein eigenes Dateiformat und seine eigene Größe.
Windows-Kacheln: ein fast vergessenes Kapitel
Vor site.webmanifest gab es bereits einen Windows-eigenen Mechanismus: <meta name="msapplication-TileColor"> und eine browserconfig.xml-Datei steuerten Farbe und Icon der Kachel, wenn eine Seite unter Windows 8/10 an den Startbildschirm angeheftet wurde. Microsoft Edge und der Internet Explorer lasen diese Angaben aus; moderne Browser ignorieren browserconfig.xml inzwischen weitgehend, weshalb sie heute nur noch selten aktiv gepflegt wird.
Die Rolle der <link>-Tags in <head>
Jedes Icon-Format wird mit einem eigenen <link rel="icon">- oder <link rel="apple-touch-icon">-Tag samt sizes-Attribut eingebunden, damit der Browser aus dem angebotenen Satz die passende Größe für den jeweiligen Kontext wählt.
Das Web App Manifest für PWAs
Progressive Web-Apps benötigen zusätzlich eine Datei site.webmanifest mit einer Liste von Icons in verschiedenen Größen im JSON-Format, dazu Name und Theme-Farbe — genau von dort holt sich Android das Icon für die Startbildschirm-Kachel, wenn eine Website als App installiert wird.
Wofür das gebraucht wird
- Einen vollständigen Satz an Icons in den benötigten Größen aus einem einzigen Ausgangsbild generieren.
- Fertigen HTML-Code der <link>-Tags zum Einfügen in <head> erhalten.
- Sicherstellen, dass die Website beim Hinzufügen zum Startbildschirm eines Mobilgeräts korrekt aussieht.