Favicon erstellen: favicon.ico, Apple- und Android-Symbole

So verwenden Sie es

Wählen Sie Symbol aus: Einem Bild oder Buchstaben oder einem Emoji auf einer Farbe.
Wählen Sie das Bild oder tragen Sie die Buchstaben oder Emoji ein. Legen Sie die Hintergrundfarbe und die Buchstabenfarbe fest.
Stellen Sie die Themenfarbe und den Name der Website ein und klicken Sie auf Symbole erstellen.
Laden Sie die ZIP-Datei herunter. Legen Sie die Dateien in den obersten Ordner Ihrer Website und fügen Sie die HTML-Tags in den Kopfbereich jeder Seite ein.

Die Dateien und ihre Größen

favicon.ico enthält drei Bilder mit 16, 32 und 48 Pixeln, damit ein Browser-Tab, ein Lesezeichen und Windows jeweils eine passende Größe finden. apple-touch-icon.png hat 180 Pixel für den Startbildschirm eines iPhone oder iPad. android-chrome-192x192.png und android-chrome-512x512.png sind die Android-Symbole, die im Manifest stehen. site.webmanifest nennt die App und gibt ihre Farben an.

Transparenz und Hintergrund

Das Favicon behält seine transparenten Flächen, damit ein Logo auf jeder Farbe sitzt, die der Browser anzeigt. Die Apple- und Android-Symbole werden mit der Hintergrundfarbe gefüllt, weil eine transparente Ecke eines Apple-Touch-Symbols auf dem iPhone und dem iPad schwarz erscheint.

Wohin die Dateien gehören

Legen Sie die Dateien in den obersten Ordner Ihrer Website, damit die Adressen /favicon.ico und /site.webmanifest funktionieren. Browser behalten Symbole lange im Cache. Nach einer Änderung hängen Sie deshalb eine Versionsnummer an den Link oder leeren den Cache, um das neue Symbol zu sehen.

Beispiel: die Buchstaben FT auf Dunkelblau

Wählen Sie Buchstaben oder einem Emoji auf einer Farbe, tragen Sie FT ein und behalten Sie den dunkelblauen Hintergrund. Das Werkzeug zeichnet die Buchstaben in die Mitte eines abgerundeten Quadrats und passt sie an das Quadrat an, damit sie auch im 16-Pixel-Favicon lesbar bleiben.

Häufig gestellte Fragen

Wird mein Bild hochgeladen, wenn ich die Favicons erstelle?

Nein. Die Symbole werden in Ihrem Browser gezeichnet und auf Ihrem Gerät in die ZIP-Datei gepackt. Sie können das prüfen, indem Sie die Internetverbindung trennen, nachdem die Seite geladen ist, und einen Satz Symbole erstellen.

Welche Datei nutzt der Browser für das Tab-Symbol?

Browser nutzen favicon.ico oder einen Link-Tag in der Seite, der auf eine PNG- oder SVG-Datei zeigt. Die Tags dieses Werkzeugs nennen favicon.ico und das Apple-Symbol, damit jeder Browser ein Symbol passender Größe findet.

Warum wirkt mein Favicon bei 16 Pixeln unscharf?

Ein kleines Symbol hat nur sehr wenige Bildpunkte, deshalb verwischen feine Linien und kleine Buchstaben. Verwenden Sie eine einfache Form mit dicken Strichen oder höchstens zwei Buchstaben und prüfen Sie die Bilder mit 16 und 32 Pixeln in der ICO-Datei.

Warum haben die Apple-Symbole eine Hintergrundfarbe?

Ein Apple-Touch-Symbol mit transparenter Ecke zeigt diese Ecke auf dem iPhone und dem iPad schwarz an. Das Werkzeug füllt das ganze Quadrat mit der Hintergrundfarbe, die Sie gewählt haben.

Was gehört in den Kopfbereich der Seite?

Fügen Sie die vier Zeilen aus dem Kasten HTML-Tags in das Head-Element jeder Seite ein. Sie verknüpfen favicon.ico, das Apple-Symbol, das Manifest und die Themenfarbe.

Wozu dient das Web-App-Manifest?

Legen Sie site.webmanifest in den obersten Ordner Ihrer Website. Der Browser liest es, wenn ein Besucher die Seite als App installiert; es nennt die App, ihren Kurznamen und ihre Farben und führt die beiden Android-Symbole auf.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.