Favicon HTML - Copy-Paste Link-Tags

8 min read

11. Juni 2026

Das Standard-Favicon-HTML nutzt mehrere <link rel="icon">-Tags für ICO und PNG, ein apple-touch-icon für iOS und einen manifest-Link für Android-Install-Icons. Jeder href sollte root-relativ oder absolute HTTPS-URL sein, damit Unterseiten dieselben Dateien laden.

Unten findest du Copy-Paste-Vorlagen für dein Layout-<head>. Pfade an dein Repo anpassen, dann Live-URL mit Favicon Check scannen.

Minimales Favicon-HTML (Schnellstart)

Für einfache Marketing-Sites:

<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" sizes="180x180" href="/apple-touch-icon.png">

Mit Android-Icons Manifest ergänzen:

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

Warum jede Größe existiert: Favicon-Größen-Guide. Deployment-Schritte: Favicon per HTML einbinden.

Vollständiger Production-head-Block

In serverseitig gerendertes <head> auf jedem HTML-Template kopieren:

<!-- Legacy ICO im Root -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- PNG Tab-Icons -->
<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 scharfes Vektor-Icon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Optional Safari angehefteter Tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb">

Passende Dateien im Root:

/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/favicon.svg              (optional)
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest
/safari-pinned-tab.svg     (optional)

Passendes site.webmanifest

{
  "name": "Meine Site",
  "short_name": "Meine Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Manifest-Details: Web-App-Manifest-Icons erklärt. SVG: SVG-Favicon-Anleitung.

Tag-Referenz

`rel="icon"` mit favicon.ico

<link rel="icon" href="/favicon.ico" sizes="any">

Browser fragen /favicon.ico auch ohne Tag an. Explizite Deklaration hilft Audit-Tools.

sizes="any" für ICO und SVG. Nicht für PNG.

PNG-Favicon-Größen

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

sizes muss echte Pixelmaße treffen.

SVG-Favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Optional. PNG oder ICO als Fallback behalten.

apple-touch-icon

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Pflicht für iOS-Home-Screen. 32×32 Tab-PNG reicht nicht.

Web-Manifest

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

Ohne Tag sieht Android Manifest-Icons nicht. Häufiger Fehler in Häufige Favicon-Fehler.

mask-icon (Safari)

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb">

Monochromes SVG für angeheftete Tabs. Optional.

Pfad-Regeln gegen kaputte Icons

Root-relativ:

<!-- Richtig -->
<link rel="icon" href="/favicon-32x32.png">
<!-- Falsch auf Unterseiten -->
<link rel="icon" href="favicon-32x32.png">

Unter https://example.com/docs/seite wird die falsche Variante zu /docs/favicon-32x32.png. Top-Ursache in Favicon wird nicht angezeigt.

HTTPS-Seiten brauchen HTTPS-Icon-URLs.

Platzierung im `<head>`

Favicon-Links früh im <head>, vor schweren Skripten.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beispiel Site</title>
  <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">
  <link rel="stylesheet" href="/styles.css">
</head>

Tags müssen im Seitenquelltext stehen, nicht nur nach JavaScript.

Framework-Beispiele

Next.js App Router

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
    ],
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
};

Gerendertes HTML auf Production prüfen.

WordPress / PHP

<link rel="icon" href="<?php echo esc_url( home_url( '/favicon.ico' ) ); ?>" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo esc_url( home_url( '/favicon-32x32.png' ) ); ?>">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo esc_url( home_url( '/apple-touch-icon.png' ) ); ?>">
<link rel="manifest" href="<?php echo esc_url( home_url( '/site.webmanifest' ) ); ?>">

Varianten

SVG mit PNG-Fallback

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">

Nur ICO (nicht empfohlen)

<link rel="icon" href="/favicon.ico" sizes="any">

Basis-Tabs ok. iOS und Android fehlen.

CDN-gehostete Icons

<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/icons/favicon-32x32.png">

Erlaubt bei korrektem MIME und HTTPS.

