Was Favicon erzeugen ist
Ein Website-Symbol erscheint in der Registerkarte, als Lesezeichen und auf dem Startbildschirm. Hier entstehen beide gebräuchlichen Formen: ICO und PNG.
Arbeitsschritte
- Ein quadratisches oder nahezu quadratisches Bild vorbereiten, das Motiv möglichst mittig
- Für das Website-Symbol den ICO-Modus wählen und die Datei nach dem Herunterladen ins Wurzelverzeichnis legen
- Für Startbildschirm oder PWA den PNG-Modus wählen und die Größe nach Verwendungszweck bestimmen: 180 für Apple, 192 und 512 für das PWA-Manifest
- Bei einem durchsichtigen Logo die Hintergrundfüllung nicht einschalten, sonst geht die Transparenz verloren
Zu beachten:Ausgegeben wird entweder ein ICO mit mehreren Größen oder ein PNG in einer Größe. Im ICO liegen die Bilddaten als PNG; Windows ab Vista und alle modernen Browser lesen das. Für sehr alte IE-Fassungen wäre eine ICO-Datei mit BMP-Kodierung nötig, die hier nicht angeboten wird. Ein nicht quadratisches Bild wird mittig beschnitten.
Was das Werkzeug kann
- ICO-Modus: die Größen 16, 32, 48 und 64 landen gemeinsam in einer .ico-Datei
- PNG-Modus: jede Größe von 16 bis 512 Pixeln, passend für Apple-Touch-Symbol und PWA
- Das Bild wird mittig quadratisch beschnitten, damit die Proportionen stimmen
- Eine Hintergrundfüllung ist zuschaltbar, sodass auch ein durchsichtiges Logo ein deckendes Symbol ergibt
Fragen und Antworten
ICO oder PNG – was brauche ich?
ICO für Registerkarte und Lesezeichen, PNG in 180 sowie 192 und 512 für Startbildschirm und PWA. Beides lässt sich hier erzeugen.
Warum wird mein rundes Logo beschnitten?
Nicht quadratische Bilder werden mittig auf ein Quadrat beschnitten.
Mein Logo ist durchsichtig – was ist zu beachten?
Die Hintergrundfüllung nicht einschalten, sonst wird sie deckend und die Transparenz geht verloren.
Funktioniert das mit alten IE-Fassungen?
Nein, die verlangen eine BMP-Kodierung im ICO, die dieses Werkzeug nicht schreibt.
Typische Anwendungen
- Für eine neue Website eine favicon.ico bereitstellen
- Ein Apple-Touch-Symbol in 180 × 180 Pixeln erzeugen, damit die Verknüpfung auf dem Startbildschirm scharf bleibt
- Für eine PWA die Größen 192 und 512 erzeugen
Kombinierbar mit
Diese Werkzeuge passen inhaltlich zu Favicon erzeugen: