Einleitung
Ein Favicon ist das kleine Icon, das im Browsertab neben dem Seitentitel erscheint. Es ist ein kleines Detail, das aber massiv zur Professionalität deiner Webseite beiträgt. Ohne Favicon zeigt der Browser ein generisches Globus-Icon, was deine Seite billig und unvollständig wirken lässt. Ein individuelles Favicon mit deinem Logo stärkt die Markenbekanntheit und macht deine Seite in Lesezeichen-Listen sofort erkennbar. In diesem Guide zeigen wir dir Schritt für Schritt, wie du ein Favicon erstellst, welche Grössen du brauchst und wie du es auf deiner Webseite einbindest.
Warum das passiert
Favicons scheitern meist an einem von zwei Problemen. Erstens fehlen sie komplett, weil der Webseiten-Betreiber schlicht vergessen hat, eines zu erstellen oder einzubinden. Der Browser zeigt dann ein generisches Icon, was unprofessionell wirkt. Zweitens sind sie falsch konfiguriert, etwa wenn nur eine einzige Grösse eingebettet ist und das Icon auf hochauflösenden Retina-Displays verschwommen aussieht. Ein korrektes Favicon besteht idealerweise aus einer ICO-Datei, die mehrere Grössen enthält, plus zusätzlichen PNG-Dateien für Apple-Touch-Icons und Android-Verknüpfungen. Die ICO-Datei deckt ältere Browser und Windows-Desktop-Verknüpfungen ab, während die PNGs für moderne mobile Geräte wichtig sind. Wer nur ein PNG als Favicon einbindet, riskiert, dass ältere Browser und bestimmte Windows-Kontexte das Icon ignorieren.
3 Lösungen
Lösung 1: Einen Online-Favicon-Generator nutzen. Der piczen PNG-zu-ICO-Konverter nimmt dein quadratisches PNG-Logo, bettet mehrere Grössen in eine ICO-Datei ein und liefert dir eine fertige favicon.ico. Das ist der schnellste Weg, denn du brauchst keine Software zu installieren und das Tool erledigt das Grössen-Embedding automatisch. Lade dein PNG hoch, wähle die Standardgrössen 16, 32, 48 und 256 Pixel und lade die fertige ICO herunter. Das Ganze dauert keine Minute.
Lösung 2: RealFaviconGenerator für umfassende Plattformabdeckung. Dieser Service geht einen Schritt weiter und produziert neben der ICO-Datei auch PNG-Icons für Apple-Touch, Android, Windows-Kacheln und ein Web-App-Manifest. Du bekommst zusätzlich die fertigen HTML-Tags, die du in den Head deiner Webseite einfügen musst. Das ist die beste Wahl, wenn du auf allen Plattformen optimal aussehen willst, von der iOS-Home-Screen-Verknüpfung bis zur Windows-Kachel.
Lösung 3: In Photoshop oder GIMP manuell erstellen. Wenn du Photoshop oder GIMP bereits nutzt und volle Kontrolle über jede Grösse willst, kannst du die ICO-Datei manuell exportieren. Du brauchst ein ICO-Plugin für Photoshop oder GIMP. Der Vorteil ist, dass du die 16x16-Version manuell für maximale Lesbarkeit optimieren kannst, etwa indem du Details entfernst, die bei winzigen Grössen nicht erkennbar sind. Der Nachteil ist der zusätzliche Aufwand und die Plugin-Abhängigkeit.
Schritt-für-Schritt-Anleitung
Starte mit einem quadratischen PNG deines Logos, idealerweise 512x512 Pixel. Ist dein Logo rechteckig, schneide es auf eine quadratische Form zu, sonst wird es verzerrt. Öffne den png zu ico-Konverter im Browser und ziehe dein PNG auf die Seite. Wähle die Standardgrössen 16, 32, 48 und 256 Pixel aus, die alle modernen und älteren Anwendungsfälle abdecken. Klicke auf Umwandeln und lade die favicon.ico herunter. Lade die Datei ins Wurzelverzeichnis deiner Webseite hoch. Füge im Head-Bereich deines HTML einen Link-Tag hinzu: link rel="icon" href="/favicon.ico" type="image/x-icon". Für moderne mobile Geräte füge zusätzlich ein 180x180 PNG für Apple-Touch-Icon und ein 192x192 PNG für Android hinzu, jeweils mit dem entsprechenden Link-Tag. Leere den Browser-Cache und lade deine Seite neu, das Logo sollte jetzt im Tab erscheinen. Teste das Favicon auf verschiedenen Geräten, da Chrome, Safari, Edge und mobile Browser das Icon unterschiedlich rendern können.
Vor- und Nachteile
Ein individuelles Favicon macht deine Webseite sofort professioneller und stärkt die Markenbekanntheit. In Lesezeichen-Listen und Tab-Übersichten ist deine Seite mit Favicon deutlich schneller zu finden als ohne. Die ICO-Datei mit mehreren Grössen stellt sicher, dass das Icon in jedem Kontext scharf aussieht, vom winzigen 16x16-Tab bis zur 256x256-Desktop-Verknüpfung. Der Nachteil ist der Aufwand, mehrere Dateien zu erstellen und einzubinden. Wer nur eine einzige PNG-Datei ohne ICO verwendet, riskiert Kompatibilitätsprobleme mit älteren Browsern und bestimmten Windows-Kontexten. Der clevere Ansatz ist, die ICO-Datei plus zusätzliche PNGs für mobile Geräte auszuliefern, um alle Plattformen optimal abzudecken. Der einmalige Aufwand von etwa 10 Minuten zahlt sich jedes Mal aus, wenn ein Besucher deine Seite aufruft und dein Logo im Tab sieht.