Ein Favicon zu erstellen braucht drei Schritte: ein quadratisches Bild vorbereiten, es in eine ICO-Datei umwandeln und ein <link>-Tag ins HTML setzen. Das Umwandeln läuft in deinem Browser mit unseren Bild-zu-ICO-Konvertern — ohne Upload, ohne Konto. Der ganze Job dauert etwa fünf Minuten. Hier jeder Schritt mit den Details, auf die es wirklich ankommt.
Was ein Favicon eigentlich ist
Ein Favicon ist das kleine Icon, das zu deiner Website gehört. Es taucht in Browser-Tabs auf, in Lesezeichenlisten, im Verlauf und in manchen Browsern neben der URL. Bei 16×16 Pixeln im Tab-Streifen ist es oft das einzige Branding, das ein Besucher sieht, sobald er acht Tabs offen hat.
Das klassische Favicon ist eine .ico-Datei, und ICO hat eine Eigenschaft, die hier zählt: Es ist ein Container. Eine einzige ICO-Datei kann dasselbe Bild in mehreren Auflösungen enthalten — typischerweise 16×16, 32×32 und 48×48 —, und der Browser wählt die passende für den Kontext. Der Tab-Streifen nimmt 16, ein Retina-Display 32, der Windows-Verknüpfungsdialog 48. Die Mechanik des Containerformats erklärt unser ICO-Format-Deep-Dive.
Die Konvention stammt von Internet Explorer 5 aus dem Jahr 1999, der automatisch /favicon.ico von jeder besuchten Website abrief. Der Dateiname blieb. Und die Reichweite des Icons ist seitdem gewachsen: Google zeigt Favicons in der mobilen Suche neben den Ergebnissen — das 16-Pixel-Quadrat ist also längst Teil deines Such-Snippets, nicht nur Tab-Dekoration.
Schritt 1: Das Ausgangsbild vorbereiten
Das Ausgangsbild entscheidet, ob das Favicon scharf aussieht oder wie ein Fleck. Drei Regeln:
Quadratisch machen. Favicons sind quadratisch. Ist dein Logo breit, schneide es zu oder ergänze es zu einer quadratischen Fläche, sonst quetscht die Umwandlung es zusammen.
Einfach halten. Bei 16×16 gibt es insgesamt 256 Pixel. Dünne Linien, Verläufe und kleiner Text lösen sich in Rauschen auf. Eine einzelne kräftige Form oder ein bis zwei Buchstaben in fetter Schrift überleben; eine detaillierte Illustration nicht. Teste, indem du dein Bild auf Thumbnail-Größe verkleinerst — wenn du es da nicht erkennst, kann es ein Browser-Tab auch nicht.
Groß anfangen. Arbeite mit mindestens 512×512. Verkleinern versteckt Fehler, Vergrößern erfindet sie.
Das Dateiformat der Vorlage ist fast egal. Nimm PNG oder WebP, wenn dein Icon einen transparenten Hintergrund hat — JPG kann keine Transparenz speichern, die transparenten Bereiche kämen also auf Weiß geebnet heraus. Für ein flaches Logo auf einfarbigem Grund reicht auch JPG.
Schritt 2: Das Bild in ICO umwandeln
Ziehe die Quelldatei in den Konverter, der zu ihrem Format passt: PNG zu ICO, JPG zu ICO oder WebP zu ICO. Das Tool dekodiert das Bild lokal in deinem Browser, packt die Standardgrößen in einen einzigen ICO-Container und gibt dir eine Datei zum Herunterladen. Nichts wird hochgeladen; alles läuft auf deinem Rechner.
Der Multi-Größen-Container ist der Grund, ICO dem bloßen Umbenennen einer PNG vorzuziehen. Eine 512×512-PNG als Favicon zwingt den Browser, sie on the fly zu verkleinern, und automatisches Verkleinern ist feinen Formen nicht wohlgesonnen. Ein ICO trägt handgeschärfte kleine Versionen in sich, und der Browser wählt einfach aus.
Welche Größen hineingehören und wann du über ICO hinaus weitere Dateien brauchst, ist ein eigenes Thema — unser Favicon-Größen-Guide hat die komplette Tabelle, inklusive der Apple-Touch-Icon-Größen für iOS-Startbildschirme.
Schritt 3: In die Website einbinden
Lege favicon.ico ins Wurzelverzeichnis deiner Website und füge eine Zeile in den <head> deiner Seiten ein:
<link rel="icon" href="/favicon.ico" sizes="any" />
Der Hinweis sizes="any" sagt dem Browser, dass die Datei mehrere Auflösungen enthält — er soll die beste wählen, statt 16×16 anzunehmen.
Die Datei unter /favicon.ico abzulegen hat Wert über das Link-Tag hinaus. Browser rufen diesen Pfad automatisch ab, wenn eine Seite nichts deklariert, und Werkzeuge wie Feedreader und Crawler-Vorschauen schauen ebenfalls dort. Ein Favicon im Wurzelverzeichnis funktioniert selbst für Seiten, die das Tag vergessen.
Moderne Browser akzeptieren auch PNG-Favicons, so deklariert:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
PNG-Favicons sind pro Datei kleiner und leichter zu erzeugen, aber die Kompatibilitätskrone gehört weiterhin ICO: Es funktioniert in jedem Browser, der je ausgeliefert wurde, es ist das Format, das die automatische /favicon.ico-Anfrage erwartet, und eine Datei deckt alle Größen ab. Beides auszuliefern — ICO im Root plus PNG-Deklarationen — ist der doppelte Boden, bei dem die meisten Websites landen.
Das Ergebnis prüfen
Lade die Seite hart neu (Favicons werden aggressiv gecacht), dann prüfe den Tab, die Lesezeichenleiste und den Verlauf. Wenn das Icon in Tab-Größe matschig aussieht, liegt es fast nie am Konverter — es liegt am Ausgangsbild. Zurück zu Schritt 1, Form vereinfachen, neu umwandeln.
Deine Logo-Datei liegt wahrscheinlich gerade in irgendeinem Ordner. Zieh sie in den Konverter, verdrahte das Link-Tag — und dein Tab ist kein leeres Dokument-Icon mehr.