So erstellen Sie ein Favicon: PNG-zu-ICO-Anleitung

Ein Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen und Suchergebnissen. Ein fehlendes oder defektes Favicon lässt eine Website unfertig wirken, und Google zeigt Favicons inzwischen neben mobilen Suchergebnissen an – es beeinflusst also direkt die Klicks.

Warum ICO und nicht einfach PNG?

Moderne Browser akzeptieren PNG-Favicons, aber das klassische favicon.ico ist immer noch die sicherste Wahl: Es ist das, was Browser standardmäßig unter /favicon.ico anfordern, was alte Browser und manche Tools erwarten, und der ICO-Container kann mehrere Auflösungen in einer Datei speichern.

Ein ICO aus Ihrem Logo erstellen

Bereiten Sie ein quadratisches PNG Ihres Logos vor, idealerweise 256×256 oder größer, mit Transparenz.
Öffnen Sie den PNG-zu-ICO-Konverter und laden Sie es hoch.
Klicken Sie auf „Konvertieren": das Ergebnis ist ein 256×256-ICO (PNG-komprimiert, das moderne Vista+-Format, das sauber herunterskaliert).
Legen Sie die Datei in Ihr Website-Stammverzeichnis als favicon.ico.

Das HTML

Für volle Abdeckung fügen Sie zu Ihrem <head> hinzu:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> (180×180 PNG für iOS)

Design-Tipps

Testen Sie bei 16×16: feine Details verschwinden, fette einfache Formen gewinnen.
Halten Sie den Kontrast sowohl gegen helle als auch dunkle Browser-Themes.
Transparenz sieht besser aus als eine weiße Box.

Braucht man wirklich mehrere Größen in einer ICO?

Eine einzelne 256×256-ICO mit PNG-Kompression genügt für moderne Browser, die sie sauber für Tab und Lesezeichenleiste herunterskalieren. Zusätzliche Größen (16×16, 32×32, 48×48) in derselben ICO zu bündeln, hilft vor allem älterer Windows-Software und der Desktop-Taskleiste, wo ein von Hand abgestimmtes kleines Icon schärfer wirkt als ein automatisch verkleinertes. Ist Ihre Website rein webbasiert, ist die einzelne 256×256-Datei die einfachere und ebenso wirksame Wahl.

Häufige Favicon-Fehler

Die Datei ganz vergessen. Browser fordern /favicon.ico automatisch an, auch ohne Link-Tag, sodass eine fehlende Datei bei jedem Seitenaufruf als 404 in Ihren Serverprotokollen erscheint.
Ein rechteckiges Logo unverändert verwenden. Ein breites Wortmarken-Logo, auf ein quadratisches Favicon verkleinert, wird meist unleserlich; schneiden Sie stattdessen nur das Bildzeichen oder die Initialen zu.
Das Apple-Touch-Icon auslassen. Ohne es fällt das Speichern Ihrer Website auf dem iPhone-Startbildschirm auf einen Screenshot der Seite statt Ihr Icon zurück.
Caching. Browser cachen Favicons aggressiv; nach dem Ersetzen der Datei ist oft ein harter Reload oder ein direkter Besuch der Icon-URL nötig, um die Aktualisierung zu sehen.

Da Browser /favicon.ico bei jedem Seitenaufruf automatisch anfordern, egal ob verlinkt oder nicht, lohnt es sich zu prüfen, ob die Datei wirklich im Stammverzeichnis Ihrer Website liegt und nicht in einem Unterordner – ein Favicon an anderer Stelle wird von dieser automatischen Anfrage stillschweigend nie erfasst.