Ausführbare HTML-Docs: Favicon

Q: Wie füge ich in HTML ein Favicon ein?

Leg die Icon-Datei auf deine Website und füg (oder einen Pfad zu einem PNG oder SVG) in ein. Browser zeigen es dann im Tab, in Lesezeichen und im Verlauf an.

Q: Wie groß sollte ein Favicon sein?

Stell ein favicon.ico (oder PNG) mit 32×32 für Tabs bereit, ein SVG, das auf jede Größe skaliert, und ein PNG apple-touch-icon mit 180×180 für den iPhone-Homebildschirm. Web-Apps mit Manifest führen außerdem PNGs mit 192×192 und 512×512 auf.

Q: Warum wird mein Favicon nicht angezeigt?

Die üblichen Ursachen sind ein falscher Pfad in href, ein außerhalb von oder ein Browser, der noch ein altes Icon aus dem Cache zeigt. Öffne die Icon-URL direkt, um den Pfad zu prüfen, und lade dann mit geleertem Cache neu oder häng eine Version wie ?v=2 an die URL.

Q: Kann ich ein SVG oder PNG als Favicon verwenden?

Ja. Nimm oder . SVG funktioniert in Chrome, Edge und Firefox; behalte zusätzlich ein ICO oder PNG für Browser, die es nicht unterstützen.

Q: Brauche ich rel="shortcut icon"?

Nein. rel="icon" ist der Standardwert. Das Wort shortcut ist ein Überbleibsel aus dem alten Internet Explorer und bewirkt in aktuellen Browsern nichts.

So fügst du ein Favicon ein

Speichere dein Icon auf der Website und verweise in <head> mit einem Tag <link rel="icon"> darauf:

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

Für eine einfache Website ist das schon die ganze Antwort. Das href kann auf eine Datei mit der Endung .ico, .png oder .svg zeigen. Das Beispiel unten nimmt ein SVG, das als Data-URI direkt in das href geschrieben ist, es braucht also keine eigene Datei. Eine Vorschau in einer anderen Seite kann deinen Browser-Tab nicht ändern, deshalb zeichnet das Skript dasselbe Icon in einem nachgebauten Tab und in drei Größen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

