Das Favicon ist das kleine Symbol, das in einem Browser-Tab, einer Lesezeichenliste und in Adressleisten-Vorschlägen erscheint, wenn jemand eine Website besucht. Es richtig zu machen, bedeutet mehr als nur ein Bild zu verkleinern. Ein Favicon, das scharf aussieht, erfordert die richtigen Pixelabmessungen, ein sauber zentriertes Design und das korrekte Format für den Kontext, in dem es verwendet wird. Die Standard-Favicon-Größe beträgt 16x16 Pixel für die Basis-Anzeige im Browser-Tab, wobei 32x32 für höherauflösende Displays und 48x48 für vollständige Favicon-Pakete verwendet wird. Ein schlecht vorbereitetes Favicon sieht im Tab verschwommen oder undeutlich aus, was ein kleines Detail ist, das sich auf die Gesamtqualität einer Website auswirkt.
So ändern Sie die Größe eines Bildes für ein Favicon
Für das Basis-Favicon geben Sie 16 sowohl in das Feld Breite als auch in das Feld Höhe ein und deaktivieren Sie das Kontrollkästchen Seitenverhältnis beibehalten für eine erzwungene quadratische Ausgabe. Für eine höherauflösende Version wiederholen Sie den Vorgang mit 32 in beiden Feldern. Für ein vollständiges Favicon-Paket verarbeiten Sie dasselbe Bild separat bei 16x16, 32x32 und 48x48.
Die Qualität des Quellbildes ist bei Favicon-Größen wichtiger als bei fast jeder anderen Abmessung. Ein komplexes Logo oder eine detaillierte Illustration verliert bei 16x16 jede erkennbare Form. Ein einfaches, kühnes Symbol mit sauberen Kanten und minimalen Details bleibt viel besser erhalten. Beginnen Sie mit der größten verfügbaren Version des Symbols und skalieren Sie sie herunter, um das schärfste Ergebnis bei jeder Größe zu erzielen. Laden Sie mehrere Größen gleichzeitig hoch und laden Sie sie als ZIP herunter, wenn Sie fertig sind.
Standard-Favicon-Größen
16x16 Pixel: die Basisgröße, die in Browser-Tabs auf Standardauflösungsbildschirmen angezeigt wird. 32x32 Pixel: wird von höherauflösenden Displays und Windows-Desktop-Verknüpfungen verwendet. 48x48 Pixel: in vollständigen Favicon-Paketen für breitere Kompatibilität enthalten. 180x180 Pixel: die Apple Touch Icon-Größe, die verwendet wird, wenn eine Website auf dem iOS-Startbildschirm gespeichert wird. 192x192 Pixel: wird von Android-Geräten für Startbildschirm-Web-App-Symbole verwendet. Ein vollständiges Favicon-Paket enthält typischerweise alle diese Größen, die aus demselben Quellsymbol generiert wurden.
Ausgabeformat für Favicons
PNG ist das am weitesten verbreitete Format für moderne Favicon-Implementierungen. Die meisten Browser akzeptieren PNG-Favicon-Dateien direkt über das Link-Tag im HTML-Kopf. Transparente Hintergründe werden in PNG unterstützt und ermöglichen es dem Favicon, sauber über der Browser-Tab-Farbe zu liegen. Das traditionelle ICO-Format bündelt mehrere Größen in einer einzigen Datei und wird immer noch für die root favicon.ico-Datei verwendet, die Browser standardmäßig suchen. PNG in der richtigen Größe ist der einfachste Ansatz für die meisten modernen Webprojekte.