So erstellst du ein Favicon (.ICO) aus PNG oder WEBP
Das Favicon ist die kleinste Grafik einer Website und die, bei der am ehesten etwas schiefgeht: unscharf bei 16 Pixeln, im Dunkelmodus unsichtbar oder gar nicht vorhanden, weil ein Bot favicon.ico angefordert und einen 404-Fehler erhalten hat. Hier erfährst du, was ein Favicon im Jahr 2026 wirklich braucht und wie du es aus deiner vorhandenen Grafik erstellst, ohne unveröffentlichtes Branding irgendwo hochzuladen.
Morphio WEBP → ICO-Konverter
Verwandle moderne Webgrafiken in eine klassische Favicon-Datei — vollständig in deinem Browser konvertiert. PNG, JPG, AVIF und TIFF funktionieren ebenfalls als Ausgangsformate.
Why ICO survived
ICO is a container format: a single file that holds the same icon at several resolutions so the operating system or browser can pick the one it needs. That is a genuinely good idea, which is why a format from the early nineties is still sitting at the root of nearly every website.
Browsers will use a PNG when you point at one in your HTML, but plenty of clients never read your HTML. Feed readers, link-preview bots, older browsers and some corporate proxies simply request /favicon.ico and take what they get. Shipping that file is the cheapest way to stop the missing-icon question recurring.
Design for 16 pixels, not for your header
The single most common favicon mistake is scaling down the full logo. Wordmarks, taglines and fine strokes vanish below about 32 pixels and reappear as grey soup. What works is one strong element: an initial, a monogram, a distinctive glyph, drawn on a square canvas with generous padding.
Test it honestly. Set the artwork to 16 pixels wide on screen, lean back, and ask whether the shape reads. If it does not, simplify further — this is the one asset where less detail is objectively better.
The set of files worth shipping
- favicon.ico at the site root, containing the 16, 32 and 48 pixel versions.
- A 180-pixel PNG for the iOS home-screen icon.
- 192 and 512 pixel PNGs referenced from your web app manifest for Android and PWA installs.
- An SVG mark if you want a crisp icon in browsers that support it, with the ICO still present as the fallback.
Step by step
- Create or crop a square version of your mark with transparent background and even padding.
- Export it as a 512-pixel PNG or WEBP.
- Drop that file into the Morphio ICO converter and download the result.
- Rename it to favicon.ico and place it at the root of your site.
- Load the site in a private window and check the tab in both light and dark mode.
Dark mode, contrast and the transparent-background trap
Browser tabs are no longer reliably light. A dark navy monogram on a transparent background looks sharp on a white tab strip and disappears completely in dark mode, which is now the default for a large share of users.
The fix is to choose a mark colour with enough contrast against both extremes, or to keep a subtle filled shape behind it so the icon always has its own backdrop. Check both themes before you ship — it takes ten seconds and it is the difference between a recognisable tab and an empty square.
FAQ
Ist .ico noch nötig, wenn Browser PNG-Favicons unterstützen?
Moderne Browser verwenden problemlos ein PNG, aber eine favicon.ico im Stammverzeichnis der Website ist weiterhin die Standard-Ausweichlösung, die ältere Browser, Feedreader, Bots für Linkvorschauen und manche Unternehmens-Proxys anfordern. Beide Varianten bereitzustellen kostet nichts und vermeidet eine ganze Kategorie von Meldungen über fehlende Symbole.
Welche Größen sollte ein Favicon enthalten?
16 und 32 Pixel decken Browser-Tabs und Lesezeichen ab, 48 Pixel Windows-Verknüpfungen. PNGs mit 180 bis 512 Pixeln eignen sich für Symbole auf mobilen Startbildschirmen und für Progressive Web Apps. Eine ICO-Datei kann mehrere der kleinen Größen in einer einzigen Datei enthalten — genau dafür wurde sie entwickelt.
Warum sieht mein Favicon bei 16 Pixeln so matschig aus?
Weil ein vollständiges Logo zu viele Details hat, um beim Verkleinern auf ein Quadrat mit 16 Pixeln erkennbar zu bleiben. Favicons brauchen ein vereinfachtes Zeichen — einen einzelnen Buchstaben, ein Monogramm oder eine markante Form — und keine geschrumpfte Version des horizontalen Logos aus deinem Header.
Kann ich ein WEBP- oder AVIF-Bild als Vorlage verwenden?
Ja als Vorlage, nein als Favicon selbst. Konvertiere das moderne Format für die eigentlichen Symboldateien in ICO und PNG, denn ältere Clients, die das Symbol überhaupt erst anfordern, unterstützen neuere Bildcodecs als Favicon nicht einheitlich.
Funktioniert Transparenz in einem Favicon?
Ja, und sie ist wichtiger, als viele denken, weil Browser Tabs inzwischen auf hellen und dunklen Hintergründen darstellen. Lass den Hintergrund transparent und achte darauf, dass das Zeichen selbst genug Kontrast hat, um in beiden Fällen sichtbar zu bleiben.
Warum das Symbol lokal konvertieren statt mit einem Online-Generator?
Noch unveröffentlichtes Branding gehört genau zu den Materialien, die vor dem Launch nicht auf einem fremden Server liegen sollten. Beim Konvertieren im Browser bleibt die Grafik auf deinem Rechner. Bei einer so kleinen Datei geht das außerdem schneller als mit jedem Generator, bei dem du erst hochladen und warten musst.