Favicon-Größen 2026: Was Sie wirklich brauchen (und was Sie weglassen können)
Die Favicon-Listen im Netz sind zwanzig Dateien lang. Vier decken praktisch alles ab. Welche Dateien Sie erzeugen, welches HTML Sie einfügen und wie Sie ein Favicon gestalten, das bei 16 px lesbar bleibt.
Aktualisiert am 11. August 20265 Min. Lesezeit
Suchen Sie nach Favicon-Größen, und Sie erhalten Listen mit zwanzig Dateien, die Hälfte davon für Plattformen, die es nicht mehr gibt. Der 2026 wirklich tragende Satz besteht aus vier Dingen: einer ICO-Datei für die Abwärtskompatibilität, einer SVG-Datei, falls Sie Vektorgrafik haben, einem PNG mit 180 × 180 für den iOS-Startbildschirm und PNGs mit 192 und 512 für Android und installierbare Web-Apps. Alles andere auf diesen Listen ist entweder von einem der vier abgedeckt oder bedient eine Plattform mit vernachlässigbarem Anteil.
Die Dateien, auf die es ankommt
| Datei | Größe | Zweck | Noch nötig? |
|---|---|---|---|
favicon.ico | 16, 32, 48 in einer Datei | Browser-Tabs, Lesezeichen, Rückfall für Altes | Ja |
icon.svg | Vektor | Moderne Browser; unterstützt den dunklen Modus | Wenn Sie Vektorgrafik haben |
apple-touch-icon.png | 180 × 180 | iOS-Startbildschirm | Ja — eine Größe deckt alle Geräte ab |
icon-192.png | 192 × 192 | Android-Startbildschirm | Ja |
icon-512.png | 512 × 512 | Installationsdialog und Startbild einer Web-App | Ja, wenn Sie ein Manifest ausliefern |
| Windows-Kacheln | 70–310 | Startkacheln von Windows 8/10 | Selten — Altlast |
Das ICO-Format lohnt sich zu verstehen, weil es ungewöhnlich ist: Eine einzelne .ico-Datei kann mehrere Größen enthalten, und der Browser wählt die passende. Deshalb deckt eine Datei 16, 32 und 48 ab, statt dass drei nötig wären.
Apple hat seine Seite erheblich vereinfacht — 180 × 180 ist inzwischen die einzige Touch-Icon-Größe, die Sie brauchen, und sowohl ältere als auch neuere Geräte skalieren diese eine Datei. Die langen Listen mit Apple-Symbolen zu 57, 72, 114 und 144 Pixeln sind seit Jahren überholt.
Gestalten Sie für 16 Pixel, nicht für Ihr Logo
Hier scheitern die meisten Favicons. Eine vollständige Wortmarke auf 16 × 16 verkleinert ist ein unleserlicher Fleck — in dieser Größe haben Sie ungefähr den Detailgrad eines einzelnen Buchstabens. Die Aufgabe eines Favicons ist, in einer Reihe von zwanzig Tabs erkennbar zu sein, nicht die Marke wiederzugeben.
- Nehmen Sie einen Buchstaben oder ein Zeichen, nicht das ganze Logo. Den Anfangsbuchstaben, den Bildteil einer Wort-Bild-Marke oder eine einzelne markante Form.
- Lassen Sie feines Detail weg. Dünne Striche, Verläufe und Konturen verschwinden oder werden zu Brei. Massive Formen überstehen es.
- Sorgen Sie für hohen Kontrast auf Hell und auf Dunkel. Tab-Leisten gibt es in beiden Varianten, und ein dunkles Zeichen auf dunkler Tab-Leiste verschwindet.
- Füllen Sie das Quadrat. Große transparente Ränder machen das Zeichen kleiner als nötig. Lassen Sie nur wenig Luft.
- Prüfen Sie in tatsächlicher Größe. Nicht vergrößert in Ihrem Programm — bei 16 Pixeln, in einem echten Browser-Tab, neben anderen Tabs.
Die Dateien erzeugen
Von einer quadratischen, transparenten Vorlage ausgehen
Idealerweise 512 × 512 oder größer. Sitzt Ihr Logo auf einem weißen Kasten, stellen Sie es mit dem Hintergrundentferner frei; ist es nicht quadratisch, schneiden Sie es mit dem Zuschneidewerkzeug zu, statt es vom Generator mit Rändern auffüllen zu lassen.
Den Satz erzeugen
Der Favicon-Generator erzeugt favicon.ico (16, 32 und 48 in einer Datei), PNG-Favicons in 16, 32, 48 und 96, das Apple-Touch-Icon in 180 × 180, die PNGs in 192 und 512 für Android und installierbare Web-Apps, ein site.webmanifest und ein HTML-Snippet zum Einfügen — alles in einem einzigen ZIP. Mit Pro kommen Android-Dichtestufen, Windows-Kacheln und eine SVG-Kopie einer Vektorvorlage hinzu.
Die Angaben im Manifest ausfüllen
Das 512 × 512-Symbol und das site.webmanifest sind bereits im Paket — die PWA-Symbole sind standardmäßig aktiviert. Tragen Sie vor dem Erzeugen im Generator den App-Namen, den Kurznamen und die Designfarbe ein, damit das Manifest sie enthält; auf die Symbole in 192 und 512 verweist es bereits von selbst.
Die Dateien in das Wurzelverzeichnis legen und die Tags ergänzen
Die Ablage im Wurzelverzeichnis ist wichtig: Browser fordern /favicon.ico direkt an, ob Sie es deklarieren oder nicht.
Logo hineinziehen, das komplette Favicon-Paket als ein ZIP erhalten. Auf Ihrem Gerät erzeugt — das Logo wird nie an einen Server geschickt.
Ein Favicon erzeugenDas HTML, das Sie brauchen
Vier Zeilen im <head> decken jeden aktuellen Browser und jede Plattform ab. Mehr als das ist fast immer Altlast, aus einer alten Anleitung kopiert:
<link rel="icon" href="/favicon.ico" sizes="32x32">— die Kompatibilitätsgrundlage.<link rel="icon" href="/icon.svg" type="image/svg+xml">— moderne Browser bevorzugen dies, wenn es vorhanden ist.<link rel="apple-touch-icon" href="/apple-touch-icon.png">— iOS-Startbildschirm.<link rel="manifest" href="/site.webmanifest">— verweist auf die Symbole mit 192 und 512 für Android und die App-Installation.
Ein SVG-Favicon hat über die Skalierbarkeit hinaus einen echten Vorteil: Es kann über eine prefers-color-scheme-Abfrage innerhalb der SVG-Datei auf das Farbschema des Browsers reagieren, sodass ein dunkles Zeichen auf einer dunklen Tab-Leiste ins Helle wechselt. Behalten Sie die ICO-Datei daneben — SVG-Favicons funktionieren in Chrome, Firefox, Edge und seit Safari 26 auch in Safari, ältere Browser und andere Werkzeuge brauchen die ICO-Datei aber weiterhin als Rückfall.
Warum Ihr neues Favicon nicht erscheint
Favicons werden ungewöhnlich hartnäckig zwischengespeichert — oft über ein normales hartes Neuladen hinaus und mitunter völlig unabhängig vom Seiten-Cache. Bevor Sie annehmen, Ihre Datei sei fehlerhaft, öffnen Sie sie direkt unter https://ihreseite.de/favicon.ico, um zu bestätigen, dass sie ausgeliefert wird, und probieren Sie dann ein privates Fenster, das meist mit einem leeren Symbol-Cache startet.
Hängt es wirklich fest, erzwingt ein Abfragezusatz am Link-Tag (/favicon.ico?v=2) ein erneutes Laden. Und prüfen Sie bei der Gelegenheit die Dateigröße: Favicons werden praktisch bei jedem Seitenaufruf angefordert, ein 200 KB großes Symbol gehört also durch den PNG-Kompressor. Ein gut gemachter Favicon-Satz wiegt insgesamt wenige Kilobyte.
Häufige Fragen
Welche Favicon-Größen brauche ich 2026 tatsächlich?
Vier Dinge decken es ab: eine `favicon.ico` mit den Fassungen zu 16, 32 und 48 Pixeln, eine SVG-Datei, falls Sie Vektorgrafik haben, ein Apple-Touch-Icon in 180 × 180 sowie PNGs mit 192 und 512 Pixeln, auf die ein Web-Manifest verweist. Die längeren Listen im Netz bestehen überwiegend aus alten Apple- und Windows-Größen.
Kann ich statt favicon.ico ein PNG verwenden?
Moderne Browser akzeptieren PNG- und SVG-Favicons, aber Browser fordern standardmäßig weiterhin `/favicon.ico` aus dem Wurzelverzeichnis an, und manche Werkzeuge und Feed-Leser erwarten es. Liefern Sie die ICO-Datei als Rückfall aus und lassen Sie moderne Browser die von Ihnen deklarierte SVG- oder PNG-Datei bevorzugen.
Warum sieht mein Favicon unscharf aus?
Meist, weil es aus einer Vorlage erzeugt wurde, die kleiner war als die größte Ausgabegröße, und dafür hochskaliert werden musste. Gehen Sie von mindestens 512 × 512 aus. Es kann auch zu detailreich sein — dünne Striche und Verläufe werden bei 16 Pixeln unabhängig von der Vorlagenqualität zu Brei.
Wie mache ich aus meinem Logo ein Favicon?
Schneiden Sie das Logo quadratisch zu, entfernen Sie den Hintergrund, damit es echte Transparenz hat, vereinfachen Sie es auf ein einzelnes Zeichen oder einen Buchstaben und lassen Sie es dann von einem Generator in den ICO- und PNG-Satz überführen. Prüfen Sie das Ergebnis bei 16 Pixeln in einem echten Tab, bevor Sie es ausliefern.