So erstellst du ein Favicon aus deinem Logo (alle Größen erklärt)

Um ein Favicon aus einem Logo zu erstellen, beginne mit einem quadratischen Logo (SVG oder ein PNG mit 512x512 Pixeln oder größer). Exportiere eine favicon.ico, idealerweise mit 16-, 32- und 48px-Versionen darin, füge dann ein 180x180 Apple-Icon und 192/512 PNGs für das Manifest hinzu und verlinke sie in deinem HTML. Das sind fünf Dateien (ICO, SVG, Apple-Icon und zwei Manifest-PNGs), kein Dutzend. Hier erfährst du, wie du jede einzelne erstellst und wo sie hingehört.

Die kurze Antwort: Die benötigten Favicon-Dateien

Der moderne Minimal-Satz besteht aus einer ICO, einer SVG, einem Apple-Touch-Icon und zwei Manifest-PNGs. Separate 16/32/48-PNG-Dateien und Microsoft-Kachelbilder sind unnötig, wenn du eine Multi-Size-ICO hast.

Viele Generatoren liefern dir einen ZIP-Ordner mit einem Dutzend Dateien, von denen die meisten kein Browser anfordert. Ein 512x512-Master reicht völlig aus, sodass du nie größer gehen musst.

Favicon-Größen erklärt: Wofür jede Größe gedacht ist

favicon.ico (16, 32, 48)

ICO ist ein Container, der mehrere Bitmaps in einer Datei hält. Das übliche Qualitäts-Bundle umfasst 16, 32 und 48px; füge nur 256 hinzu, wenn dir große Windows-Icons wichtig sind.

Es lohnt sich immer noch. Crawler, Feed-Reader und Link-Vorschau-Bots laden standardmäßig /favicon.ico vom Stammverzeichnis der Seite herunter. Chromium verhält sich anders: In einem veröffentlichten Anforderungstest lud er /favicon.ico nur herunter, wenn die Seite kein Icon deklarierte. Bei deklarierter SVG forderte er nur die SVG an und bevorzugte die ICO gegenüber eigenständigen PNG-Links.

Überspringe das eigenständige 32x32-PNG. Einige Anleitungen listen es auf, aber dieser Test zeigte, dass es ungenutzt blieb, wenn eine ICO vorhanden ist. Der Test deckte nur Chromium ab, daher ist das Verhalten von Firefox und Safari ungetestet.

favicon.svg

SVG-Favicons funktionieren in Chrome 80+, Firefox 41+ und Edge. Die Safari-Unterstützung ist neuer und lückenhaft, und SVG-Favicons funktionieren nicht in Safari unter iOS. Betrachte SVG als Ergänzung, niemals als Ersatz für die ICO.

apple-touch-icon (180x180)

180x180 ist die Retina-iPhone-Größe (60pt bei 3x). Eine einzige 180px-Datei reicht aus: iOS skaliert sie für andere Geräte, einschließlich des iPads.

Manifest-Icons (192 und 512)

Android Chrome und installierte Web-Apps lesen Icons aus dem Web-App-Manifest. Die 192px-Datei ist das Launcher-Icon und die 512px-Datei das Installations-/Splash-Icon.

Was Google Search benötigt

Google liest das Icon von deiner Startseite. Jedes gültige Favicon-Format funktioniert, einschließlich ICO, PNG und SVG. Es muss quadratisch und mindestens 8x8px groß sein. Google empfiehlt größer als 48x48, in Vielfachen von 48, und du erhältst ein Icon pro Hostname. Wenn das Icon ungeeignet ist, ersetzt Google es durch einen generischen Globus.

Bereite dein Logo vor, bevor du es exportierst

Quadratisch, groß und transparent

Die beste Quelle ist ein SVG. Andernfalls verwende ein quadratisches PNG mit 512x512 Pixeln oder größer. Verkleinere nur: Beim Herunterskalieren von 1024px auf 16px bleiben die Kantendetails erhalten, bei 32px auf 16px nicht, und Hochskalieren erzeugt nur Unschärfe.

Wenn dein Logo nicht quadratisch ist, beschneide oder fülle es zuerst mit den Bild-Zuschneide- und -Vergrößerungswerkzeugen von Tool Cloud.

