Favicon erstellen & einbinden: Größen & HTML-Code

Für ein sauberes Favicon brauchen Sie drei Dateien: ein SVG, ein PNG in 32 × 32 Pixeln und ein Apple Touch Icon in 180 × 180 Pixeln. Erstellen können Sie sie mit einem kostenlosen Generator, eingebunden werden sie mit drei Zeilen HTML im <head>.

Ein Favicon ist das kleine Symbol neben dem Seitentitel im Browser-Tab, dort meist 16 × 16 oder 32 × 32 Pixel groß. Bei meinen Kunden-Websites fällt mir auf, dass es oft als Letztes bedacht wird, obwohl es im Tab als Erstes zu sehen ist. Auf vielen Firmenwebsites fehlt es ganz, oder es ist so unscharf, dass es mehr schadet als nützt.

Was ist ein Favicon und warum brauchen Sie eins?

Favicon steht für „Favorites Icon“, ein Überbleibsel aus der Zeit, als Lesezeichen noch „Favoriten“ hießen. Heute taucht das Icon an deutlich mehr Stellen auf:

Browser-Tab: Wer 20 Tabs offen hat, orientiert sich an den Icons statt an den abgeschnittenen Seitentiteln
Lesezeichen und Verlauf: Ohne Favicon erscheint Ihre Seite als generisches Seitenblatt in der Lesezeichenleiste
Google-Suchergebnisse: Google zeigt Favicons neben den Suchergebnissen, auf dem Smartphone seit 2019 und inzwischen auch am Desktop. Fehlt es, erscheint ein graues Weltkugel-Symbol
Progressive Web Apps: Wer seine Website als App auf dem Homescreen speichert, braucht ein scharfes Icon in mehreren Größen

Ein fehlendes Favicon wirkt nachlässig, ähnlich wie ein Geschäft ohne Ladenschild. Besucher registrieren das oft, ohne es benennen zu können.

Welche Formate brauchen Sie?

Früher brauchte man eine ICO-Datei mit sechs eingebetteten Größen. Heute reichen ein SVG und zwei PNG-Dateien.

SVG als Hauptformat

SVG-Favicons unterstützen alle aktuellen Browser: Chrome, Firefox und Edge seit Jahren, Safari seit Version 26 (Stand: September 2026). Weil SVG ein Vektorformat ist, skaliert es verlustfrei auf jede Größe, ob 16 Pixel im Tab oder 512 Pixel auf dem Homescreen. Außerdem unterstützt SVG prefers-color-scheme, sodass Ihr Favicon automatisch auf den Dark Mode des Betriebssystems reagieren kann.

PNG als Fallback

Ein PNG-Favicon in 32 × 32 Pixeln deckt ältere Browser ab und dient als zuverlässiger Fallback. Manche Browser verwenden auch größere Varianten (96 × 96, 192 × 192) für Tabs auf hochauflösenden Displays oder Android-Homescreens.

Auch für die Google-Suche brauchen Sie eine Rasterdatei. Google nennt als unterstützte Formate BMP, GIF, ICO, PNG, JPEG, PPM und TIFF, SVG steht nicht auf der Liste. Das Icon muss quadratisch sein, Google empfiehlt mindestens 48 × 48 Pixel und liest neben rel="icon" auch das Apple Touch Icon aus (Stand: September 2026, laut Google Search Central). Im Minimal-Setup unten erfüllt das Apple Touch Icon diese Vorgaben.

ICO nur noch für ältere Systeme

Das ICO-Format stammt aus der Internet-Explorer-Ära. Wenn Sie keinen Grund haben, den IE 11 zu unterstützen, können Sie darauf verzichten. Wer auf Nummer sicher gehen will, legt trotzdem eine favicon.ico im Root-Verzeichnis ab. Manche älteren Crawler suchen dort automatisch danach.

Apple Touch Icon in 180 × 180 Pixeln

Wenn jemand Ihre Website auf dem iPhone oder iPad zum Homescreen hinzufügt, verwendet Safari das Apple Touch Icon: ein PNG in 180 × 180 Pixeln. Fehlt es, erzeugt iOS selbst ein Ersatzsymbol, und das sieht selten nach Ihrer Marke aus.

Das Minimal-Setup: ein SVG als Hauptformat, ein PNG in 32 × 32 Pixeln als Fallback und ein Apple Touch Icon in 180 × 180 Pixeln.

Den SVG-first-Ansatz erklärt der Favicon-Guide von Evil Martians im Detail.

Drei kostenlose Generatoren

Sie brauchen keine Grafiksoftware, um ein Favicon zu erstellen. Diese drei Tools reichen:

1. RealFaviconGenerator (Empfehlung)

