Favicon-Größen und HTML-Code (2026): Die kurze Liste | We.Inc
Die Favicon-Dateien, die eine Website 2026 wirklich braucht: favicon.ico, ein SVG, ein 180px Apple-Touch-Icon und Manifest-Icons in 192 und 512, mit kopierbaren Head-Tags und einem Manifest-Baukasten.
Fünf Dateien decken fast jeden Browser und jedes Gerät ab: eine favicon.ico mit 32 mal 32, ein SVG-Icon für moderne Browser, ein PNG-apple-touch-icon mit 180 mal 180 für iPhone-Startbildschirme sowie PNGs mit 192 mal 192 und 512 mal 512, die in einem Web-App-Manifest stehen. Die Google-Suche möchte ein quadratisches Icon, idealerweise größer als 48 Pixel.
Das Favicon-Set, das sich lohnt
Datei
Größe
Genutzt von
Beliebig (Vektor)
Tabs moderner Browser, scharf in jeder Größe
Startbildschirm von iPhone und iPad
Web-App-Manifest, Android-Startbildschirm
Web-App-Manifest, Installations- und Startbildschirme
Ältere Favicon-Anleitungen listen zwanzig oder mehr Größen für Geräte, die niemand nutzt. Heute skaliert der Browser aus ein paar guten Quelldateien, also geht es darum, die richtigen fünf auszuwählen, die Head-Tags korrekt zu schreiben und sicherzustellen, dass Google sie crawlen kann. Mit dem Baukasten unten erzeugst du die Tags und das Manifest für deine eigene Website.
Gestalte eine quadratische Vorlage mit 512 mal 512, das Zeichen zentriert und mit etwas Abstand zum Rand.
Exportiere die fünf Dateien aus der Tabelle oder erstelle sie mit unserem Favicon-Generator.
Trag im Baukasten den Namen und die Farbe deiner Website ein und kopiere dann die Head-Tags und das Manifest.
Lade die Dateien in das Stammverzeichnis der Website hoch, füge die Tags in den head jeder Seite ein und prüfe mit einem harten Neuladen.
Teste die 16-Pixel-Version für sich allein; feine Schrift und dünne Linien verschwinden in Tab-Größe, also vereinfache das Zeichen.
Gib dem SVG eine Media Query für den Dark Mode, damit ein dunkles Logo auf dunklen Browser-Tabs sichtbar bleibt.
Halte den wichtigen Teil eines maskierbaren Icons innerhalb des mittleren Kreises mit einem Radius von 40% der Breite, denn Android schneidet den Rest eventuell ab.
Blockiere die Icon-Dateien oder deine Startseite nicht in der robots.txt; Google muss beides crawlen, um dein Favicon in den Ergebnissen anzuzeigen.
Browser cachen Favicons sehr hartnäckig. Benenne die Datei also um oder hänge einen Versionsparameter an, wenn du sie ersetzt.
Häufige Fragen
Was ist die beste Favicon-Größe?
Es gibt nicht die eine beste Größe. Liefere ein ICO mit 32 mal 32 für die Kompatibilität und ein SVG für scharfe moderne Tabs aus und ergänze dann das 180-Pixel-Apple-Icon sowie die Manifest-Icons in 192 und 512 für Startbildschirme. Die Google-Suche verlangt ein quadratisches Bild mit mindestens 8 Pixeln, besser größer als 48 mal 48.
Wie binde ich ein Favicon in eine Website ein?
Leg die Dateien in das Stammverzeichnis deiner Website und füge Link-Tags in den head jeder Seite ein: rel icon für das ICO und das SVG, rel apple-touch-icon für das 180-Pixel-PNG und rel manifest mit Verweis auf eine JSON-Datei, die die Icons in 192 und 512 auflistet. Der Baukasten auf dieser Seite schreibt diese Zeilen für dich.
Warum wird mein Favicon bei Google nicht angezeigt?
Google muss sowohl deine Startseite als auch die Icon-Datei crawlen können, das Icon muss quadratisch sein, und der Link muss im head der Startseite stehen. Änderungen können eine Weile dauern, weil Google Favicons nach eigenem Zeitplan neu crawlt.
Brauche ich favicon.ico noch?
Es lohnt sich, sie zu behalten. Manche Tools, Feedreader und ältere Browser fragen direkt nach /favicon.ico, ohne dein HTML zu lesen, und ein kleines ICO im Stammverzeichnis beantwortet diese Anfragen.
Was ist ein maskierbares Icon?
Ein Manifest-Icon mit dem purpose maskable, gezeichnet mit zusätzlichem Rand, damit Android es zu einem Kreis, Squircle oder einer anderen Form zuschneiden kann. Halte das Logo innerhalb der zentralen Schutzzone und fülle den Hintergrund bis zum Rand.
Warum die Liste kürzer geworden ist
Browser wählen heute das passendste Icon und skalieren es, und mit dem SVG-Format reicht eine Datei für jede Tab-Größe. Die vielen alten Windows-Kachel- und Apple-Größen waren für Plattformen gedacht, die sich inzwischen weiterentwickelt haben.
Apples Safari-Dokumentation beschreibt zwar noch Touch-Icons pro Gerät, aber iOS greift auf ein größeres Icon zurück, wenn es keine exakte Übereinstimmung gibt. Ein einziges 180-Pixel-PNG deckt aktuelle iPhones und iPads daher gut ab.
Die Manifest-Icons
Laut web.dev brauchen Chromium-Browser mindestens ein Icon mit 192 Pixeln und eines mit 512 Pixeln im Manifest, bevor sich eine Website installieren lässt. Mit diesen beiden skaliert Chrome automatisch für andere Pixeldichten.
Jedes Manifest-Icon kann den purpose any, maskable oder monochrome tragen. Nimm für maskable eine eigene Datei, denn ein Rand, der für eine zugeschnittene Form passt, wirkt in quadratischer Darstellung zu klein.
So kommt das Favicon in die Suchergebnisse
Die Google-Suche zeigt ein Favicon neben den Ergebnissen, wenn sie eines auf deiner Startseite findet. Unterstützte rel-Werte sind icon, shortcut icon, apple-touch-icon und apple-touch-icon-precomposed.
Google akzeptiert außerdem mehrere Formate, darunter ICO, PNG, GIF und JPEG. Die Icon-Datei darf sogar auf einer anderen Domain liegen, solange Googlebot sie abrufen darf.