So erstellen Sie ein Favicon für Ihre Website: ICO-Dateihandbuch
Dieses kleine Symbol in Ihrem Browser-Tab erledigt mehr Arbeit, als Sie vielleicht denken. Favicons werden in Registerkarten, Lesezeichen, im Browserverlauf, auf mobilen Startbildschirmen und in Desktop-Verknüpfungen angezeigt. Ein fehlendes Favicon lässt Ihre Website unvollendet aussehen. Ein gutes macht es unter Dutzenden geöffneten Tabs sofort erkennbar. Die Erstellung dauert etwa fünf Minuten, wenn Sie die erforderlichen Größen und Formate kennen.
Was ist ein Favicon?
Ein Favicon (kurz für „Lieblingssymbol“) ist das kleine Symbol, das mit Ihrer Website verknüpft ist. Browser zeigen es in der Tab-Leiste neben Ihrem Seitentitel, in der Lesezeichenliste und im Browserverlauf an. Mobilgeräte verwenden es, wenn Benutzer Ihre Website zu ihrem Startbildschirm hinzufügen. Suchmaschinen können es in den Ergebnissen anzeigen. Es ist eines der kleinsten visuellen Elemente Ihrer Website, aber eines der am häufigsten gesehenen.
Erforderliche Favicon-Größen
Verschiedene Kontexte zeigen Ihr Favicon in unterschiedlichen Größen an. Um alle Anwendungsfälle abzudecken, benötigen Sie mehrere Versionen:
16x16 Pixel — Browser-Registerkarten. Dies ist die klassische Favicon-Größe und die kleinste Version, die Sie benötigen. 32x32 Pixel – Taskleistenverknüpfungen, neuere Browser-Registerkarten auf Displays mit hoher DPI. 48x48 Pixel — Windows-Desktop-Verknüpfungen und Site-Symbole.
180x180 Pixel — Apple Touch-Symbol. Dies wird von iOS verwendet, wenn jemand Ihre Website zu seinem Startbildschirm hinzufügt. Es ist die wichtigste mobile Größe. 192x192 Pixel — Android Chrome-Startbildschirmsymbol und PWA-Symbol (Progressive Web App). 512x512 Pixel – PWA-Begrüßungsbildschirme und der Android-Installationsdialog.
Favicon-Formate erklärt
ICO-Format: Das ursprüngliche Favicon-Format und das einzige, das überall funktioniert – auch in sehr alten Browsern und Internet Explorer. Eine ICO-Datei kann mehrere Größen in einer einzigen Datei bündeln (typischerweise 16x16, 32x32 und 48x48). Für maximale Kompatibilität sollte jede Website eine favicon.ico-Datei im Stammverzeichnis haben. Die PNG-zu-ICO-Konverter auf iformat.io macht die Erstellung einfach.
PNG-Format: Die moderne Alternative. PNG-Favicons sind einfacher zu erstellen (ein Bild pro Datei) und unterstützen volle Transparenz. Alle modernen Browser unterstützen PNG-Favicons. Der Nachteil besteht darin, dass Sie für jede Größe separate Dateien benötigen und sehr alte Browser diese möglicherweise nicht unterstützen.
SVG-Format: Die neueste Option. Da SVG ein Vektorformat ist, lässt sich eine einzelne Datei perfekt auf jede beliebige Größe skalieren – keine Pixelierung, keine mehreren Dateien. SVG-Favicons werden von Chrome, Firefox und Edge unterstützt, jedoch nicht von Safari (Stand Anfang 2026). SVG-Favicons unterstützen auch die Anpassung des Dunkelmodus durch CSS-Medienabfragen, was PNG und ICO nicht können.
Schritt 1: Entwerfen Sie Ihr Symbol
Die wichtigste Regel beim Favicon-Design: Halten Sie es einfach. Ihr Symbol wird nur 16 x 16 Pixel groß angezeigt – das entspricht einem Raster von nur 256 Quadraten. Feine Details, dünne Linien und kleiner Text sind in dieser Größe nicht lesbar. Die besten Favoriten sind kräftige, wiedererkennbare Formen mit hohem Kontrast.
Verwenden Sie Ihr Logo, wenn es in kleinen Größen funktioniert. Viele Unternehmen verwenden nur den ersten Buchstaben ihres Namens oder eine vereinfachte Version ihres Logos. Vermeiden Sie Fotos – sie werden bei 16x16 zu unkenntlichen Klecksen. Unifarben und einfache geometrische Formen funktionieren am besten. Testen Sie Ihr Design, indem Sie es mit 16 x 16 Pixeln betrachten, bevor Sie es festlegen.
Schritt 2: Erstellen Sie die ICO-Datei
Beginnen Sie mit einem quadratischen PNG-Bild mit mindestens 512 x 512 Pixeln. Eine größere Quelle liefert sauberere Ergebnisse, wenn sie verkleinert wird. Benutzen Sie die PNG-zu-ICO-Konverter um Ihre ICO-Datei zu generieren. Der Konverter erstellt ein ICO in mehreren Größen mit 16x16-, 32x32- und 48x48-Versionen – alles aus Ihrem einzigen Quellbild.
Wenn Ihr Quellbild ein JPG ist (z. B. ein aus einem Designtool exportiertes Logo), verwenden Sie das JPG-zu-ICO-Konverter stattdessen. Für Vektorlogos im SVG-Format gilt: SVG-zu-ICO-Konverter liefert die schärfsten Ergebnisse, da der Vektor in jeder Zielgröße gerendert wird.
Schritt 3: Fügen Sie den HTML-Code hinzu
Platzieren Sie Ihre favicon.ico-Datei im Stammverzeichnis Ihrer Website. Die meisten Browser finden es automatisch unter /favicon.ico, auch ohne HTML-Tag. Fügen Sie diese Tags jedoch zur expliziten Steuerung und zur Unterstützung aller Formate in Ihren HTML-Code ein
<head> Abschnitt:<link rel="icon" type="image/x-icon" href="/favicon.ico"> – Klassisches ICO-Favicon. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — PNG-Favicon für moderne Browser. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> – Symbol für den Startbildschirm von Apple-Geräten.Schritt 4: Generieren Sie Apple Touch-Symbole und Android-Symbole
Das Apple Touch-Symbol (180 x 180 PNG) wird angezeigt, wenn iOS-Benutzer Ihre Website zu ihrem Startbildschirm hinzufügen. Erstellen Sie eine 180 x 180 Pixel große PNG-Version Ihres Symbols mit etwas Abstand an den Rändern – iOS wendet seine eigenen abgerundeten Ecken an. Nennen Sie es apple-touch-icon.png und verweisen Sie in Ihrem HTML darauf.
Für Android und Progressive Web Apps benötigen Sie PNG-Symbole im Format 192 x 192 und 512 x 512. Auf diese wird normalerweise in einer Web-App-Manifestdatei (manifest.json oder site.webmanifest) verwiesen. Mit der Manifestdatei können Sie außerdem Ihren App-Namen, die Designfarbe und den Anzeigemodus festlegen, wenn Benutzer Ihre Website als App installieren.
Häufige Favicon-Fehler
Zu viele Details verwenden: Ein komplexes Logo mit dünnen Linien und kleinem Text sieht bei 200 Pixel großartig aus, wird bei 16 Pixel jedoch zu einem unleserlichen Fleck. Vereinfachen Sie rücksichtslos. Den Dunkelmodus vergessen: Wenn Ihr Favicon eine dunkle Farbe auf einem transparenten Hintergrund verwendet, ist es in Browsern mit dunklen Tab-Leisten unsichtbar. Erwägen Sie das Hinzufügen eines hellen Rahmens oder die Verwendung von SVG-Favicons mit CSS im dunklen Modus.
Nicht in Originalgröße getestet: Zeigen Sie Ihr Favicon immer im Format 16x16 in einem tatsächlichen Browser-Tab an. Was in Ihrem Design-Tool bei 400 % Zoom gut aussieht, funktioniert möglicherweise nicht in Originalgröße. Überspringen der ICO-Datei: Während PNG-Favicons in modernen Browsern funktionieren, stellt eine favicon.ico in Ihrem Stammverzeichnis die Kompatibilität mit jedem Browser und Crawler sicher, auch mit älteren Systemen.
Testen Sie Ihr Favicon
Nachdem Sie Ihre Favicon-Dateien hochgeladen und den HTML-Code hinzugefügt haben, testen Sie sie in mehreren Browsern: mindestens Chrome, Firefox, Safari und Edge. Überprüfen Sie, ob das Symbol auf der Registerkarte, in den Lesezeichen (Lesezeichen für eine Seite setzen und überprüfen) und auf Mobilgeräten (zum Startbildschirm auf iOS und Android hinzufügen) korrekt angezeigt wird. Browser-Caches können aggressiv mit Favoriten umgehen. Wenn Sie Ihr neues Symbol nicht sehen, versuchen Sie, den Cache zu leeren oder ein Inkognito-Fenster zu öffnen.
Wenn Sie in die andere Richtung gehen müssen – das Extrahieren von Symbolen aus einer vorhandenen ICO-Datei – die ICO-zu-PNG-Konverter extrahiert die eingebetteten Bilder. Dies ist nützlich, wenn Sie ein Favicon aktualisieren müssen, aber nur über die ICO-Datei und nicht über das Original-Quellbild verfügen.
Die Erstellung eines richtigen Favicons dauert fünf Minuten, verleiht Ihrer Website jedoch ein elegantes, professionelles Erscheinungsbild. Beginnen Sie mit einem einfachen, auffälligen Design, generieren Sie Ihre ICO-Datei mit einem Online-Konverter, fügen Sie die HTML-Tags hinzu und testen Sie sie browserübergreifend. Ihre Website sieht vollständig aus – und Ihre Benutzer können Ihren Tab unter den Dutzenden, die sie geöffnet haben, finden.