DE

So erstellst du ein Favicon für deine Website

Zuletzt aktualisiert: 28. Oktober 2026

Ein Favicon ist das kleine Icon neben dem Namen deiner Website im Browser-Tab, in den Lesezeichen und im Verlauf – und auf dem Smartphone auch in den Google-Suchergebnissen. Fehlt es, zeigen Browser einen neutralen Globus, und deine Website wirkt unfertig. Ein gutes Favicon ist in ein paar Minuten erstellt.

Das richtige Ausgangsbild

  • Quadratisch, mindestens 256 × 256 Pixel, am besten als PNG oder SVG mit transparentem Hintergrund.
  • Schlicht: Bei 16 × 16 Pixeln bleiben nur kräftige Formen erkennbar. Ein Bildzeichen oder ein einzelner Buchstabe funktioniert viel besser als ein komplettes Logo mit Schriftzug.
  • Kontrastreich, damit es sowohl im hellen als auch im dunklen Browser-Design gut zu sehen ist.

Liegt dein Logo als SVG-Datei vor, kannst du mit SVG in PNG ein großes PNG daraus exportieren. Ist dein Bild noch nicht quadratisch, bringst du es mit Bildgröße ändern auf die richtigen Maße.

Welche Dateien du brauchst

Nicht jede Stelle, an der das Icon auftaucht, sucht nach derselben Datei. Ein sinnvolles, zeitgemäßes Set sieht so aus:

  • favicon.ico im Hauptverzeichnis deiner Website, mit Versionen in 16, 32 und 48 Pixeln. Browser und viele andere Tools fragen /favicon.ico weiterhin automatisch ab, selbst wenn dein HTML auf eine andere Datei verweist.
  • Ein SVG-Icon (optional), das moderne Browser in jeder Größe nutzen können.
  • apple-touch-icon.png mit 180 × 180 Pixeln. Es wird verwendet, wenn jemand deine Website zum Home-Bildschirm eines iPhones oder iPads hinzufügt.

Auch die Google-Suche zeigt dein Favicon an. Laut den Richtlinien von Google soll das Icon quadratisch sein und eine Größe haben, die ein Vielfaches von 48 Pixeln ist. Enthält deine ICO-Datei auch die Version mit 48 × 48 Pixeln oder stellst du ein PNG mit 96 oder 192 Pixeln bereit, ist das abgedeckt.

favicon.ico erstellen

  1. Öffne PNG in ICO und zieh dein quadratisches PNG hinein. JPG, WebP und SVG funktionieren ebenfalls.
  2. Setz Häkchen bei den Größen 16, 32 und 48. Nimm 256 nur dazu, wenn du die Datei auch als Windows-Icon verwenden willst.
  3. Speichere die Datei und lade sie als favicon.ico in das oberste Verzeichnis deiner Website hoch, sodass sie unter deine-website.de/favicon.ico erreichbar ist.

Den HTML-Code einfügen

Füge diese Zeilen in den <head> jeder Seite ein und passe die Dateinamen an deine an:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Browser, die SVG verstehen, nehmen das SVG, alle anderen greifen auf die ICO-Datei zurück. Hast du keine SVG-Version, lass die zweite Zeile einfach weg.

Warum wird noch das alte Icon angezeigt?

Browser halten Favicons sehr lange im Cache. Ruf die Adresse des Icons direkt auf, lade sie neu oder prüfe das Ergebnis in einem privaten Fenster. Google aktualisiert das Icon in den Suchergebnissen, sobald es deine Startseite das nächste Mal crawlt – und das kann Tage oder Wochen dauern.

In diesem Ratgeber verwendete Tools

Weitere Ratgeber