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

  1. Bereiten Sie ein quadratisches PNG Ihres Logos vor, idealerweise 256×256 oder größer, mit Transparenz.
  2. Öffnen Sie den PNG-zu-ICO-Konverter und laden Sie es hoch.
  3. Klicken Sie auf „Konvertieren": das Ergebnis ist ein 256×256-ICO (PNG-komprimiert, das moderne Vista+-Format, das sauber herunterskaliert).
  4. Legen Sie die Datei in Ihr Website-Stammverzeichnis als favicon.ico.
Werbeplatz – Anzeigen in public/ads.js aktivieren · article-mid

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.