Favicon erstellen und einbinden: Anleitung

Bei meinen Kunden-Websites fällt mir auf: Das Favicon ist oft das Letzte, woran gedacht wird — aber es ist das Erste, was im Browser-Tab zu sehen ist. Und wer keins hat, sieht aus, als hätte jemand die Website vor dem Mittagessen aufgegeben.

Ein Favicon ist das kleine Symbol, das neben dem Seitentitel im Browser-Tab erscheint. 16 mal 16 Pixel, manchmal 32 mal 32 — winzig, aber erstaunlich auffällig. Trotzdem fehlt es auf erstaunlich vielen Firmenwebsites. Oder es ist da, aber so schlecht umgesetzt, dass man es lieber nicht hätte.

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 — Die offensichtlichste Stelle. Wer 20 Tabs offen hat, orientiert sich an den Icons, nicht an den abgeschnittenen Seitentiteln
Lesezeichen und Verlauf — Ohne Favicon wird Ihre Seite zum generischen Seitenblatt in der Lesezeichenleiste
Google-Suchergebnisse — Seit 2019 zeigt Google Favicons neben den Suchergebnissen auf dem Smartphone an. Kein Favicon? Google zeigt ein graues Weltkugel-Icon
Progressive Web Apps — Wer seine Website als App auf dem Homescreen speichert, braucht ein hochwertiges Icon in mehreren Größen

Es geht dabei nicht um Ästhetik allein. Ein fehlendes Favicon signalisiert Nachlässigkeit — ähnlich wie ein Geschäft ohne Ladenschild. Besucher registrieren das unbewusst, und Google auch.

Formate: SVG, PNG oder ICO?

Die Favicon-Landschaft hat sich in den letzten Jahren stark vereinfacht. Früher brauchte man eine ICO-Datei mit sechs eingebetteten Größen. 2026 sieht das anders aus.

SVG — das Hauptformat

SVG-Favicons werden von allen modernen Browsern unterstützt (Chrome, Firefox, Edge, Safari ab Version 15). Weil SVG ein Vektorformat ist, skaliert es verlustfrei auf jede Größe — egal 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 — der Fallback

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

ICO — nur noch für Legacy

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 ältere Crawler suchen dort automatisch danach.

Apple Touch Icon — 180x180

Wenn jemand Ihre Website auf dem iPhone oder iPad zum Homescreen hinzufügt, verwendet Safari das Apple Touch Icon. Größe: 180x180 Pixel, Format: PNG. Ohne dieses Icon nimmt Safari einen Screenshot Ihrer Website — das sieht selten gut aus.

Das Minimal-Setup für 2026: Ein SVG als Hauptformat, ein PNG in 32x32 als Fallback und ein Apple Touch Icon in 180x180. Drei Dateien, fertig.

Wer tiefer einsteigen möchte: Der Evil Martians Favicon-Guide erklärt den SVG-first-Ansatz im Detail.

Drei kostenlose Generatoren

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

1. RealFaviconGenerator (Empfehlung)

RealFaviconGenerator ist das umfassendste kostenlose Tool. 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. Das Tool zeigt außerdem eine Vorschau, 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. Schnell und unkompliziert — allerdings ohne die Vorschau-Tiefe 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 ein transparenter Hintergrund oder ein 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">

Die Reihenfolge ist relevant: Der Browser nimmt das erste Format, das er unterstützt. SVG zuerst, dann PNG als Fallback.

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 — manche Browser und Crawler suchen sie dort ohne Link-Tag.

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 (192x192 und 512x512). RealFaviconGenerator generiert diese Datei automatisch mit.

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

Für eine klassische Firmenwebsite ohne PWA-Ambitionen ist das Manifest optional. Das SVG + PNG + Apple Touch Icon-Setup reicht.

Häufige Fehler vermeiden

Beim Favicon kann einiges schief gehen — und die meisten Fehler fallen erst auf, wenn jemand anders draufschaut.

Zu detailliertes Logo

Ein Metallbauer aus Minden hatte sein Logo als 500x500 JPEG hochgeladen — im Browser-Tab war es ein unlesbarer Pixelklumpen. Das Problem: Feine Linien, Verläufe und kleine Schrift verschwinden bei 16x16 Pixel. 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. Passiert besonders gerne nach einem Website-Relaunch, wenn Ordnerstrukturen sich ändern. Prüfen Sie nach dem Upload, ob die Datei unter der angegebenen URL erreichbar ist — einfach den Pfad im Browser aufrufen.

Fehlendes Apple Touch Icon

Ohne Apple Touch Icon macht Safari einen Screenshot Ihrer Seite und quetscht ihn in ein abgerundetes Quadrat. Das Ergebnis ist fast immer hässlich. Besonders ärgerlich, 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. Das ist, wie wenn ein Handwerker ohne Firmenwagen zur Baustelle fährt — technisch funktioniert es, aber der Eindruck ist ein anderer.

Drei Dateien, fünf Zeilen HTML — mehr braucht es nicht für ein sauberes Favicon-Setup. Fangen Sie mit RealFaviconGenerator an, laden Sie Ihr Logo hoch, kopieren Sie den generierten Code in Ihren <head>, und das Thema ist erledigt. Kein Grund, es auf die lange Bank zu schieben.