Einleitung
Du hast gerade eine neue Webseite gestartet, ein sauberes Logo im PNG-Format entworfen und alles sieht toll aus, bis du merkst, dass der Browsertab ein generisches Globus-Icon statt deines Logos zeigt. Dieses kleine Icon heisst Favicon, und damit es zuverlässig in jedem Browser auftaucht, alt wie neu, brauchst du eine ICO-Datei. PNG funktioniert in modernen Browsern, aber ICO ist immer noch die sicherste Wahl für volle Kompatibilität. In diesem Guide behandeln wir, warum ICO noch relevant ist, wie du kostenlos online PNG zu ICO konvertierst und welche Grössen du in der ICO-Datei brauchst, um überall scharf auszusehen.
Warum das passiert
ICO ist ein Legacy-Bildformat, das Microsoft in den Achtzigern für Windows-Icons entwickelt hat. Trotz seines Alters ist es weiterhin das universell unterstützte Favicon-Format. Browser wie Chrome, Firefox, Safari und Edge lesen ICO-Favicons, und dasselbe gilt für ältere Browser wie Internet Explorer. Der Trick bei ICO ist, dass eine einzige Datei mehrere Grössen desselben Bilds enthalten kann, typischerweise 16x16, 32x32, 48x48 und 256x256 Pixel. Wenn der Browser das Favicon für einen Tab braucht, holt er sich das 16x16. Wenn Windows ein Desktop-Verknüpfungs-Icon braucht, nimmt es die grösseren. Wenn du nur eine Grösse einbindest, sieht dein Favicon in bestimmten Kontexten verschwommen oder pixelig aus. Eine korrekte ICO-Datei bündelt alle Grössen, damit der Browser automatisch die richtige wählt.
3 Lösungen
Lösung 1: Einen Online-PNG-zu-ICO-Konverter nutzen. Der piczen PNG-zu-ICO-Konverter nimmt dein PNG-Logo, bettet mehrere Grössen in eine ICO-Datei ein und lässt dich sie kostenlos herunterladen. Keine Installation nötig. Das ist der schnellste Weg für die meisten Webseiten-Betreiber, weil er das Grössen-Einbetten automatisch erledigt, auf jedem Gerät mit Browser läuft und eine standardkonforme ICO-Datei produziert, die jeder Browser von Chrome bis Internet Explorer lesen kann. Du kannst auch mehrere Logos in einem Stapel konvertieren, wenn du mehrere Seiten verwaltest.
Lösung 2: Favicons mit RealFaviconGenerator erzeugen. Lade dein PNG hoch und das Tool produziert ein ICO plus PNG-Icons, Apple-Touch-Icons und Manifest-Dateien für jede Plattform. Toll für volle plattformübergreifende Unterstützung, da es auch die HTML-Tags generiert, die du in deinen Seitenkopf einfügen musst. Das ist die beste Option, wenn du umfassende Abdeckung auf iOS, Android, Windows und alten Browsern willst.
Lösung 3: In Photoshop oder GIMP konvertieren. Beide können mit dem richtigen Plugin ICO exportieren. Am besten, wenn du die Software ohnehin offen hast und volle Kontrolle über jede Grösse willst, da du die 16x16-Version manuell für maximale Lesbarkeit bei winzigen Grössen optimieren kannst. Der Nachteil ist, dass ICO-Plugins nicht immer zuverlässig sind und der Workflow-Aufbau Zeit kostet, wenn du nur ein einziges Favicon brauchst.
Schritt-für-Schritt-Anleitung
Starte mit einem quadratischen PNG deines Logos, idealerweise 512x512 Pixel, damit der Konverter viel Auflösung zum Arbeiten hat. Ist dein Logo nicht quadratisch, schneide es zuerst in einem beliebigen Editor zu, da nicht quadratische Quellbilder verzerrte Favicons erzeugen. Öffne den png zu ico-Konverter im Browser. Ziehe dein PNG auf die Seite. Die meisten Tools lassen dich wählen, welche Grössen eingebettet werden, der Standardsatz ist 16, 32, 48 und 256 Pixel. Klicke auf Umwandeln und lade die resultierende ICO-Datei herunter. Nenne sie favicon.ico und lade sie ins Wurzelverzeichnis deiner Webseite hoch. Füge einen Link-Tag im Head deines HTML hinzu, der darauf verweist, etwa link rel="icon" href="/favicon.ico" type="image/x-icon". Leere den Browser-Cache oder lade hart neu und dein Logo sollte im Tab erscheinen. Für beste Resultate füge zusätzlich eine PNG-Version mit 180x180 für Apple-Touch-Icons und eine 192x192 PNG für Android hinzu.
Vor- und Nachteile
Ein ICO-Favicon gibt dir universelle Browser-Unterstützung, inklusive alter Versionen, die PNG-Favicons ignorieren. Mehrere Grössen in einer Datei zu bündeln bedeutet, dass der Browser immer die schärfste Version für den Kontext wählt, ob das ein winziges 16x16-Tab-Icon oder eine 256x256-Desktop-Verknüpfung ist. Der Nachteil ist, dass ICO ein älteres Format mit begrenzter Tool-Unterstützung ist. Die meisten modernen Bildbearbeitungsprogramme können ICO-Dateien nicht direkt öffnen oder bearbeiten, weshalb ein Online-Konverter so praktisch ist. Für neue Webseiten ist die Best Practice, sowohl ein ICO für Legacy-Support als auch PNG-Icons für moderne Geräte auszuliefern. Der ganze Prozess dauert rund 10 Minuten und zahlt sich jedes Mal aus, wenn jemand deine Seite besucht, da ein professionelles Favicon die Markenbekanntheit stärkt und deine Seite poliert wirken lässt.