RealFaviconGenerator kann von den drei Tools am meisten. Sie laden Ihr Logo hoch und bekommen alle Formate (ICO, PNG in verschiedenen Größen, Apple Touch Icon, Android-Icon, Web-App-Manifest) plus den fertigen HTML-Code zum Einbinden. Eine Vorschau zeigt, wie Ihr Favicon in verschiedenen Browsern und auf verschiedenen Geräten aussieht.

2. favicon.io

Praktisch, wenn Sie noch kein Logo haben: favicon.io generiert Favicons aus Text. Sie tippen einen oder zwei Buchstaben ein, wählen Schrift und Farbe, und erhalten ein sofort einsetzbares Icon-Set. Das geht schnell, allerdings ohne die ausführliche Vorschau von RealFaviconGenerator.

3. Canva

Wenn Sie Ihr Logo bereits als Grafik haben, können Sie es in Canva auf die richtige Größe zuschneiden und als PNG exportieren. Canva eignet sich besonders, wenn das Logo noch angepasst werden muss, etwa mit transparentem Hintergrund oder als vereinfachtes Symbol für kleine Darstellungen.

HTML-Code zum Einbinden

Die Favicon-Dateien gehören in den <head>-Bereich Ihrer HTML-Datei. Hier der Code für das Minimal-Setup:

<!-- SVG-Favicon (alle modernen Browser) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- PNG-Fallback (32x32) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<!-- Apple Touch Icon (180x180) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Browser, die SVG-Favicons unterstützen, nutzen das SVG. Alle anderen greifen auf das PNG zurück.

Pfade: Die Dateien können überall liegen, solange der Pfad im href stimmt. Ich lege sie bei meinen Projekten in einen /img/-Ordner. Die favicon.ico gehört dagegen traditionell ins Root-Verzeichnis, weil manche Browser und Crawler sie dort auch ohne Link-Tag suchen.

Web-App-Manifest

Für Progressive Web Apps und Android-Homescreens brauchen Sie zusätzlich eine site.webmanifest-Datei. Die verweist auf größere Icon-Versionen (192 × 192 und 512 × 512 Pixel). RealFaviconGenerator generiert diese Datei automatisch mit.

<link rel="manifest" href="/site.webmanifest">

Für eine klassische Firmenwebsite ohne PWA-Ambitionen ist das Manifest optional. Dort reicht das Setup aus SVG, PNG und Apple Touch Icon.

Häufige Fehler vermeiden

Die meisten Favicon-Fehler fallen erst auf, wenn jemand anders draufschaut.

Zu detailliertes Logo

Ein Logo, das als JPEG in 500 × 500 Pixeln hochgeladen wird, erscheint im Browser-Tab als unlesbarer Pixelklumpen, weil feine Linien, Verläufe und kleine Schrift bei 16 × 16 Pixeln verschwinden. Das Favicon sollte eine vereinfachte Version Ihres Logos sein. Oft reicht der Anfangsbuchstabe oder ein einzelnes Symbol.

Falscher Pfad

Der häufigste technische Fehler: Der href im Link-Tag zeigt auf eine Datei, die nicht existiert. Das passiert besonders nach einem Website-Relaunch, wenn sich Ordnerstrukturen ändern. Prüfen Sie nach dem Upload, ob die Datei unter der angegebenen URL erreichbar ist: Rufen Sie den Pfad einfach im Browser auf. Weitere typische Pannen sammelt der Artikel Website-Fehler, die Kunden vertreiben.

Fehlendes Apple Touch Icon

Ohne Apple Touch Icon erzeugt iOS für den Homescreen selbst ein Ersatzsymbol, das selten nach Ihrer Marke aussieht. Besonders ärgerlich ist das, wenn ein Kunde Ihre Seite auf dem iPhone-Homescreen speichert und dort ein verschwommenes Etwas statt Ihres Logos sieht.

Gar kein Favicon

Wer kein Favicon einbindet, bekommt vom Browser ein generisches Icon, meistens eine leere Seite oder eine Weltkugel. In Google-Suchergebnissen auf dem Smartphone fällt das besonders auf, weil alle anderen Treffer ihre Logos zeigen. Es ist wie bei einem Handwerker, der ohne Firmenwagen zur Baustelle fährt: Technisch funktioniert es, aber der Eindruck ist ein anderer. Was außer dem Favicon auf eine Firmenwebsite gehört, zeigt der Leitfaden Handwerker-Website erstellen.

Für ein sauberes Favicon-Setup reichen drei Dateien und drei Zeilen HTML. Fangen Sie mit RealFaviconGenerator an, laden Sie Ihr Logo hoch und kopieren Sie den generierten Code in Ihren <head>.