Fehler, die diese Vorlage vermeidet

Fehler	Vorlage
Relative Pfade	Root-relative `/...`
PNG mit `sizes="any"`	Exakt `16x16`, `32x32`
Manifest ohne Link	`rel="manifest"` enthalten
Nur JS-Icons	Statischer `<head>`
Kein apple-touch-icon	180×180 deklariert

Unscharfe Icons trotz korrektem HTML: schlechter Export. Siehe Favicon unscharf.

Checkliste nach dem Einfügen

Seitenquelltext auf Unterseite prüfen.
Jeden href im Inkognito-Fenster öffnen. 200 und korrekter MIME-Type.
/favicon.ico ohne Login.
Favicon Check auf Production.
Altes Icon? Favicon-Cache erklärt.

head-Block für mehrsprachige Sites

Jede Locale-HTML-Seite braucht dieselben Icon-href-Werte, wenn Icons global gelten. Unterschiedliche lang-Attribute ändern nichts an Icon-Pfaden.

Bei hreflang-Setup dieselben Icon-Tags in de und en Layouts. Sprachspezifische Marken nur mit klaren Dateinamen (favicon-de.png) und konsistentem Template pro Locale.

Preconnect und Performance

Favicons sind klein. Wichtiger: Icon-Tags vor große render-blocking Scripts im <head>. So lädt der Tab das Markenzeichen früh.

Validierung mit HTML-Tools

W3C Validator und Favicon Check ergänzen sich. Syntax vs Live-200 und Manifest-Parse.

Workflow: lokal validieren, deployen, Production scannen, Unterseite erneut scannen.

Tag-Reihenfolge

Reihenfolge der link-Tags bricht selten Tabs, wenn alle Dateien existieren. Übliche Konvention: ICO, PNG-Größen, optional SVG, apple-touch-icon, Manifest. Favicon Check vor und nach Migration vergleichen.

Troubleshooting nach Copy-Paste

Symptom	Prüfen
Generischer Tab nur auf `/`	Relative `href` ohne `/`
Icon auf Startseite, nicht im Blog	Layout nicht überall
Manifest fehlt im Audit	`rel="manifest"` vergessen
404 im Checker	Datei nicht deployed
Altes Icon	Cache, Favicon-Cache erklärt

Block einmal ins Basis-Layout, nicht in einzelne Page-Komponenten.

Subfolder-Deployments

Site unter https://example.com/app/: entweder Icons bewusst unter /app/assets/ mit konsistenten Pfaden in HTML und Manifest, oder Root-Icons unter /favicon-32x32.png. Gemischte Strategien brechen bei Subdomain-Umzügen.

<link rel="icon" type="image/png" sizes="32x32" href="/app/assets/favicon-32x32.png">

Gleicher Pfad in site.webmanifest src.

Einzeilige Minimal-Variante

Nur für interne Tools oder MVP:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Keine deklarierten PNG-Größen - schwächer für Audits. Für öffentliche Marketing-Sites den vollen Block oben nutzen.

Data-URI favicons (nicht empfohlen)

<link rel="icon" href="data:image/png;base64,...">

Funktioniert in manchen Browsern, erschwert Caching und CSP. Statische Dateien auf HTTPS sind Standard, siehe Favicon einbinden HTML.

head-Block in E-Mail-Templates

Newsletter-HTML ist nicht dein Site-Layout. Favicon-Tags in E-Mails ignorieren Clients. Für Website-Tabs weiterhin vollständigen Block im Site-Layout verwenden, nicht in Mail-Templates kopieren.

mask-icon Farbe

safari-pinned-tab.svg braucht color="#..." passend zur Marke. Monochromes SVG, keine Farbflächen im File. Optional für die meisten Sites.

Komplettes Beispiel mit Kommentaren

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Beispiel</title>
  <!-- Tab + Legacy -->
  <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">
  <!-- iOS -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <!-- Android -->
  <link rel="manifest" href="/site.webmanifest">
</head>
<body>...</body>
</html>

