1. Einführung: Favicon erstellen leicht gemacht
Wie viele Tabs sind in Ihrem Browser gerade geöffnet? Zehn? Dreißig? In dieser schmalen Leiste schrumpft jede Website auf ein winziges Symbol. Wer dort nur das graue Standard-Blatt zeigt, wird übersehen. Genau diese Lücke schließt das Favicon, die kleine Grafik neben dem Seitentitel. Sie ist schnell erstellt und arbeitet an mehr Stellen für Sie, als die meisten denken.
Auf einen Blick:
- Ein Favicon muss quadratisch sein; Google empfiehlt für die Anzeige in der Suche mindestens 48 × 48 Pixel (Google Search Central).
- Drei Dateien decken heute fast alle Fälle ab: favicon.ico, ein SVG und ein Apple Touch Icon mit 180 × 180 Pixeln (Evil Martians).
- WordPress erzeugt aus einem quadratischen Bild ab 512 × 512 Pixeln alle nötigen Varianten automatisch (WordPress.org).
- 3 von 13 geprüften Vereins-Websites aus der Region Göttingen haben gar kein Favicon, ein SVG nutzt keine einzige (Kreativschock-Stichprobe, Juli).
Ein Favicon ist ein kleines, quadratisches Symbol, das Browser neben dem Seitentitel anzeigen: im Tab, in Lesezeichen, im Verlauf und in den Suchergebnissen. Es liegt als ICO-, PNG- oder SVG-Datei auf dem Server und wird im HTML-Kopf der Website verknüpft. Ein Favicon stärkt den Wiedererkennungswert einer Marke im Browser.
Ein eigenes Favicon erstellen kostet weder viel Zeit noch Geld. Der Effekt bleibt dauerhaft. Trotzdem fehlt das kleine Detail erstaunlich oft, selbst auf sonst gepflegten Seiten. In unseren Projekten für professionelles Webdesign gehört es deshalb von Anfang an zum Standard, genauso wie durchdachte Farben im Webdesign. Ob Sie gerade eine neue Website erstellen oder eine bestehende pflegen: Dieser Ratgeber zeigt Formate, Größen und den schlanksten Weg, ein Favicon zu erstellen und einzubinden.
2. Warum ein Favicon mehr ist als Dekoration
Ein Favicon funktioniert wie das Klingelschild an einem großen Mehrfamilienhaus. Kaum jemand liest alle Namen von oben nach unten. Das Auge sucht das vertraute Schild und drückt. Genauso scannen Nutzer ihre Browser-Tabs: nicht nach Text, sondern nach Farbe und Form.
Das Favicon ist Ihr kleinstes Markenzeichen.
Wann haben Sie zuletzt ein Lesezeichen anhand der Beschriftung gesucht? Vermutlich nie, denn die kleinen Symbole übernehmen die Orientierung: in der Lesezeichenleiste, im Verlauf, auf dem Homescreen von Android und iOS und in der Google Suche. Dort wird das Favicon direkt neben jedem Treffer angezeigt, am Smartphone wie am Desktop. Ohne eigenes Icon steht da nur ein neutraler Platzhalter. Das kostet Vertrauen. Deshalb braucht jede Seite unbedingt ein Favicon, der kleine Handwerksbetrieb genauso wie der Onlineshop. Wer in Suchmaschinenoptimierung investiert, sollte dieses Detail nicht verschenken.
Google formuliert die Anforderungen in seiner Dokumentation unmissverständlich. Dort heißt es: „Die Mindestgröße beträgt zwar 8 × 8 Pixel, wir empfehlen jedoch, ein Favicon mit einer Größe von mindestens 48 × 48 Pixeln zu verwenden, damit es auf verschiedenen Oberflächen gut aussieht.“ Deutlicher geht es kaum.
Kurz zusammengefasst: Ein Favicon wird überall dort angezeigt, wo Browser und Suchmaschinen Websites auflisten, von Tabs über Lesezeichen bis zur Google Suche. Es erhöht den Wiedererkennungswert, wirkt professionell und kostet einmalig wenige Minuten Arbeit. Websites ohne eigenes Icon verschenken an jeder dieser Stellen einen kleinen Vertrauensvorschuss.
3. Formate und Größen: von ICO bis SVG
Drei Formate teilen sich heute die Arbeit. Die klassische ICO-Datei stammt noch aus der Zeit des Internet Explorer und ist eine Art Matroschka: In einer Datei stecken mehrere Auflösungen, der Browser zieht die passende heraus. PNG-Dateien sind der verlustfreie Standard für feste Größen und werden von praktisch allen Browsern unterstützt. Ein SVG dagegen ist kein fertiges Bild, sondern ein Bauplan aus Kurven, der in jeder Größe gestochen scharf bleibt.
Hier ist der Haken: Nicht jedes Format läuft überall. Moderne Browser unterstützen ein SVG Favicon zuverlässig, allen voran Google Chrome, Firefox und Edge; ältere greifen auf die favicon.ico zurück. GIF ist technisch möglich, aber ungeeignet. Ein modernes Setup kombiniert deshalb Dateien in verschiedenen Größen und Formaten:
| Datei | Größe | Aufgabe |
| favicon.ico | 32 × 32 Pixel | Fallback für ältere Browser |
| icon.svg | beliebig skalierbar | moderne Browser, Dark Mode |
| apple-touch-icon.png | 180 × 180 Pixel | Homescreen auf iOS |
| icon-192.png und icon-512.png | 192 und 512 Pixel | Android, verknüpft im Web-Manifest |
Merken Sie sich eine Zahl: 512. Denn bei den kleinen Icons zählt jedes Pixel.
Wer seine Ausgangsgrafik quadratisch und 512 Pixel groß anlegt, deckt damit jede benötigte Variante ab, vom 16 x 16 Pixel kleinen Tab-Symbol bis zum Homescreen-Icon. Wie Sie Grafiken generell schlank und scharf halten, zeigt unser Ratgeber Bilder für die Website optimieren.
4. Schritt für Schritt: Favicon erstellen und einbinden
Das Erstellen eines Favicons dauert vom Logo bis zur fertigen Datei etwa eine halbe Stunde. So gehen Sie vor.
4.1 Die Ausgangsgrafik vorbereiten
Nutzen Sie Ihr Logo als Favicon, aber vereinfachen Sie es radikal. Bei 16 Pixeln Kantenlänge überleben keine Details, keine dünnen Linien, kein Schriftzug. Reduzieren Sie das Motiv auf ein Zeichen: einen Buchstaben, ein Symbol, eine Grundform in Ihrer Markenfarbe. Weniger ist hier Programm. Legen Sie die kleine Grafik quadratisch mit 512 Pixeln an, etwa in Photoshop oder einem Vektorprogramm. So entsteht ein ansprechendes Favicon, das auch winzig noch funktioniert.
4.2 Dateien erzeugen: Favicon Generator oder Handarbeit
So sieht es aus: Ihr Icon lässt sich komplett online erstellen. Ein Favicon Generator steht kostenlos zur Verfügung, wandelt Ihr Bild in wenigen Klicks um und liefert die passenden Code-Zeilen gleich mit. Sie können also alle Dateien bequem mit dem Generator erstellen, statt sie von Hand zu exportieren. Viele dieser Tools erzeugen allerdings Komplettpakete mit Dutzenden Dateien für jede erdenkliche Plattform, und die meisten Ratgeber empfehlen genau das.
Unsere Position: Das ist Ballast von gestern. Die Entwickler-Agentur Evil Martians bringt es in ihrem Favicon-Guide auf den Punkt. Ihr Rat: „Statt Dutzende Icons auszuliefern, brauchen Sie nur fünf Icons und eine JSON-Datei.“ (Original: „Instead of serving dozens of icons, all you need is just five icons and one JSON file.“) Konkret: favicon.ico, icon.svg und apple-touch-icon.png, dazu zwei PNG-Varianten für Android im Web-Manifest. Drei Dateien, ein Manifest, fertig. Windows-Kacheln und alte iOS-Sondergrößen fragt heute kein relevantes Gerät mehr ab. Wer beim Favicon-Generator nur diese Dateien übernimmt, hält seine Website schlank.
4.3 Favicon in die Website einbinden
Wer das Favicon einbinden möchte, hat zwei Wege. Der einfache: Laden Sie die Dateien ins Hauptverzeichnis Ihrer Domain hoch. Die favicon.ico wird dort sogar ohne eine Zeile Code gefunden. Browser fragen diese Adresse automatisch ab. Sauberer ist die Verknüpfung im HTML-Kopf: je ein link-Element für ICO, SVG und Touch Icons, ein viertes für das Manifest. Diese vier Zeilen liefert jeder gute Generator fertig zum Kopieren.
4.4 Favicon in WordPress hinterlegen
Sie fragen sich jetzt vielleicht: Geht das nicht einfacher? In WordPress ja. Dort lässt sich das Favicon hinzufügen, ohne Code anzufassen. Es heißt dort Website-Icon: einfach das Favicon in die Mediathek hochladen, in den Einstellungen auswählen, speichern. WordPress erzeugt daraus automatisch Dateien in verschiedenen Größen. Die offizielle Dokumentation verlangt dafür ein quadratisches Bild mit mindestens 512 × 512 Pixeln. Auch schlanke Themes wie das Kadence WordPress Theme ändern an diesem Weg nichts, die Funktion steckt im WordPress-Kern.
4.5 Ergebnis testen
Klingt logisch, wenn da nicht ein Detail wäre: der Cache. Browser speichern Favicons hartnäckig. Das alte Symbol bleibt oft tagelang sichtbar. Öffnen Sie Ihre Seite deshalb im Inkognito-Fenster oder in einem zweiten Browser. Wird das neue Favicon angezeigt, ist alles richtig verknüpft. Prüfen Sie Tab, Lesezeichen und die mobile Ansicht.
Webdesign, das bis ins Detail stimmt
- Markenauftritt mit Konzept: von der Farbpalette bis zum Favicon
- Feste Festpreise statt Stundenfalle
- Persönlicher Ansprechpartner in Göttingen
- Wartung und Support inklusive
5. Häufige Fehler: Was unsere Stichprobe zeigt
Wie steht es um Ihre eigene Website? Wir haben im Juli 19 Vereins-Websites aus dem Raum Göttingen automatisiert geprüft, ausgewählt über eine Web-Suche und eine öffentliche Vereinsliste; 13 davon waren technisch messbar. 3 der 13 Seiten: gar kein Favicon. Von den zehn Sites mit Icon bleiben vier unter Googles empfohlenen 48 Pixeln; die Empfehlung erreichen damit nur 6 von 13 Startseiten. Nur drei liefern ein Apple Touch Icon, und ein SVG Favicon nutzt keine einzige.
Das Ergebnis hat uns kaum überrascht.
Dieselben Lücken sehen wir in unserer Projektpraxis regelmäßig, wenn wir gewachsene Unternehmens-Websites zur Überarbeitung übernehmen. Die typischen Fehler wiederholen sich:
- Kein eigenes Favicon: Der Platzhalter des Baukastens oder Themes bleibt aktiv, der Wiedererkennungswert verpufft.
- Zu kleines Icon: Unter 48 Pixeln wirkt das Symbol in der Google Suche unscharf oder wird ignoriert.
- Nicht quadratisch: Browser verzerren oder beschneiden das Bild.
- Detailreiches Logo: Wer das komplette Logo als Favicon verwendet, macht feine Linien und Text in Tab-Größe unlesbar.
- Blockierte Datei: Sperrt die robots.txt das Icon, kann Google es nicht crawlen und zeigt den Platzhalter.
Die häufigsten Favicon-Fehler sind schnell behoben: eigenes Icon statt Theme-Standard, quadratische Grafik ab 48 Pixeln, reduziertes Motiv statt verkleinertem Logo und eine für Suchmaschinen erreichbare Datei. Unsere Stichprobe zeigt: Schon ein vorhandenes, ausreichend großes Favicon hebt eine Website vom regionalen Durchschnitt ab.
6. Fazit: Kleines Icon, große Wirkung
Das perfekte Favicon entsteht in einer halben Stunde: Motiv reduzieren, quadratisch mit 512 Pixeln anlegen, drei Dateien plus Manifest erzeugen, hochladen, im Inkognito-Fenster testen. Kein anderes Element Ihres Markenauftritts liefert so viel Wiedererkennung für so wenig Aufwand.
Mehr braucht es nicht.
Am Ende steht dieser Moment: Sie öffnen Ihren Browser mit zwanzig Tabs, und zwischen all den grauen Blättern leuchtet Ihr eigenes Zeichen. Ihre Kunden finden Sie genauso schnell wieder, im Tab, im Lesezeichen, in der Suche. So fühlt sich ein gepflegter Markenauftritt im Kleinen an.
7. Anhang: Checkliste für Ihr Favicon
- Ausgangsgrafik: quadratisch, mindestens 512 × 512 Pixel, stark vereinfachtes Motiv
- Drei Dateien erzeugt: favicon.ico (32 × 32), icon.svg, apple-touch-icon.png (180 × 180)
- Zwei Android-Icons (192 und 512 Pixel) im Web-Manifest verknüpft
- Dateien im Hauptverzeichnis hochgeladen oder als Website-Icon in WordPress gesetzt
- Verknüpfung im HTML-Kopf geprüft
- Test im Inkognito-Fenster: Tab, Lesezeichen, Smartphone
- Kontrolle nach einigen Tagen: Wird das Favicon in der Google Suche angezeigt?
Zeigt die Bestandsaufnahme größere Baustellen als das Icon, lohnt der Blick aufs Ganze. Wir beraten Sie gern, wenn Sie Ihre Website neu aufsetzen möchten.
Kontakt aufnehmen
Sie möchten einen Markenauftritt, der vom Logo bis zum Favicon durchdacht ist? Schreiben Sie uns, wir melden uns innerhalb von 24 Stunden:
Häufige Fragen zum Favicon (FAQ)
Disclaimer: Alle Erfahrungswerte stammen aus der Agentur-Praxis von Kreativschock und den verlinkten Quellen. Die Stichprobe ist eine nicht repräsentative Momentaufnahme öffentlich erreichbarer Websites, automatisiert geprüft. Ergebnisse können je nach Branche und Projekt abweichen; diese Inhalte ersetzen keine individuelle Beratung.
