Favicon erstellen
Ein Bild auswählen und alle Symbole erhalten, die eine Website heute braucht – vom 16-Pixel-Zeichen im Browsertab bis zum Startbildschirm-Symbol auf dem iPhone. Dazu die favicon.ico, das Web-App-Manifest und die Zeilen zum Einbinden.
1. Bild wählen
Bild hierher ziehen oder klicken
PNG, JPG oder WebP. Am besten quadratisch und mindestens 512 Pixel groß.
Das Bild wird ausschließlich in deinem Browser verarbeitet und nicht hochgeladen.
Worauf es ankommt
Ein Favicon wird meist 16 Pixel groß dargestellt – kleiner als dieser Buchstabe. Feine Linien, Schrift oder ein ganzes Logo verschwinden dort zu einem Fleck. Was funktioniert: ein einzelnes Zeichen, eine klare Form, kräftige Farben. Die Vorschau oben in der Browsertab-Ansicht zeigt es in Originalgröße.
Die Dateien gehören in das Wurzelverzeichnis der Website, also dorthin, wo auch robots.txt und sitemap.xml liegen. Browser suchen die favicon.ico notfalls von selbst dort – verlassen sollte man sich darauf nicht, deshalb die Zeilen im <head>.
Das Apple-Symbol bekommt immer einen deckenden Hintergrund. iOS legt transparente Bereiche sonst schwarz aus, was fast nie gewollt ist.
Das Bild bleibt auf deinem Rechner: Alle Größen entstehen im Browser, es wird nichts an einen Server geschickt.