Werkzeug · Web
Favicon-Generator
Quadratisches Bild hochladen, alle nötigen Größen und das fertige HTML-Snippet bekommen. Auch die favicon.ico wird erzeugt.
Läuft vollständig im Browser. Ihre Dateien verlassen das Gerät nicht.
Logo oder Bild hierher ziehen, am besten quadratisch
Nichts wird hochgeladen.
HTML für den head-Bereich
Was ein Favicon leisten muss
Das Favicon ist das kleinste Markenelement einer Website und gleichzeitig das am häufigsten gezeigte. Es steht im Browser-Tab, im Lesezeichenmenü, im Verlauf, auf dem Startbildschirm eines Handys und seit einigen Jahren auch in den mobilen Suchergebnissen von Google. Wer dort nichts hinterlegt, bekommt einen grauen Platzhalter neben dem eigenen Treffer.
Die Dateien, die dieses Werkzeug erzeugt
| Datei | Größe | Wofür |
|---|---|---|
| favicon.ico | 32 × 32 px | Direkte Abfrage durch Browser und Programme, ohne Blick ins HTML |
| favicon-32.png | 32 × 32 px | Browser-Tab auf dem Desktop |
| apple-touch-icon.png | 180 × 180 px | Startbildschirm auf iPhone und iPad |
| icon-192.png | 192 × 192 px | Android, Web-App-Manifest, Google-Suchergebnisse |
| icon-512.png | 512 × 512 px | Installierte Web-App, Splash-Screen |
Drei Fehler, die immer wieder auftauchen
- Zu viel Detail. Auf 32 Pixel überlebt keine Feinzeichnung. Reduzieren Sie auf eine Form, ein Zeichen oder zwei Farben.
- Transparenz ohne Rücksicht auf dunkle Oberflächen. Ein schwarzes Logo mit transparentem Grund verschwindet im dunklen Modus. Entweder eine Füllfarbe setzen oder eine Form wählen, die auf beiden Untergründen funktioniert.
- Die Adresse ändern. Google merkt sich die Adresse des Favicons. Wandert die Datei bei jedem Relaunch woandershin, dauert es Wochen, bis das Icon in den Suchergebnissen wieder auftaucht.
Ein zu großes Ausgangsbild lässt sich vorher mit Bilder zuschneiden quadratisch machen; einen störenden weißen Rand nimmt Hintergrund entfernen heraus. Wohin die Dateien danach gehören, steht im Ratgeber Favicon richtig einbinden.
Häufige Fragen
Welche Größen brauche ich wirklich?
Ein 32-Pixel-Icon für den Browser-Tab, ein 180-Pixel-Icon für den Startbildschirm auf iOS und ein 192- sowie 512-Pixel-Icon für Android und die Web-App-Manifestdatei. Alles Weitere ist Bequemlichkeit. Das Werkzeug erzeugt genau diese Größen plus eine favicon.ico.
Braucht Google ein bestimmtes Favicon-Format?
Google verlangt ein quadratisches Icon, dessen Kantenlänge ein Vielfaches von 48 Pixeln ist, und eine Datei, die für den Googlebot erreichbar ist. Außerdem muss das Icon dauerhaft unter derselben Adresse liegen. Deshalb legt das Werkzeug zusätzlich eine 192er-Datei an – 192 ist durch 48 teilbar.
Warum sieht mein Logo als Favicon unleserlich aus?
Weil 32 mal 32 Pixel keinen Schriftzug tragen. Ein Favicon muss auf die Größe eines Textcursors funktionieren. Nehmen Sie den Bildteil des Logos, ein einzelnes Zeichen oder eine sehr reduzierte Form – nie den vollständigen Schriftzug.
Muss die Datei favicon.ico heißen?
Nicht zwingend, wenn Sie die Icons per link-Element im HTML angeben. Es ist trotzdem sinnvoll, zusätzlich eine favicon.ico im Wurzelverzeichnis abzulegen: Manche Programme, Feedleser und ältere Browser fragen genau diese Adresse ab, ohne ins HTML zu schauen.
Weitere Werkzeuge
QR-Code-Generator
QR-Codes als PNG oder SVG, ohne Ablaufdatum
Bild umwandeln
Das freie Werkzeug für jede Formatkombination
Bilder komprimieren
Dateigröße senken, Qualität selbst bestimmen
Alle Werkzeuge in der Übersicht, dazu passende Anleitungen im Ratgeber.