Behalte die Transparenz des PNG und sRGB bei. Führe die Ebenen nicht zu einer flachen Ebene zusammen und füge „nur zur Sicherheit" keinen Hintergrund hinzu.

Kann ein Favicon ein JPG sein? Ja, aber PNG oder SVG ist sauberer. JPGs haben keine Transparenz, sodass eine JPG-zu-ICO-Konversion dir ein ausgefülltes Quadrat liefert, und Kompressionsartefakte zeigen sich bei winzigen Größen.

Vereinfache für 16 Pixel

Ein volles Logo mit Slogan wird in einem Browser-Tab zum Brei. Was funktioniert:

• Ein markantes Symbol mit starkem Kontrast
• Zwei oder drei flache Farben
• Höchstens ein oder zwei fette Zeichen, kein Wortmark

Teste in tatsächlicher Größe. Wenn du es in einer halben Sekunde nicht erkennst, vereinfache weiter.

Tipp: Verwende zwei Bilder für das beste ICO

Für maximale Qualität verwende vereinfachte Grafiken für die Größen 16 und 32 und detailliertere Grafiken für 48 und 256. Erstelle zwei ICOs, verwende dann das vereinfachte als favicon.ico und das detaillierte für Windows-Verknüpfungen. Das ist optional, und ein einzelnes gut vereinfachtes Logo reicht für die meisten Websites aus.

Konvertiere dein Logo in ICO und den Rest des Pakets

Option 1: Generiere ein Favicon-Paket

Öffne Tool Clouds Favicon-Generator, lade dein quadratisches Logo hoch und lade das ZIP mit den gängigen Favicon-Größen herunter. Verwende die Dateien, die der obigen Tabelle entsprechen, und erstelle fehlende Dateien (wie die SVG oder die 192/512-PNGs) separat. Ignoriere alle Dateien, auf die dein HTML nicht verweist.

Option 2: Konvertiere ein Logo in eine einzelne ICO

Wenn du nur favicon.ico möchtest, verwende den Bild-zu-ICO-Konverter. Lade dein Logo hoch und konvertiere es, benenne das Ergebnis dann in favicon.ico um. Prüfe, welche Größen die ICO enthält; falls ihr eine 16- oder 32px-Version fehlt, verwende stattdessen den oben genannten Generator.

Herstellung der 180-, 192- und 512-PNGs

Skaliere deinen quadratischen Master auf 180x180, 192x192 und 512x512 und nenne sie apple-touch-icon.png, icon-192.png und icon-512.png.

Verwende für das Apple-Icon einen opaken Hintergrund mit zentriertem und eingerahmtem Logo. iOS respektiert keine Transparenz und rundet die Ecken selbst ab, also runde sie nicht vor. Stelle immer deinen eigenen soliden Hintergrund bereit, statt dich darauf zu verlassen, was iOS auffüllt.

Wohin jede Datei in deinem HTML gehört

Das HTML-Snippet

Lade alle Dateien in dein Stammverzeichnis hoch und füge dies zum <head> hinzu. Die sizes-Attribute folgen einem Beitrag darüber, wie Chrome Icons auswählt:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Einige Hinweise:

• Verwende rel="icon". rel="shortcut icon" ist veraltet; „shortcut“ ist nicht registriert und redundant.
• Browser entscheiden nach Dateityp, nicht nach Position, daher ist die Reihenfolge nicht kritisch. Das type="image/svg+xml"-Attribut ermöglicht es Browsern, die SVG nicht unterstützen, diese zu überspringen und stattdessen das ICO zu verwenden.
• Weise dem ICO eine konkrete Größe zu und füge dem SVG das sizes="any"-Attribut hinzu. Wenn du any für das ICO festlegst, kann Chrome dazu neigen, es dem SVG vorzuziehen.

Die Web-App-Manifestdatei

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chromes Installationskriterien erfordern sowohl das 192px- als auch das 512px-Icon. Vermeide "purpose": "any maskable" auf einer einzigen Datei. Erstelle für ein maskierbares Icon eine separate Datei mit der Grafik innerhalb der zentralen Sicherheitszone (ca. 409x409 Pixel von der 512er-Leinwand).

Favicon in WordPress, Squarespace, Shopify und Wix hinzufügen

Plattformen benennen Menüs um, also prüfe, was dein Dashboard anzeigt.

