1. Designer in Action
2. Tipps & Tricks
3. Web Development
4. Favicon erstellen: Der Guide für 2026 (SVG, Dark Mode & HTML)

Favicon erstellen: Der Guide für 2026 (SVG, Dark Mode & HTML)

Ein gutes Favicon ist das Aushängeschild jeder Website. Doch welche Formate sind heute Standard? Wie funktioniert der Dark Mode? Und wird die .ico-Datei überhaupt noch benötigt? Dieser Guide erklärt, wie sich Favicons professionell erstellen und per HTML oder in WordPress einbinden lassen.

Was ist ein Favicon?

Ein Favicon (kurz für „Favorite Icon“) ist das kleine Symbol (meist 16×16 oder 32×32 Pixel), das im Browser-Tab, in der Lesezeichenleiste und in den Suchergebnissen von Google (Mobile & Desktop) angezeigt wird.

Es dient der Markenbildung und hilft Nutzern, den richtigen Tab schnell wiederzufinden. Seit Google Favicons auch mobil in den Suchergebnissen prominent anzeigt, gilt es als relevanter Faktor für die Klickrate (CTR).

Die richtigen Formate: SVG ist der neue Standard

Lange Zeit war favicon.ico das Maß aller Dinge. Das hat sich geändert. Moderne Browser unterstützen Vektorgrafiken (SVG), was für gestochen scharfe Icons auf Retina-Displays sorgt und deutlich flexibler ist.

Der HTML-Code für 2026

Lange Code-Blöcke gehören der Vergangenheit an. Heute reicht ein schlankes Setup, um den Großteil aller Geräte abzudecken:

<!-- 1. SVG für moderne Browser (mit Dark Mode Support) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- 2. Apple Touch Icon (für iPhone/iPad Homescreen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 3. Fallback für alles andere (optional: manifest.json für Android) -->
<link rel="manifest" href="/manifest.webmanifest">

Die alte favicon.ico Datei kann einfach in das Hauptverzeichnis (Root) der Domain gelegt werden. Browser suchen dort automatisch danach, auch ohne expliziten HTML-Verweis.

Profi-Tipp: Dark Mode Support mit SVG

Ein schwarzes Logo auf weißem Hintergrund sieht im Browser-Tab gut aus. Doch wenn der Nutzer den Dark Mode aktiviert hat, wird ein schwarzes Logo auf dunkelgrauem Tab fast unsichtbar.

Mit einem SVG-Favicon lässt sich CSS direkt in die Grafik einbetten. So passt sich die Farbe automatisch an das Systemthema an:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #000; } /* Standard: Schwarz */
@media (prefers-color-scheme: dark) {
path { fill: #fff; } /* Dark Mode: Weiß */
}
</style>
<path d="..." />
</svg>

Favicon erstellen: Tools & Software

Mit Illustrator (Beste Methode)

Da SVG Vektoren sind, ist Adobe Illustrator (oder Inkscape/Affinity Designer) das Werkzeug der Wahl.

1. Eine quadratische Zeichenfläche erstellen (z.B. 512×512 px).
2. Das Logo platzieren. Dabei ist darauf zu achten, dass es auch extrem klein (16px) noch erkennbar ist. Feine Linien sollten vermieden werden.
3. Einmal als .SVG und einmal als .PNG (512px) speichern.

Mit Photoshop

Photoshop eignet sich gut für PNG-Exports. Das Dokument sollte in 512×512 Pixel angelegt werden. Das früher oft genutzte Plugin für .ico-Dateien ist heute kaum noch nötig, da Online-Generatoren diesen Schritt übernehmen können.

Online-Generatoren (Die schnelle Lösung)

Liegt nur ein großes Logo vor? Diese Tools erstellen alle nötigen Dateien und den Code:

• Real Favicon Generator (Der Goldstandard, inkl. SVG-Check)
• favicon.io (Sehr einfach, konvertiert auch Text/Emojis)

Favicon in WordPress einbinden

In WordPress muss meist gar kein Code angefasst werden. Das System übernimmt die Erstellung der verschiedenen Größen automatisch.

1. Im Dashboard auf Design > Customizer gehen.
2. Den Punkt Website-Informationen auswählen.
3. Das Bild unter Website-Icon hochladen (Empfohlen: PNG, mind. 512×512 Pixel).
4. WordPress generiert daraus automatisch das Favicon und das Apple Touch Icon.

Häufige Fragen (FAQ)