Favicon zu deiner Website hinzufügen (Schritt für Schritt)
Vier Schritte vom leeren Tab zur pixelgenauen Markenidentität. Funktioniert für jede HTML-Site, jedes CMS und jedes Framework.
Was du zuerst brauchst
Ein einzelnes 16x16-Favicon reicht heute nicht mehr. Moderne Browser, iOS, Android und Windows fordern jeweils unterschiedliche Größen und Formate an. Bevor du irgendwelche Tags einfügst, stelle sicher, dass du einen vollständigen Icon-Satz hast.
Das Minimalset
| Datei | Größe | Wer es braucht |
|---|---|---|
| favicon.ico | mehrere Auflösungen | Browser und Crawler, die standardmäßig /favicon.ico anfordern |
| favicon-16x16.png | 16x16 | Browser-Tabs und die Adressleiste |
| favicon-32x32.png | 32x32 | Retina-Tabs, Lesezeichen, Desktop-Verknüpfungen |
| apple-touch-icon.png | 180x180 | iOS-Startbildschirme |
| Manifest-Icon | 192x192 | Android-Startbildschirme, referenziert aus dem Web-Manifest |
Wie diese Größen tatsächlich aussehen
Die vier Schritte
- 1
Erzeuge deine Favicon-Dateien
Lass einen Generator alle Größen, das .ico-Sprite und eine abgestimmte manifest.json in einem Durchgang erzeugen. Wirf ein Logo, einen Screenshot oder sogar ein Emoji hinein und lade das komplette Kit herunter. Neu beim Erstellen von Icons? Fang mit wie man ein Favicon erstellt an.
- 2
Füge die Dateien zum Stammverzeichnis deiner Site hinzu
Kopiere die heruntergeladenen Dateien in das Verzeichnis, das deine Domain-Wurzel ausliefert. Bei einer statischen Site ist das der Stammordner; bei den meisten Frameworks ist es das public/-Verzeichnis. Ziel ist, dass https://deineseite.com/favicon.ico direkt aufgelöst wird.
- 3
Füge die Link-Tags in deinen <head> ein
Referenziere jedes Icon mit <link>-Tags im <head> des Dokuments (icon, apple-touch-icon und manifest) auf jeder Seite, was in der Regel ein gemeinsames Template oder Layout bedeutet.
- 4
Prüfe, ob es funktioniert
Deploye, dann mach einen Hard-Refresh und prüfe den Tab. Die zuverlässigste Prüfung ist ein automatisierter Scan, der bestätigt, dass jedes Tag aufgelöst wird, und fehlende Plattform-Icons markiert.
Die Link-Tags
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Füge dies in das <head>-Element jeder Seite ein. Der Manifest-Link ist das, was dir Installationsaufforderungen und Startbildschirm-Icons gibt. Siehe was ist manifest.json.
Plattformspezifische Abkürzungen
Nutzt du ein Framework oder CMS? Einige davon übernehmen die Head-Tags für dich, mit ihren eigenen Konventionen. Die Plattform-Guides decken Next.js, React, WordPress und Shopify ab.
Häufige Fehler
| Fehler | Lösung |
|---|---|
| Browser-Caching | Alte Favicons bleiben hängen. Mach einen Hard-Refresh oder hänge ?v=2 an das href des Links an. |
| Falscher Pfad | Ein führender Schrägstrich macht den Unterschied. /favicon.ico wird von der Wurzel ausgeliefert, nicht vom aktuellen Ordner. |
| Fehlendes apple-touch-icon | iOS-Startbildschirme greifen ohne es auf einen unscharfen Screenshot zurück. |
Häufig gestellte Fragen
Wo lege ich die Favicon-Datei ab?
Lege favicon.ico und die übrigen Icon-Dateien in das Stammverzeichnis deiner Site (oder bei den meisten Frameworks in den public/-Ordner), damit sie von der Domain-Wurzel ausgeliefert werden, z. B. https://example.com/favicon.ico.
Brauche ich noch eine favicon.ico-Datei?
Ja. Browser und Crawler fordern standardmäßig weiterhin /favicon.ico an, deshalb gibt dir eine .ico mit mehreren Auflösungen neben modernen PNG- und SVG-Icons die größtmögliche Kompatibilität.
Warum wird mein Favicon nicht angezeigt, nachdem ich es hinzugefügt habe?
Browser cachen Favicons aggressiv. Mach einen Hard-Refresh, hänge eine Versions-Query wie ?v=2 an den Link an und stelle sicher, dass der Dateipfad korrekt ist. In unserem Favicon-Troubleshooting-Guide findest du jede Ursache.