• WordPress: Erscheinungsbild, Anpassen, Site-Identität, Website-Icon. Lade ein 512x512 PNG hoch.
• Squarespace: Design, Browser-Icon. Ein quadratisches PNG mit 300x300 Pixeln funktioniert (ICO wird ebenfalls akzeptiert).
• Shopify: Theme-Einstellungen, Favicon. Lade ein quadratisches PNG mit 512x512 Pixeln hoch.
• Wix: Einstellungen, Website-Einstellungen, Favicon (dies erfordert möglicherweise einen Premium-Plan).

Warum dein Favicon unscharf aussieht oder sich nicht aktualisiert

Unscharfe Icons oder ausgefüllte Quadrate

Unschärfe entsteht meist durch das Hochskalieren eines kleinen Rasterbilds oder durch ein zu detailliertes Logo bei 16px. Behebe dies mit einem SVG plus 32px oder größer im ICO und skaliere niemals ein 16x16-Bild hoch. Ein solides Quadrat hinter deinem Logo bedeutet, dass die Quelldatei keine Transparenz hatte, oft ein JPG.

Altes Icon wird immer noch angezeigt

Browser zwischenspeichern Favicons für Tage oder Wochen. Versuche diese Schritte nacheinander:

1. Aktualisiere die Seite hart (Hard Refresh).
2. Öffne /favicon.ico direkt und aktualisiere dort.
3. Füge einen Query-String hinzu, z. B. /favicon.ico?v=2.
4. Prüfe im Inkognito-Fenster.
5. Stelle sicher, dass die Datei HTTP 200 zurückgibt, und lösche deinen CDN-Cache.

iOS-Icons auf dem Home-Bildschirm werden pro Shortcut zwischengespeichert, daher ändern sich bestehende Shortcuts nicht und Nutzer müssen die Seite erneut hinzufügen. Nutze für ein Rebranding einen neuen Dateinamen.

Google Search zeigt es nicht an

Updates dauern Tage bis Wochen, und das Ändern der Icon-URL kann sie verzögern. Stelle sicher, dass deine Startseite das Icon mit rel="icon" referenziert und dass es die oben genannten Größenregeln erfüllt. Es gibt keine dokumentierte harte KB-Grenze; Googles Regeln beziehen sich auf die Abmessungen.

In der Praxis

Starte mit einer quadratischen Masterdatei von 512px oder mehr und vereinfache sie für die Tab-Größe. Lade die Dateien hoch, füge dann den HTML-Schnipsel und das Manifest in deine Seite ein und überprüfe nochmals, ob der Manifest-Link vorhanden ist. Schau dir das Ergebnis schließlich bei 16px an: Wenn das Zeichen nicht klar ist, vereinfache es erneut.

Häufig gestellte Fragen

Brauche ich 2026 immer noch eine favicon.ico?

Ja. Browser, Feed-Reader und Link-Vorschau-Bots fordern /favicon.ico vom Stammverzeichnis der Website an, unabhängig von deinen HTML-Tags. Das ist eine günstige Versicherung. Bündele 16, 32 und 48px in einer Datei.

Kann ein Favicon ein JPG sein?

Technisch ja, aber PNG oder SVG liefert ein deutlich saubereres Ergebnis. JPGs bieten keine Transparenz und neigen zu Kompressionsartefakten; Fotos enthalten zudem zu viele Details für 16x16 Pixel.

Welche Größe sollte ein Favicon für Google Search haben?

Google benötigt ein quadratisches Bild mit mindestens 8x8px und empfiehlt größere als 48x48px. SVG wird dort nicht unterstützt, also behalte eine ICO- oder PNG-Datei bei, die mit rel=icon auf deiner Startseite verlinkt ist.

Brauche ich separate 16x16-, 32x32- und 48x48-PNG-Dateien?

Im Allgemeinen nein. Eine Multi-Size-ICO deckt diese Größen ab, und ein Request-Test mit Chromium ergab, dass eigenständige PNGs ungenutzt blieben, wenn eine ICO vorhanden war. Firefox und Safari wurden nicht getestet.

Warum wird mein neues Favicon nicht angezeigt?

Browser cachen Favicons aggressiv über Tage oder Wochen. Versuche eine harte Aktualisierung, öffne /favicon.ico direkt, füge einen ?v=2-Abfrageparameter hinzu oder prüfe es im Inkognito-Modus.