Um ein Favicon per HTML einzubinden, setzt du <link rel="icon">-Tags in den <head> deines Dokuments, ergänzt apple-touch-icon für iOS, verlinkst ein Web Manifest für Android/PWA-Icons und legst favicon.ico ins Root-Verzeichnis. Browser finden Icons über diese Tags plus die automatische Anfrage an /favicon.ico.
Unten findest du ein produktionsreifes Setup zum Kopieren. Nach dem Deploy die Live-URL mit dem Favicon Check scannen und prüfen, ob jede Datei erreichbar ist.
Minimales Setup (schnellster Weg)
Wenn es in fünf Minuten laufen soll:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="apple-touch-icon" href="/apple-touch-icon.png">Drei Dateien ins Web-Root legen:
/favicon.ico/favicon-32x32.png(32×32 px)/apple-touch-icon.png(180×180 px)
Das deckt Desktop-Tabs und iOS-Homescreen ab. Es ist nicht das volle moderne Set. Für 192×512-Manifest-Icons und 16×16-Tabs nutze die vollständige Vorlage im nächsten Abschnitt.
Vollständige HTML-Vorlage (empfohlen)
In <head> einfügen, idealerweise vor CSS-Links, damit Browser Icons früh entdecken:
<!-- Standard-Favicons --><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"><!-- Optional: SVG für moderne Browser --><link rel="icon" href="/favicon.svg" type="image/svg+xml"><!-- iOS-Homescreen --><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><!-- Android / PWA --><link rel="manifest" href="/site.webmanifest"><!-- Optional: Safari angehefteter Tab --><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">Dazu site.webmanifest auf derselben Origin:
{ "name": "Meine Site", "short_name": "Meine Site", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone"}Größen-Referenz: Im Favicon-Größen-Leitfaden steht, wann welche Dimension gebraucht wird.
Wo Favicon-Tags ins HTML gehören
Favicons gehören in <head>, nicht in <body>. Browser parsen den Head vor dem ersten Paint. Spät referenzierte Icons können auf langsamen Verbindungen kurz ein Generik-Symbol zeigen.
<!DOCTYPE html><html lang="de"><head> <meta charset="utf-8"> <title>Beispiel</title> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <!-- weiterer Head-Inhalt --></head><body> ...</body></html>Pfad-Regeln
- Root-relative Pfade (
/favicon-32x32.png) funktionieren auf den meisten Sites und überleben Seitentiefe. - Absolute URLs (
https://cdn.example.com/icons/favicon-32x32.png) bei CDN-Auslieferung. Alle Icon-URLs müssen in Produktion HTTPS sein. - Relative Pfade (
./favicon.ico) brechen auf verschachtelten Routen wie/blog/artikel-slug, außer du rechnest die Tiefe mit. Root-relative Pfade bevorzugen.
Falsche Pfade sind die häufigste Ursache für „Favicon wird nicht angezeigt“. Nach jedem Deploy Favicon Check auf einer tiefen URL testen (nicht nur Startseite), damit Pfade von jeder Route aus auflösbar sind.
Die einzelnen Link-Tags erklärt
rel="icon"
Standard-Favicon für Browser-Tabs und Lesezeichen.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Das sizes-Attribut muss zu den echten Bildmaßen passen. Abweichungen verwirren Audit-Tools und manchmal die Browser-Auswahl.
rel="shortcut icon"
Legacy-Syntax aus HTML4. Wird noch erkannt, aber rel="icon" reicht heute. Wenn du beides nutzt, zeige auf dieselbe Datei.
<link rel="shortcut icon" href="/favicon.ico">rel="apple-touch-icon"
Wird genutzt, wenn iOS-Nutzer „Zum Home-Bildschirm“ wählen. Nicht austauschbar mit rel="icon".
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">rel="manifest"
Verlinkt dein JSON-Manifest. Darin stecken 192×192- und 512×512-Icons für Android und PWAs.
<link rel="manifest" href="/site.webmanifest">Manifest mit Content-Type: application/manifest+json oder application/json ausliefern.
rel="mask-icon"
Monochromes SVG für Safari-Pinned-Tabs auf macOS. Nische, aber auf manchen Redaktions-Sites erwartet.
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">favicon.ico im Root
Auch mit perfekten link-Tags fragen Browser und Bots an:
https://deinedomain.de/favicon.ico
Datei am Origin-Root ablegen. Bei reinen SPAs auf Unterpfaden gehört das ICO trotzdem an die Domain-Wurzel, sofern du Redirects kontrollierst.
Der Favicon Check prüft /favicon.ico explizit, wenn es nicht im HTML steht. Wenn du nur auf ICO setzt, findet der Scanner es trotzdem.
Mehrere Sprachen / Locale-Unterseiten
Favicons gelten pro Origin, nicht pro Sprachpfad. Wenn /de/ und /en/ dieselbe Domain nutzen, reicht ein Icon-Set im globalen Layout. Nur bei separaten Domains (example.de vs. example.com) brauchst du getrennte Dateien und Tags.
Nach dem Einbinden in ein mehrsprachiges Template beide Sprach-URLs im Favicon Check testen. So stellst du sicher, dass kein sprachspezifisches Layout die link-Tags weglässt.
Schritt-für-Schritt Umsetzung
1. Icon-Dateien exportieren
Von einem 512×512-Master starten. PNGs bei 16, 32, 180, 192 und 512 px exportieren. favicon.ico mit 16/32/48-Ebenen erzeugen. Optional favicon.svg für scharfe Desktop-Darstellung.
Size-Lab im Favicon Check nutzen, um Uploads in Tab- und Homescreen-Größen zu sehen, bevor du Dateien festlegst.
2. Auf Static Hosting hochladen
Dateien auf derselben Origin wie das HTML oder auf einem CDN, das du kontrollierst. Öffentlicher HTTPS-Zugang ohne Login-Wand.
3. Tags ins Layout-Template
Bei gemeinsamem Layout (WordPress-Header, Rails-Layout, Next.js app/layout.tsx) Tags einmal global setzen. Nicht pro Seite duplizieren.
4. Deployen und Cache ggf. busten
Favicons werden hart gecacht. Nach Rebrand neue Dateinamen oder kurze Cache-TTLs auf Icon-Pfaden.
5. Live-Site validieren
- Favicon Check öffnen.
- Produktions-URL einfügen.
- Prüfen, ob jede erwartete Datei mit korrektem
relundsizeserscheint. - Verdächtige Einträge herunterladen und lokal öffnen.
- Open-Graph-Scanner auf derselben URL für Social Previews mitlaufen lassen.
Framework-Hinweise
Plain HTML / statische Sites
Volle Vorlage in jeden <head> oder Build-Step mit Shared Partial. Bei Eleventy, Hugo oder Jekyll Icons nach /static oder /public, damit sie ins Build-Root kopiert werden.
React SPA (Vite, CRA)
Icons in public/. Vite liefert public/favicon.ico unter /favicon.ico. Explizite link-Tags in index.html für PNG-Größen und apple-touch-icon bleiben nötig.
WordPress
Upload über Customizer oder Child-Theme. Viele Themes setzen nur favicon.ico. Volles Tag-Set in header.php oder kleinem Plugin überschreiben.
Next.js App Router
favicon.ico in app/. icon.png und apple-icon.png als Dateikonvention, oder Metadata exportieren:
export const metadata = { icons: { icon: [ { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" }, ], apple: "/apple-touch-icon.png", }, manifest: "/site.webmanifest",}Ausführlichere Framework-Guides folgen in separaten Artikeln. Das Ziel bleibt dasselbe: korrekte Dateien unter korrekten URLs.
Häufige HTML-Fehler
Icons nur per JavaScript
Clientseitig injizierte link-Tags kommen zu spät. Crawler, RSS-Reader und manche Browser sehen sie nie. Icons müssen im serverseitig gerenderten HTML stehen.
type-Attribut fehlt
Browser raten meist anhand der Endung. Explizites type="image/png" oder type="image/svg+xml" hilft Audit-Tools.
Falscher MIME-Type auf dem Server
Liefert der Server .ico als application/octet-stream, meckern manche Tools. image/x-icon für ICO und image/png für PNG konfigurieren.
sizes="any" auf PNG
sizes="any" für ICO oder SVG reservieren. PNG-Einträge brauchen exakte Pixel wie 32x32.
Manifest-Link vergessen
site.webmanifest liegt im Repo, aber <link rel="manifest"> fehlt. Android ignoriert PWA-Icons. Der Favicon Check zeigt Manifest-Icons nur, wenn der Link-Tag da ist und JSON parst.
HTTP statt HTTPS
Mixed-Content blockiert Icons auf sicheren Seiten. Alles über HTTPS ausliefern.
HTML vs. CMS vs. Framework
| Ansatz | Vorteil | Stolperstein |
|---|---|---|
Raw HTML im <head> | Volle Kontrolle, leicht zu auditieren | Manuelles Update pro Template |
| CMS-Customizer | Kein Code für Marketing | Oft nur ein kleines Icon |
| Framework-Metadata-API | Typisiert, versioniert im Repo | Build-URLs kennen |
Unabhängig vom Ansatz bleibt die Prüfung gleich: öffentliche URL mit Favicon Check scannen.
Nach dem Deploy: Browser und Tools gegenchecken
HTML korrekt zu schreiben ist die halbe Miete. Die andere Hälfte ist der Live-Check.
- Favicon Check - listet alle gefundenen Icons, inkl. Manifest und
/favicon.ico. - Privates Browserfenster - um lokalen Cache auszuschließen.
- Open-Graph-Scanner - gleiche Domain für
og:imageprüfen, besonders nach Rebrand. - Mobilgerät - Seite zum Homescreen hinzufügen und das 180×180-Icon visuell prüfen.
Wenn ein Schritt fehlschlägt, zuerst Pfade und HTTPS prüfen, dann Cache, dann ob das Layout auf genau dieser Route die Tags rendert.
Copy-Paste-Checkliste
-
favicon.icounter/favicon.ico - 32×32- und 16×16-PNG-
link rel="icon"-Tags im<head> -
apple-touch-iconbei 180×180 -
site.webmanifestmit 192- und 512-Icons -
<link rel="manifest" href="/site.webmanifest">vorhanden - Alle Pfade root-relative oder absolute HTTPS-URLs
- Live-URL mit Favicon Check gescannt
- Dieselbe URL mit Open-Graph-Scanner für
og:imagegeprüft
FAQ
Wie viele Link-Tags brauche ich?
Minimum drei: ICO oder 32×32-Icon, apple-touch-icon und Manifest-Link. Vollständig kommen 16×16, optionales SVG und mask-icon dazu.
Reicht ein einzelnes <link rel="icon">?
Für einfache Tabs ja. iOS und Android brauchen eigene Tags oder Manifest-Einträge.
Vor oder nach CSS im Head?
Davor ist etwas sicherer für frühe Entdeckung. Die Reihenfolge bricht moderne Browser selten, solange alles in <head> steht.
Braucht jede Seite Favicon-Tags?
Jede HTML-Seite sollte sie haben, üblicherweise über ein Shared Layout. Fehlende Tags in einem Template bedeuten falsche Icons für ganze Bereiche.
Favicon auf Subdomain?
Jede Origin (Subdomain) braucht eigene Dateien und Tags. app.example.com erbt nicht automatisch von www.example.com.
Site hinter Login-Wand?
Öffentliche Favicons müssen ohne Auth erreichbar sein. Inkognito testen oder Favicon Check nutzen, der anonym fetcht.
Favicon updaten ohne altes Icon bei Nutzern?
Dateiname ändern (favicon-2026.ico), href anpassen, kurze Cache-Control auf Icon-Pfaden während Rollout.
Data-URI als Favicon?
href="data:image/png;base64,..." funktioniert in manchen Browsern, stört aber Caching und CSP. Statische HTTPS-Dateien sind Standard.
Kann ich Favicons in der robots.txt blockieren?
Blockierst du /favicon.ico oder Icon-Pfade für Crawler, können Suchmaschinen und Audit-Tools kein Marken-Icon anzeigen. Icons öffentlich halten.
Wo finde ich die generierten Tags in Next.js?
Im gerenderten HTML der Seite: Rechtsklick → Seitenquelltext. Oder direkt Favicon Check mit der Live-URL nutzen. Das ist schneller als nach Build-Artefakten zu suchen.
Fazit
Setze rel="icon"-PNGs, apple-touch-icon, Manifest-Link und Root-favicon.ico in den <head>. Nutze root-relative HTTPS-Pfade, rendere Tags serverseitig und validiere mit dem Favicon Check nach dem Deploy. Für alle Größen: Favicon-Größen-Leitfaden. Für Social Sharing: Open-Graph-Scanner auf derselben URL.
