HTML Favicon einbinden

Das kleine Symbol im Browser-Tab – das ist ein HTML Favicon! Es macht deine Website wiedererkennbar und professionell. In diesem Tutorial lernst du, wie du ein Favicon einbindest.

Einführung in das HTML Favicon Tutorial

Was ist ein Favicon

Favicon = "Favorite Icon". Du siehst es:

Im Browser-Tab neben dem Seitentitel
In den Lesezeichen
Auf dem Smartphone-Homescreen
In Google-Suchergebnissen

Warum Favicons wichtig sind

Wiedererkennung: Nutzer finden deine Seite zwischen vielen Tabs
Professionalität: Ohne Favicon = generisches Symbol = unprofessionell
Branding: Stärkt deine Marke

Was du in diesem Tutorial lernst

Favicon-Datei erstellen
Favicon via Link-Tag einbinden
Verschiedene Größen und Formate

Voraussetzungen

Benötigte HTML-Kenntnisse

Du solltest HTML-Grundlagen verstehen. Falls nicht, hol das kurz nach!

Tools und Dateien vorbereiten

Du brauchst:

Eine Favicon-Datei (ICO oder PNG)
Empfohlene Größen: 16x16, 32x32, oder 48x48 Pixel
Kostenlose Generator: realfavicongenerator.net

Schritt-für-Schritt-Anleitung

Schritt 1: Favicon-Datei erstellen

Tipps für gute Favicons:

Einfach halten – bei 16x16 Pixeln sind Details unsichtbar
Kontrastreiche Farben verwenden
Quadratisch (16x16, 32x32, oder 48x48)

Speichere als favicon.ico oder favicon.png.

Schritt 2: Favicon im HTML-Head einbinden

Jetzt HTML lernen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Website mit Favicon</title>
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <h1>Hallo Welt!</h1>
</body>
</html>

Der <link>-Tag im Head – das ist alles!

Schritt 3: Mehrere Größen definieren

Für optimale Darstellung auf allen Geräten:

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

Browser wählt automatisch die passende Größe!

Schritt 4: Favicon testen

Siehst du kein Favicon?

Cache leeren: Strg+F5 (Hard Refresh)
Pfad prüfen: Liegt die Datei am richtigen Ort?
Inkognito-Fenster: Testet ohne Cache

[bildapi id="1001" prompt="A clean website browser tab showing a colorful favicon icon next to the page title, demonstrating how favicons appear in practice" name="favicon-browser-tab-example" alt="Browser Tab mit Favicon Symbol neben Seitentitel"]

Code-Beispiele zu HTML Favicon

Einfachste Variante (ICO)

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Moderne Variante (PNG)

<head>
    <link rel="icon" href="favicon.png" type="image/png">
</head>

Vollständige Implementation

<head>
    <!-- Standard Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <!-- PNG Varianten -->
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96.png">
    
    <!-- Apple Touch Icon für iOS Homescreen -->
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>

Häufige Fehler & Troubleshooting

Fehler 1: Favicon erscheint nicht

Häufigste Ursache: Browser-Cache!

Lösungen:

Strg+F5 (Hard Refresh)
Browser-Cache komplett leeren
Im Inkognito-Fenster testen
Trick: favicon.ico?v=2 (Version anhängen)

Fehler 2: Falscher Dateipfad

PROBLEM: HTML in Unterordner, Favicon im Root
FALSCH:  href="favicon.png"
RICHTIG: href="../favicon.png" oder href="/favicon.png"

Fehler 3: Favicon bei Subdomain/Unterseiten fehlt

Lösung: Absoluten Pfad verwenden:

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

HTML: Best Practices & Tipps

Optimale Favicon-Größen

16x16: Browser-Tab
32x32: Taskbar, Retina-Displays
180x180: Apple Touch Icon (iOS Homescreen)
192x192: Android Homescreen

Dateiformate

ICO: Kann mehrere Größen enthalten, aber größere Dateigröße
PNG: Bessere Qualität, kleiner, moderner Standard
SVG: Perfekt skalierbar, aber nicht in allen Browsern

Performance

Favicon unter 10-20 KB halten
Nicht zu viele Varianten (3-4 reichen)
Komprimierungstools nutzen

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kannst jetzt Favicons einbinden:

<link rel="icon" href="favicon.png"> im Head
Verschiedene Größen für verschiedene Geräte
ICO vs. PNG Formate
Cache-Probleme lösen

Ein kleines Detail mit großer Wirkung für die Professionalität deiner Website!

Herzlichen Glückwunsch! Du hast das HTML-Tutorial abgeschlossen. Schau dir jetzt unser CSS-Tutorial an, um deine Websites zu stylen!