Waehlen Sie mit diesem Favicon-Groessenleitfaden Browser-, Apple-Touch- und Web-App-Dateien so, dass Ihr Logo in Tabs, Suche und Installationsflaechen scharf bleibt.
Die meisten Marken brauchen mehr als nur eine einzelne Favicon-Datei. Das praktische Set fuer 2026 besteht aus einem favicon.ico mit mehreren kleinen Fallback-Groessen, einem 32x32-PNG, einem Apple-Touch-Icon in 180x180 und Manifest-Icons in 192x192 sowie 512x512, wenn die Website installierbar ist. Damit funktioniert dasselbe Logo sauberer in Browser-Tabs, Google Search, iOS-Home-Saves und appartigen Installationsflaechen.
Nach der Pruefung von kitnex.ai und dem aktuellen Kitnex-Blog am 6. Juli 2026 war klar: Prompts, Mockups, Farben, Dateiformate, Commercial-Use-Fragen und Launch-Checklisten sind bereits gut abgedeckt. Gefehlt hat die Deployment-Ebene: Wie wird aus einer gewaelten Logo-Richtung das kleine Icon-Set, das Menschen in Tabs, Suchergebnissen, Shortcuts und Home-Screens tatsaechlich sehen.
Google erklaert in der aktuellen Search-Dokumentation, dass ein Favicon quadratisch sein und mindestens 8x8 Pixel messen muss. Empfohlen wird jedoch etwas groesser als 48x48, damit das Icon auf unterschiedlichen Oberflaechen sauber wirkt. Ausserdem unterstuetzt Google Search nur ein Favicon pro Website oder Hostname.
Das ist die Eintrittsschwelle, aber noch kein vollstaendiger Launch-Plan. Browser, Betriebssysteme und Installationsflaechen fragen weiterhin verschiedene Groessen ab. Fuer die meisten Teams ist es daher sicherer, ein konsistentes Symbol zu behalten und ein kleines Browser-Bundle, ein Apple-Touch-Icon und Manifest-Icons zu exportieren.
Das HTML-Icon-Modell erlaubt mehrere rel=icon-Dateien, und Browser waehlen dann die passendste Option ueber Dateityp und sizes-Attribut. Der HTML Standard zeigt mehrere Icon-Referenzen als normalen Weg. Tabs, Lesezeichen und Desktop-Shortcuts koennen also je nach Umgebung unterschiedliche Fallbacks bevorzugen.
iOS folgt einer eigenen Logik. MDN weist darauf hin, dass iOS rel=icon fuer Web Clips nicht nutzt und stattdessen apple-touch-icon sucht. Apples Dokumentation fuer Web-Anwendungen nennt Groessen wie 152x152, 167x167 und 180x180. Ohne dieses Icon ueberlassen Sie eine wichtige Flaeche dem Zufall.
Starten Sie mit einem favicon.ico, das kleine Fallback-Groessen enthaelt, oft 16x16, 32x32 und 48x48. Ergaenzen Sie ein 32x32-PNG fuer moderne Browser, dann ein apple-touch-icon in 180x180 fuer iPhone-Home-Saves sowie Manifest-Icons in 192x192 und 512x512 fuer Installations- und Splash-Kontexte.
Hier passt der bestehende Kitnex-Artikel zu Dateiformaten gut dazu. Ziel sind nicht unendlich viele Exporte, sondern die wenigen Dateien, die direkt auf reale Flaechen passen. Wenn die gewaelte Marke nur als breites Lockup funktioniert oder duenne Schrift bei 32 Pixeln verschwindet, muss zuerst das Symbol vereinfacht werden.
MDN erklaert, dass Manifest-Icons Zwecke wie any, maskable oder monochrome angeben koennen. web.dev ergaenzt, dass die wesentlichen Inhalte innerhalb einer sicheren Kreisflaeche mit 40 Prozent Radius der Icon-Breite bleiben sollten. Die aeusseren zehn Prozent koennen auf manchen Plattformen abgeschnitten werden.
Fuer Branding bedeutet das: Verkleinern Sie nicht einfach das komplette Lockup. Ein dichtes Wordmark, feine Verlaeufe oder zarte Konturen koennen im Hero gut aussehen und im Kreis oder Squircle komplett scheitern. Wenn das Icon in appartigen Kontexten lebt, ist es ein eigenes Produkt-Asset.
Google sagt, dass Googlebot-Image auf die Favicon-Datei zugreifen koennen muss und Googlebot auf die Startseite. Ausserdem kann ein erneuter Crawl mehrere Tage oder Wochen dauern. Der sicherste Weg ist deshalb, stabile URLs zu verwenden, die Dateien auf der Startseite einzubinden und spaetere Umbenennungen zu vermeiden.
Danach folgt der visuelle Test. Oeffnen Sie das Icon in einem echten Browser-Tab, speichern Sie die Seite auf einem iPhone-Home-Screen, pruefen Sie das Manifest im Chrome- oder Android-Installationsfluss und verkleinern Sie das Motiv bis zur kleinsten erwarteten Flaeche. Die Kitnex-Artikel zu Mockups und Marken-Checklisten helfen auch hier, weil dieselbe Disziplin schnell zeigt, wenn ein Symbol in klein kollabiert.
Google verlangt ein quadratisches Favicon mit mindestens 8x8 Pixeln und empfiehlt eine Datei groesser als 48x48, damit sie auf unterschiedlichen Oberflaechen gut aussieht. Google Search nutzt nur ein Favicon pro Website oder Hostname, daher steht Marken-Klarheit ueber dekorativen Varianten.
Meistens ja. favicon.ico bleibt ein robuster Fallback fuer kleinere Browser- und Bookmark-Kontexte, waehrend PNG oder SVG modernere Oberflaechen gezielter bedienen. Entscheidend ist nicht eine Siegerdatei, sondern ein verlaessliches Asset fuer jeden Nutzungskontext.
Das Favicon bedient vor allem Browser- und Suchflaechen, waehrend apple-touch-icon von iOS verwendet wird, wenn jemand die Website auf dem Home-Screen speichert. MDN weist darauf hin, dass iOS rel=icon fuer Web Clips nicht verwendet.
Nicht zwingend, aber es hilft, wenn die Seite installierbar, pinnbar oder auf groesseren Systemflaechen sichtbar sein soll. Fuer reine Informationsseiten sollten zuerst Browser-Favicon und Apple-Touch-Icon sauber sein. Die grossen Manifest-Dateien kommen dann, wenn die Installation zur Produkt-Erfahrung gehoert.
Nehmen Sie den einfachsten Teil des Markensystems, oft ein Symbol, Monogramm oder stark reduzierte Version statt des kompletten Wordmarks. Mehr Negativraum, weniger fragile Details und Tests bei 16 bis 32 Pixeln auf hellen wie dunklen Flaechen sind der wichtigste Schritt.
Entdecken Sie weitere Kitnex-Inhalte zu Prompt-Strategie, Gründer-Workflows und Markenentscheidungen.
Eine starke Logo-Palette entsteht nicht nur aus Bauchgefühl. Dieser Leitfaden zeigt, wie Sie Farben wählen, die zur Kategorie passen, auf echten Flächen funktionieren und den Launch überstehen.
Artikel lesenEin guter Logo-Brief verwandelt vage Vorlieben in brauchbare Richtung. Diese Vorlage zeigt, was hineinmuss, gibt dir eine kopierbare Struktur und hilft dir, bessere KI-Logo-Richtungen zu erzeugen.
Artikel lesenDie Markenidentität eines Startups ist mehr als ein Logo. Sie bündelt Positionierung, visuelle Regeln, Launch-Assets und Prüfungen, damit das Unternehmen vom ersten Rollout an konsistent wirkt.
Artikel lesenDer beste KI-Logo-Generator für ein kleines Unternehmen ist nicht einfach der mit den schönsten Beispielen. Entscheidend ist, ob er aus einer Logo-Idee nutzbare Dateien, konsistente Marken-Assets und reale Launch-Flächen macht, ohne unnötige Komplexität aufzubauen.
Artikel lesenGute Logo-Mockups sind keine beliebigen Lifestyle-Szenen. Sie sind die Oberflächen, auf denen sich zeigt, ob eine Marke auch außerhalb des Artboards klar und glaubwürdig bleibt.
Artikel lesenPNG ist für viele digitale Einsätze das praktischste Logo-Format. SVG, PDF, EPS und JPG lösen aber andere Aufgaben. Hier erfährst du, welche Datei für Website, Mockup, Druckerei und langfristige Markenarbeit passt.
Artikel lesenStarke KI-Logo-Prompts bestehen nicht nur aus trendigen Adjektiven. Sie funktionieren wie kompakte Kreativ-Briefs, die Marke, Zielgruppe, Stilrichtung und Nutzungskontext präzise festlegen.
Artikel lesenEin KI-generiertes Logo darf oft kommerziell eingesetzt werden. Das bedeutet aber nicht automatisch, dass es geschützt oder ohne Prüfung markensicher ist. Entscheidend sind Rechte, Bearbeitung und Clearance vor dem Einsatz.
Artikel lesenAus einer groben Idee wird ein echter Logo-Workflow, wenn Sie Briefing, Vergleich, Mockups und Veröffentlichungsreife in die richtige Reihenfolge bringen.
Artikel lesenDer beste KI-Logo-Workflow für Gründer ist nicht der mit den meisten Optionen, sondern der, der schnelle Entscheidungen und nutzbare Launch-Assets ermöglicht.
Artikel lesenFarbe ist nicht nur Dekoration. Sie beeinflusst, wie ernst, technisch, verspielt oder vertrauenswürdig eine Marke wirkt.
Artikel lesen
Kitnex