Favicon erstellen: alle Größen, Formate und der Einbau
Ein Favicon erstellen klingt nach fünf Minuten, hat aber Tücken bei Größen und Formaten. Wir zeigen, welche Dateien Sie 2026 brauchen, wie Sie sie aus dem Logo ableiten und wie der Einbau im head sauber gelingt.
Das Favicon ist das kleine Bild im Browser-Tab, links neben dem Seitentitel. Klein, ja. Aber es ist der erste Marken-Kontakt, noch bevor die Seite geladen hat, und es taucht überall wieder auf: im Lesezeichen, im Browser-Verlauf, auf dem Smartphone-Homescreen, wenn jemand Ihre Seite dort ablegt. Fehlt es, zeigt der Browser ein graues Standard-Symbol, und Ihre Seite sieht aus wie ein unfertiges Projekt.
Die ehrliche Nachricht: Ein Favicon zu erstellen ist keine Raketenwissenschaft, aber „eine Datei reicht” stimmt 2026 nicht mehr. Hier ist, was Sie wirklich brauchen, ohne Technik-Gerede.
Warum das kleine Bild Vertrauen schafft
Wiedererkennung entsteht durch Wiederholung. Wer zehn Tabs offen hat und Ihren erkennt, ohne den Titel zu lesen, hat Ihre Marke schon einmal mehr gesehen. Das ist Branding für 16 Pixel. Und es ist ein Vertrauenssignal: Seiten mit gepflegtem Favicon wirken professionell, Seiten ohne wirken nach Baustelle. Bei einem inhabergeführten Betrieb, der online um Termine wirbt, zählt jeder dieser kleinen Eindrücke.
Welche Dateien Sie 2026 brauchen
Früher reichte eine einzige favicon.ico. Heute fragen Browser und
Betriebssysteme verschiedene Größen ab, je nachdem wo das Symbol
auftaucht. Sie brauchen nicht jede denkbare Variante, aber dieses
kleine Set deckt praktisch alle Geräte ab:
| 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 |
Die .ico-Datei darf mehrere Größen in einer Datei bündeln (16 und
32 px), das ist normal und kein Fehler. Wenn Sie es ganz schlank
mögen: favicon.ico plus favicon.svg plus apple-touch-icon.png
ist das pragmatische Minimum, das gut aussieht. Die beiden Android-PNGs
kommen dazu, sobald Sie eine Web-App-fähige Seite (PWA) anbieten.
Aus dem Logo ableiten: einfach halten
Der häufigste Fehler ist, das komplette Logo samt Schriftzug ins Favicon zu quetschen. Bei 16 Pixeln ist davon nur noch ein grauer Brei zu sehen. Die Regel lautet: ein Element, das auch winzig erkennbar bleibt.
- Nur das Bildzeichen, nicht der Schriftzug. Wenn Ihr Logo ein Symbol hat (eine Tasse, ein Schere-Icon, ein Monogramm), nehmen Sie das.
- Hat Ihr Logo nur Text? Dann den Anfangsbuchstaben oder das Initialen-Monogramm auf farbigem Grund. Klar, kontrastreich, fertig.
- Kräftige Flächen statt feiner Linien. Dünne Striche verschwinden beim Verkleinern.
- Quadratisch denken. Das Favicon sitzt in einem quadratischen Feld, ein breites Querformat wird beschnitten oder gestaucht.
- Auf hellem und dunklem Hintergrund prüfen. Browser-Tabs sind im Dark-Mode dunkel, ein schwarzes Icon verschwindet dort.
Erstellen Sie die Grafik einmal sauber in hoher Auflösung (am besten als SVG oder als 512-px-PNG), der Rest sind nur noch Exporte in die kleineren Größen.
Der Einbau im head
Die Dateien legen Sie üblicherweise ins Wurzelverzeichnis Ihrer Seite.
favicon.ico direkt im Stamm findet der Browser sogar ohne
Verlinkung, alle anderen Varianten müssen Sie im <head> jeder Seite
bekannt machen. Vier Zeilen reichen:
<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, das Web-Manifest, ist eine kleine Textdatei, die den Android- und PWA-Symbolen (192/512 px) sagt, wo sie liegen und wie Ihre Seite heißt. Wer keine PWA braucht, kann sie weglassen, dann fallen die letzten beiden Android-Größen weg.
Tools, aber bleiben Sie skeptisch
Es gibt zahlreiche kostenlose Favicon-Generatoren: Sie laden ein Bild hoch, bekommen alle Größen plus Manifest und Code-Snippet zurück. Das spart Zeit und ist für die meisten Betriebe völlig ausreichend. Zwei Hinweise aus der Praxis: Erstens laden Sie immer eine große, quadratische Vorlage hoch (mindestens 512 px), sonst skaliert das Tool unscharf hoch. Zweitens prüfen Sie das Ergebnis am echten Gerät, nicht nur in der Vorschau des Tools, das den Generator betreibt.
Häufige Fehler
- Nur die alte
.icound sonst nichts. Auf dem iPhone-Homescreen erscheint dann ein hässlicher Screenshot-Ausschnitt statt Ihres Logos. - Komplettes Logo mit Text als Favicon, das bei 16 px unleserlich wird.
- Alte Datei im Cache. Nach dem Tausch zeigt der Browser oft noch das alte Symbol. Hart neu laden oder den Tab schließen und neu öffnen, sonst denken Sie, der Einbau sei fehlgeschlagen.
- Falscher Pfad im
href. Liegt die Datei woanders als angegeben, bleibt das graue Standard-Symbol. Im Browser-Tab des Entwicklertools sehen Sie 404-Fehler für die fehlenden Icons. - Transparenz vergessen. Ein Icon mit transparentem Rand sieht im
Tab gut aus, auf dem Homescreen aber oft mit weißem Kasten drumherum.
Für
apple-touch-iconlieber eine volle Hintergrundfläche.
Unser eigener Ablauf bei jeder Kundenseite: ein quadratisches
Marken-Symbol als SVG zeichnen, daraus die fünf Größen exportieren, im
<head> verlinken, am iPhone und an einem Android-Gerät gegenprüfen.
Zehn Minuten Arbeit, ein bleibender Eindruck.
Der Spickzettel zum Mitnehmen
Damit Sie beim nächsten Projekt nicht raten müssen, welche Datei wofür gut ist: Unser Format-Spickzettel listet alle Größen mit Verwendung, führt Sie Schritt für Schritt durch den Einbau und liefert das fertige Code-Snippet zum Kopieren. Zum Ausdrucken oder als PDF.
↓ Format-Spickzettel & Code-Snippet öffnen (drucken / als PDF speichern)
Die Formate auf einen Blick:
| Datei | Größe | Wofür |
|---|---|---|
favicon.ico | 16 + 32 px | Browser-Tab, Lesezeichen |
favicon.svg | skalierbar | scharf auf Retina, Dark-Mode |
apple-touch-icon.png | 180 × 180 px | iPhone/iPad-Homescreen |
icon-192.png | 192 × 192 px | Android, PWA |
icon-512.png | 512 × 512 px | Android-Splashscreen, PWA |
Das <head>-Snippet:
<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" />Nächster Schritt
Ein Favicon ist eine von hundert kleinen Stellschrauben, die zusammen einen professionellen Auftritt ergeben, und genau die Sorte Detail, die im Tagesgeschäft untergeht. Wenn jemand das verlässlich für Sie mitdenkt, von der Marke bis zum letzten Pixel, finden Sie das in unserem Komplett-Paket wieder.
Was das monatlich kostet und was alles drinsteckt, sehen Sie übersichtlich in unseren Pakete & Preise.
Geschrieben von
Aus dem Artikel mitgenommen?