bk·innosoft
Arbeitshilfe für lokale Betriebe
Favicon erstellen — Format-Spickzettel
Alle Größen mit Verwendung, der Einbau Schritt für Schritt und das fertige Code-Snippet zum Kopieren. Für ein Favicon, das im Tab, im Lesezeichen und auf dem Homescreen sauber aussieht.
Welche Dateien Sie brauchen
| Datei | Größe | Wofür | Pflicht? |
|---|
| favicon.ico | 16 + 32 px | Browser-Tab, Lesezeichen, ältere Browser | ja |
| favicon.svg | skalierbar | scharf auf jedem Display, Dark-Mode-fähig | empfohlen |
| apple-touch-icon.png | 180 × 180 px | Homescreen-Symbol auf iPhone/iPad | ja |
| icon-192.png | 192 × 192 px | Android-Homescreen, PWA | empfohlen |
| icon-512.png | 512 × 512 px | Android-Splashscreen, PWA, App-Listen | empfohlen |
Pragmatisches Minimum: favicon.ico + favicon.svg + apple-touch-icon.png. Die beiden Android-PNGs (192/512) kommen dazu, sobald Sie eine Web-App (PWA) anbieten.
So erstellen Sie das Favicon
- Eine quadratische Vorlage zeichnen. Nur das Bildzeichen oder das Initialen-Monogramm — niemals den vollen Schriftzug. Kräftige Flächen statt dünner Linien.
- Groß und scharf anlegen: als SVG oder als PNG mit mindestens 512 × 512 px. Alles Kleinere skaliert unscharf hoch.
- Auf hellem und dunklem Grund prüfen. Browser-Tabs sind im Dark-Mode dunkel — ein schwarzes Icon verschwindet dort.
- Alle Größen exportieren (16/32 als .ico, 180/192/512 als .png) oder einen kostenlosen Favicon-Generator nutzen und die große Vorlage hochladen.
- Dateien ins Wurzelverzeichnis der Webseite legen und im <head> verlinken (Snippet unten).
- Am echten Gerät gegenprüfen: iPhone-Homescreen und ein Android-Gerät, nicht nur die Tool-Vorschau. Browser-Cache vorher leeren.
Das <head>-Snippet (kopierfertig)
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Die letzte Zeile (Web-Manifest) bindet die Android-/PWA-Symbole ein. Brauchen Sie keine PWA, lassen Sie sie weg — dann entfallen icon-192 und icon-512.
Mini-Checkliste vor dem Live-Gang
- favicon.ico liegt im Wurzelverzeichnis und wird im Tab angezeigt
- apple-touch-icon.png (180 px) vorhanden — Test auf iPhone-Homescreen
- Icon ist auch bei 16 px noch erkennbar (kein voller Schriftzug)
- Auf hellem und dunklem Tab-Hintergrund sichtbar
- apple-touch-icon hat vollen Hintergrund, keine Transparenz
- Keine 404-Fehler für Icon-Dateien in den Entwicklertools
- Browser-Cache geleert / hart neu geladen zur Kontrolle
Häufigster Fehler: Das alte Favicon hängt im Cache. Wenn nach dem Tausch noch das alte Symbol erscheint, ist meist nicht der Einbau schuld — Tab schließen, neu öffnen oder hart neu laden.