# Favicon gestalten: winzige Icons, die trotzdem nach dir aussehen [Canonical HTML page](https://gradiently.design/de/guide/favicon-design) Dein Favicon ist das am häufigsten wiederholte Stück deiner Marke und zugleich das kleinste. Es muss bei 16 Pixeln bestehen, auf hellen und dunklen Tabs, neben fünfzig anderen Seiten. So hält es stand. ## The short version - Ein Favicon ist das kleine Icon, das eine Website in Browser-Tabs, Lesezeichen, Verlauf, Startbildschirmen und Suchergebnissen vertritt. - Ein modernes Minimalset besteht aus einer favicon.ico in 32×32, einem SVG-Icon, einem Apple Touch Icon in 180×180 sowie PNGs in 192×192 und 512×512 in einem Web App Manifest. - Die Google-Suche zeigt das Favicon einer Website neben den Ergebnissen an und verlangt ein quadratisches Icon, idealerweise größer als 48×48 Pixel. - Favicons funktionieren am besten als eine kräftige Form oder ein Buchstabe mit starkem Kontrast, weil Details bei 16 Pixeln verschwinden. - Ein SVG-Favicon kann mit einer Media Query in der Datei selbst für den Dark Mode die Farben wechseln. Ein **Favicon** ist das kleine quadratische Icon, das für deine Website in Browser-Tabs, Lesezeichen, im Verlauf, auf Startbildschirmen und in Google-Ergebnissen steht. Oft wird es mit nur 16 oder 32 Pixeln angezeigt, deshalb ist gutes Favicon-Design gnadenlos: eine kräftige Form oder ein Buchstabe, hoher Kontrast, keine feinen Details. Technisch brauchst du nur eine Handvoll Dateien, eine ICO in 32×32, ein SVG, ein Apple Touch Icon in 180×180 und zwei Manifest-PNGs, dazu ein paar Zeilen HTML. ## Favicon-Größen und Dateien, die du wirklich brauchst Alte Anleitungen listen zwanzig Größen auf. Moderne Browser skalieren gut, daher deckt ein kurzes Set jeden Ort ab, an dem ein Favicon erscheint. Das folgt dem auf [web.dev](https://web.dev/articles/add-manifest) empfohlenen Vorgehen für Manifeste und dem aktuellen Browserverhalten für den Rest. | Datei | Größe | Genutzt von | | --- | --- | --- | | `favicon.ico` | 32×32 | Älteren Browsern und allem, was `/favicon.ico` direkt anfragt | | `icon.svg` | Skalierbar | Aktuellen Browsern mit SVG-Favicon-Unterstützung; kann sich an den Dark Mode anpassen | | `apple-touch-icon.png` | 180×180 | Startbildschirmen von iPhone und iPad sowie Safari-Lesezeichen | | `icon-192.png` | 192×192 | Dem Android-Startbildschirm, über das Web App Manifest | | `icon-512.png` | 512×512 | Android-Splashscreens und App-Installationen, über das Manifest | Fünf Dateien. Leg sie ins Stammverzeichnis deiner Website oder sonst wohin, solange das HTML auf sie verweist. Auch die Google-Suche zeigt Favicons neben den Ergebnissen. Die [Favicon-Richtlinien](https://support.google.com/webmasters/answer/9290858) verlangen ein quadratisches Icon, empfehlen eines größer als 48×48 Pixel und sagen, dass es deine Marke repräsentieren soll. Die PNGs in 192 und 512 erfüllen das beide; prüf die Seite vor dem Launch, denn Google überarbeitet sie. ## So bindest du ein Favicon auf deiner Website ein ```html ``` Gehört in den `head` jeder Seite. Browser, die SVG verstehen, bevorzugen es; die anderen greifen auf die ICO zurück. ```json { "name": "Studio Nine", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" } ] } ``` Ein minimales `manifest.webmanifest`. Das maskierbare Icon ist optional und lässt Android es in eigene Formen zuschneiden. > **Maskierbare Icons brauchen Rand** Android schneidet ein maskierbares Icon eventuell zu einem Kreis, Squircle oder abgerundeten Quadrat zu. Halte das Wichtige im zentralen Kreis, etwa 80 % der Breite, und füll den Rest mit Hintergrundfarbe. ## Ein Favicon gestalten, das bei 16 Pixeln lesbar ist Bei 16 Pixeln hast du 256 Punkte. Ein vollständiger Schriftzug wird zum grauen Fleck, dünne Linien verschwinden und zwei ähnliche Farben verschmelzen. Die Favicons, die man sofort erkennt, sind fast immer eins von drei Dingen: ein einzelner Buchstabe, ein einfaches Symbol oder eine flächige Form in einer markanten Farbe. Ein quadratisches App-Icon mit einem einzelnen fetten Buchstaben N auf einem Verlaufshintergrund Ein schwerer Buchstabe auf kräftigem Hintergrund. Er bleibt lesbar, wenn der Browser ihn auf 16 Pixel verkleinert. Ein quadratisches Icon mit einem dreiteiligen Studionamen, zu detailreich für ein Favicon Der volle Name sieht bei 512 Pixeln gut aus und wird bei 16 zu unlesbarer Textur. Heb ihn dir für die Seite selbst auf. ### Vermeiden - Das volle Logo samt Schriftzug - Haarfeine Linien und kleine Punzen - Zwei ähnliche Farben, die verschwimmen - Details, die bis an den Rand laufen - Ein transparentes Icon, das auf dunklen Tabs verschwindet ### Machen - Ein Buchstabe, Monogramm oder Symbol - Linien mindestens 2 Pixel stark bei 32×32 - Starker Kontrast zwischen Form und Hintergrund - Den Großteil des Quadrats füllen, mit etwas Rand - Auf hellen und dunklen Browser-Themes testen ## Farbe und Verläufe in einem winzigen Icon Bei dieser Größe leistet Farbe mehr als Form, denn nach ihr sucht man in einer Reihe von Tabs. Eine wiedererkennbare Markenfarbe schlägt ein cleveres Symbol. Verläufe funktionieren, wenn sie kräftig und kurz sind: Zwei Stopps mit deutlichem Helligkeitsunterschied wirken wie eine beleuchtete Fläche, während ein subtiler Verlauf mit vielen Stopps bei 16 Pixeln nur matschig aussieht. - Indigo zu Pink: lesbar: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)` - Petrol zu Limette: lesbar: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)` - Blasse Grautöne: verschwindet: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)` Favicon-Hintergründe brauchen einen klaren Helligkeitswechsel und einen selbstbewussten Farbton. Der letzte verschwindet vor einer hellen Tab-Leiste. Wenn deine Marke schon einen typischen Hintergrund hat, kann ein Ausschnitt davon eine markante Favicon-Kachel ergeben. Gradiently Marks sind hier nützlich: Derselbe Look, der hinter deinen Posts läuft, kann bei 512×512 hinter einem einzelnen Buchstaben sitzen, sodass Tab und Feed wie eine Marke wirken. Achte darauf, dass der Buchstabe starken Kontrast zur Kachel behält, wie in [Logo auf Verlaufshintergrund](https://gradiently.design/de/guide/logo-on-gradient-background) beschrieben. ## Dark-Mode-Favicons mit SVG Ein schwarzes Icon verschwindet auf einer dunklen Tab-Leiste, ein weißes auf einer hellen. Weil ein SVG-Favicon ein kleines Dokument ist, kann es seine eigene Media Query mitbringen und die Farben mit dem Theme des Browsers wechseln. ```html ``` Als `icon.svg` speichern. Eine abgerundete Kachel mit einem N, das im Dark Mode seine Farben umkehrt. Eine flächige Kachel hinter dem Symbol ist die einfachste Versicherung: Sie ist auf jedem Hintergrund lesbar, hell oder dunkel, ohne sich auf die Media Query zu verlassen. [SVG vs PNG](https://gradiently.design/de/guide/svg-vs-png) erklärt, warum du die Vektordatei behalten solltest. ## Eine schnelle Favicon-Checkliste 1. **Beim einfachsten Teil deines Logos anfangen** Ein Monogramm, der erste Buchstabe oder nur das Symbol. [Logo-Varianten](https://gradiently.design/de/guide/logo-variations) zeigt, wie du gezielt eine kleine Version baust. 2. **Zuerst bei 32×32 zeichnen** Auf dem kleinen Raster gestalten und hochskalieren, nicht umgekehrt. Kräftige Linien, großzügige Abstände. 3. **Die fünf Dateien exportieren** ICO in 32×32, SVG, Apple Touch Icon in 180×180, Manifest-PNGs in 192 und 512. 4. **In echten Tabs testen** Öffne deine Seite neben zehn anderen, im hellen und dunklen Theme. Findest du deinen Tab nicht in einer Sekunde, vereinfache. Das Favicon steht neben deinem [Open-Graph-Bild](https://gradiently.design/de/guide/open-graph-image-size) und deinen Social-Profilbildern als kleine, beständige Signale einer Marke. Halte sie einheitlich, und sieh dir [Logo-Größen](https://gradiently.design/de/guide/logo-sizes) für das komplette Set an. ## FAQ ### Welche Größe sollte ein Favicon haben? Stell eine favicon.ico in 32×32, ein SVG, ein Apple Touch Icon in 180×180 sowie PNGs in 192×192 und 512×512 in einem Manifest bereit. Browser wählen daraus und skalieren. ### Wie binde ich ein Favicon auf meiner Website ein? Lade die Icon-Dateien hoch und füge `link rel="icon"` und `link rel="apple-touch-icon"` in den `head` jeder Seite ein, dazu einen Manifest-Link für Android. ### Warum wird mein Favicon bei Google nicht angezeigt? Google braucht ein quadratisches Favicon, idealerweise größer als 48×48 Pixel, verlinkt von deiner Startseite und crawlbar. Nach einer Änderung kann die Aktualisierung etwas dauern. ### Kann ein Favicon ein SVG sein? Ja, aktuelle Browser mit SVG-Favicon-Unterstützung nutzen es, und es bleibt in jeder Größe scharf. Behalte eine favicon.ico als Fallback. ### Sollte mein Favicon mein komplettes Logo sein? Meist nicht. Nimm einen Buchstaben, ein Monogramm oder das Symbol des Logos, denn ein voller Schriftzug ist bei 16 Pixeln unlesbar.