Bei 16 Pixeln ist Platz für einen fetten Buchstaben oder eine einfache Form, und feine Details verschwinden. Entwirf das Icon zuerst für die kleinste Größe. Ändere fill='%232563eb' in eine andere Farbe (%23 ist das URL-kodierte #), und jede Kopie aktualisiert sich.

Welche Dateien du bereitstellst

Browser, Handys und App-Launcher suchen nach unterschiedlichen Icons. Eine kleine Auswahl deckt alle ab:

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

Datei	Größe	Verwendet für
`favicon.ico`	32×32	Browser-Tabs und Tools, die nur nach `/favicon.ico` suchen
`icon.svg`	Beliebig (Vektor)	Scharfe Tabs bei jeder Pixeldichte, in Chrome, Edge und Firefox
`apple-touch-icon.png`	180×180	Das Icon, wenn jemand deine Website zum Homebildschirm eines iPhones oder iPads hinzufügt
Manifest-Icons	PNG mit 192×192 und 512×512	Android-Homebildschirm und installierte Web-Apps

Die meisten Browser fragen außerdem von selbst /favicon.ico im Wurzelverzeichnis der Website an, wenn eine Seite keinen Icon-Link hat, ein favicon.ico dort ist also ein nützlicher Standard. Das Attribut sizes sagt dem Browser, welche Größe jede Datei hat, damit er die beste auswählen kann. Nimm rel="icon"; das ältere rel="shortcut icon" funktioniert nur, weil Browser das zusätzliche Wort ignorieren.

Ein Emoji als Favicon

Für einen Prototyp oder eine persönliche Seite ist ein Emoji ein schnelles Favicon. Setz es in ein SVG-Element <text>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA ist das Keks-Emoji, URL-kodiert. Das Emoji wird von der Emoji-Schrift des Betriebssystems gezeichnet, es sieht also unter Windows, macOS und Android anders aus, und für ein echtes Produkt ist ein gestaltetes Icon die bessere Wahl.

Ein Icon, das dem Dark Mode folgt

Ein SVG-Favicon kann sein eigenes CSS mitbringen, auch eine Media Query prefers-color-scheme. So wird ein dunkles Icon hell, wenn der Browser ein dunkles Theme verwendet:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Das Favicon mit JavaScript ändern

Websites nutzen ein wechselndes Favicon für einen Benachrichtigungspunkt oder eine Statusfarbe. Zeichne das neue Icon auf ein <canvas> und setz das href des Links auf das Canvas-Bild:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Auf einer echten Seite in Chrome oder Firefox ändert sich das Tab-Icon jedes Mal, wenn href gesetzt wird, im selben Moment, in dem sich hier das Vorschaubild ändert.

Häufige Fehler

Ein falscher Pfad. href="favicon.ico" ist relativ zur aktuellen Seite und funktioniert deshalb auf /blog/post nicht. Nimm einen Pfad ab dem Wurzelverzeichnis: href="/favicon.ico".
Erwarten, dass eine Änderung sofort erscheint. Browser cachen Favicons hartnäckig. Lade mit geleertem Cache neu oder ändere die URL (/favicon.ico?v=2), wenn du das Icon ersetzt.
Ein detailliertes Logo, auf 16 Pixel verkleinert. Vereinfache es: ein Buchstabe oder eine Form mit starkem Kontrast.
Nur ein SVG. Behalte zusätzlich ein ICO oder PNG für Browser ohne Unterstützung für SVG-Favicons und füg das apple-touch-icon für iOS hinzu.
Den Link in <body> setzen. Lass ihn in <head> bei dem Title-Tag und den anderen Metadaten.

Häufig gestellte Fragen

Wie füge ich in HTML ein Favicon ein?

Leg die Icon-Datei auf deine Website und füg <link rel="icon" href="/favicon.ico"> (oder einen Pfad zu einem PNG oder SVG) in <head> ein. Browser zeigen es dann im Tab, in Lesezeichen und im Verlauf an.

Wie groß sollte ein Favicon sein?

Stell ein favicon.ico (oder PNG) mit 32×32 für Tabs bereit, ein SVG, das auf jede Größe skaliert, und ein PNG apple-touch-icon mit 180×180 für den iPhone-Homebildschirm. Web-Apps mit Manifest führen außerdem PNGs mit 192×192 und 512×512 auf.

Warum wird mein Favicon nicht angezeigt?

Die üblichen Ursachen sind ein falscher Pfad in href, ein <link> außerhalb von <head> oder ein Browser, der noch ein altes Icon aus dem Cache zeigt. Öffne die Icon-URL direkt, um den Pfad zu prüfen, und lade dann mit geleertem Cache neu oder häng eine Version wie ?v=2 an die URL.

Kann ich ein SVG oder PNG als Favicon verwenden?

Ja. Nimm <link rel="icon" href="/icon.svg" type="image/svg+xml"> oder <link rel="icon" href="/icon.png" type="image/png">. SVG funktioniert in Chrome, Edge und Firefox; behalte zusätzlich ein ICO oder PNG für Browser, die es nicht unterstützen.

Brauche ich rel="shortcut icon"?

Nein. rel="icon" ist der Standardwert. Das Wort shortcut ist ein Überbleibsel aus dem alten Internet Explorer und bewirkt in aktuellen Browsern nichts.

Kann ich ein Emoji als Favicon verwenden?

Ja, indem du es in ein SVG packst: eine SVG-Data-URI mit einem <text>-Element, das das Emoji enthält. Für Prototypen ist das praktisch, aber das Emoji sieht auf jedem Betriebssystem anders aus.

Verwandte Konzepte