Ein Favicon-Set, das 2026 überall funktioniert
Sechs Größen, eine .ico, ein Manifest — alles, was du brauchst, um ein Favicon zu veröffentlichen, das auf jedem Browser, iOS-Homescreen und Windows-Taskleiste 2026 richtig aussieht.
Favicons sehen trivial aus. Versendest du eines und hundert Sonderfälle tauchen auf: das iOS-Homescreen-Symbol ist verschwommen, der Android-Chrome-Tab hat die falsche Farbe, angeheftete Windows-Fenster zeigen ein unscharfes 16×16. Diese Anleitung schneidet durch den Lärm und behandelt genau das, was du 2026 brauchst — nicht mehr, nicht weniger.
Das minimal lebensfähige Set
Sechs Assets decken alle Oberflächen ab, die das Icon deiner Website anzeigen:
favicon.ico— Multi-Size-Container mit 16×16, 32×32, 48×48 darin (ältere Browser, Windows Explorer, angeheftete Tabs).favicon-16x16.png,favicon-32x32.png— moderne Browser-Tabs.apple-touch-icon.png(180×180) — iOS-Homescreen, Safari-Leseliste.android-chrome-192x192.png,android-chrome-512x512.png— Android-Homescreen, PWA-Installationseingabeaufforderungen.site.webmanifest— die PWA-Konfiguration, die auf die Android-Icons verweist und die Theme-Farbe definiert.
Das ist alles. Alles andere (Safari pinned tab SVG, alte Apple touch Varianten, Windows Tile-Bilder) ist Legacy. Moderne Browser fallen elegant zur 192er oder 512er PNG zurück.
Warum .ico 2026 noch versendet wird
Eine .ico-Datei ist ein binärer Container, der mehrere PNG-Bilder in verschiedenen Größen speichern kann. Wenn ein Browser /favicon.ico anfordert (was einige standardmäßig immer noch tun), erhält er alle drei Größen in einer Anfrage. Der Renderer wählt diejenige aus, die am besten zur aktuellen Oberfläche passt — ein 48×48 für Windows Explorer, ein 16×16 für einen Browser-Tab.
Eine in .ico umbenannte PNG enthält nur eine Größe. Sie funktioniert meist, weil Browser nachsichtig sind, aber Windows Explorer und einige E-Mail-Clients werden sie entweder verschwommen rendern oder weigern sich, sie anzuzeigen. Versende eine echte .ico-Datei, wenn du Konsistenz möchtest.
Was site.webmanifest tut
Wenn ein Nutzer deine Website auf dem Android-Homescreen hinzufügt oder als PWA installiert, liest der Browser site.webmanifest, um zu wissen, wie die installierte App aussehen soll. Es definiert:
name/short_name— die Bezeichnung unter dem Icon.icons— welche PNGs in welcher Größe verwendet werden sollen.theme_color— Farbe der Statusleiste, wenn die App offen ist.background_color— Splash-Screen-Hintergrund während des Starts.display— normalerweisestandalone, damit die App ohne Browser-Chrome geöffnet wird.
Ohne ein Manifest fällt Android auf das apple-touch-icon zurück und zeigt deine Website in einem Browser-Fenster. Mit einem sieht es wie eine native App aus.
Das HTML-Snippet
Jede Datei geht in dein Web-Root. Jede Website benötigt diesen Block in <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Entwurf für 16×16
Dein schönes detailliertes Logo stirbt mit 16 Pixeln. Die Regeln für die Erstellung eines Favicons, das bei dieser Größe klar zu erkennen ist:
- Eine Form. Ein Kreis, ein Quadrat oder ein starkes Monogramm. Vermeide zusammengesetzte Formen.
- Hoher Kontrast. Der Vordergrund und der Hintergrund müssen mindestens WCAG AA getrennt sein. Subtile Verläufe verschwinden.
- Sicherer Rand. Lasse 10–20% Polsterung. Browser fügen oft ihre eigene 1px-Grenze hinzu.
- Text? Ein einzelner fetter Buchstabe funktioniert besser als ein ganzes Wort bei 16px.
Der aukimi Favicon Generator erstellt alle sechs Dateien und das HTML-Snippet aus einem Bild oder einem Buchstaben in weniger als 30 Sekunden. Es generiert eine echte Multi-Size .ico (gemäß Microsoft ICONDIR-Spezifikation), keine umbenannte PNG. Lade hoch, wähle deine Größen, lade ein zip-loses Bundle herunter, füge das Snippet ein — fertig.
Häufige Fehler
- .ico von CDN ohne Cache-Header versendet. Browser cachen Favicons aggressiv. Verwende eine versionierte URL (
?v=2), um eine Aktualisierung nach einem Redesign zu erzwingen. - Unterschiedliche Icons pro Subdomain. Eine einzelne
favicon.icoan der Apex ist normalerweise das, was Benutzer erwarten — fragmentiere deine Identität nicht. - Das
theme-colorMeta vergessen. Mobile Chrome tint die Browser-Chrome an, um diesen Wert zu entsprechen. Wenn du ihn überspringst, bleibt dir das Standard-Grau.
Ein gutes Favicon ist langweilig auf die beste Art — Nutzer bemerken es, wenn es fehlt oder falsch ist, nie wenn es richtig ist. Versende die sechs Dateien und mach weiter.
Hat dir dieser Artikel gefallen?
Verwandte Artikel
Der Creative Stack ist gerade zusammengebrochen: Eine Woche AI-Tools, Ende April 2026
Zwischen dem 27. April und 4. Mai 2026 haben Adobe, Luma, Novi, fal, Figma, Canva, HeyGen und Anthropic in acht Tagen alle die gleiche Schwelle überschritten. Hier ist, was veröffentlicht wurde, was es bedeutet und wo es die browserbasierten Creative Suites lässt, die alles konsolidieren wollen.
KI-Musik und SFX 2026: Was bei Indie-Game-Audio wirklich funktioniert
Vor drei Jahren bedeutete Indie-Game-Audio entweder lizenzfreie Bibliotheken (billig, generisch, jedes Spiel klingt gleich) oder einen Komponisten einstellen (großartig, teuer). 2026 generiert KI Scores, die ausgeliefert werden. Hier sind die Tools, die liefern — und wo ein menschlicher Komponist immer noch gewinnt.
AI-Mesh-Generierung 2026: Was tatsächlich in Game-Pipelines landet
Image-to-3D entwickelte sich in achtzehn Monaten von "verstörendem Demo" zu "läuft in Indie-Projekten". Hier ist, was Tripo, Meshy, Rodin und Hyper3D tatsächlich in der Produktion tun — und wo der 3D-Artist das Modell immer noch schlägt.