Kommentare in Production-HTML optional - wichtig ist die Tag-Liste. Nach Deploy Favicon Check auf / und auf /blog/beispiel/ laufen lassen.

HTTPS und Mixed Content

Auf https://example.com müssen Icon-URLs auch HTTPS sein. Ein einziges http://-Icon wird blockiert oder ignoriert. Nach TLS-Migration alle href-Werte und Manifest-src-Einträge durchgehen. HSTS-Preload-Sites ohne HTTP-Fallback auf Icons.

SVG-Zeile optional ergänzen

Wenn du Vektor-Tabs willst, siehe SVG-Favicon-Anleitung. Die SVG-Zeile gehört in denselben <head>-Block, nie als Ersatz für apple-touch-icon oder Manifest-PNGs.

Häufige Copy-Paste-Fehler im Team

Snippet nur in index.html, nicht im CMS-Layout
Manifest-Link vergessen, PNGs liegen im Root
href zeigt auf /public/favicon.ico statt /favicon.ico
Staging-URL in href hardcodiert

Nach jedem Fehler Production mit Favicon Check und View-source auf einer Blog-Unterseite prüfen. Größen-Export: Favicon-Größen-Guide. Typische Fallen: Favicon-Fehler.

Einbindung in bestehende Themes

WordPress header.php, Shopify theme.liquid, Django base.html: überall dort einfügen, wo <head> für alle Seiten gerendert wird. Nicht in einzelne Page-Templates. Nach Theme-Update erneut View-source prüfen - Updates überschreiben Header-Dateien. Child-Theme oder versioniertes Template schützt vor stillem Verlust der Icon-Tags.

Versionierung im Dateinamen

Bei Rebrand nicht nur Inhalt von favicon-32x32.png tauschen, sondern optional favicon-32x32-2026.png nutzen und href anpassen. Entspricht Favicon-Cache erklärt. Copy-Paste-Block oben mit neuen Namen aktualisieren, einmal deployen, Favicon Check bestätigen lassen.

Abschluss

Dieser Artikel ist die Copy-Paste-Referenz. Größen verstehen: Favicon-Größen-Guide. SVG optional: SVG-Favicon-Anleitung. Manifest: Web-App-Manifest-Icons. Nach jedem Einfügen Production scannen. Bei fehlendem Icon: Favicon wird nicht angezeigt. Bei unscharfen Pixeln: Favicon unscharf. Bei stale Tab nach Rebrand: Favicon-Cache erklärt. Tool zum Prüfen: Favicon Check auf opengraph-check.com. Ein Scan dauert Sekunden und ersetzt manuelles Öffnen von zehn Icon-URLs. Teile die Production-URL mit Design und QA - alle sehen dasselbe Ergebnis.

FAQ

Wie viele Favicon-link-Tags brauche ich?

Minimum drei plus Manifest: ICO oder 32×32 PNG, apple-touch-icon, Manifest-Link. Vollständig: 16×16, optional SVG, mask-icon.

HTML 1:1 kopieren?

Ja, wenn Dateinamen und Pfade passen.

ICO oder PNG zuerst?

Beides ok. Viele listen ICO zuerst.

Auf jeder Seite separat?

Ein gemeinsames Layout. Jede HTML-Antwort braucht denselben Block.

`type` für PNG?

type="image/png".

Manifest ohne PWA?

Android-Home-Screen liest Manifest-Icons. Service Worker optional.

Favicon-HTML nach Rebrand?

Dateien und href aktualisieren, bei Bedarf neue Dateinamen, erneut Favicon Check.

Open Graph nutzt diese Tags?

Nein. Social Previews nutzen og:image. Open Graph Scanner separat laufen lassen.

Fazit

Vollständigen <head>-Block mit ICO, 16×16, 32×32, apple-touch-icon und Manifest kopieren. Root-relative HTTPS-Pfade, serverseitig auf jedem Template, validieren mit Favicon Check. Größen: Favicon-Größen-Guide. Manifest: Web-App-Manifest-Icons.