Was ist ein Favicon?
Ein Favicon ist ein kleines Icon, das in der Adressleiste des Browsers, in Tabs, in den Lesezeichen (Favoriten) sowie bei mobilen Schnellverknüpfungen auf dem Home-Bildschirm angezeigt wird. Es dient als visuelles Erkennungsmerkmal Deiner Webseite und stärkt die Wiedererkennung Deiner Marke.
Gerade bei mehreren geöffneten Tabs oder in Favoritenlisten hebt sich Deine Webseite mit einem individuellen Favicon deutlich von Seiten ohne eigenes Icon ab. Deshalb solltest Du für jede professionelle Webseite ein eigenes Favicon einsetzen – unabhängig davon, ob Du mit HTML, WordPress, einem anderen CMS oder einem Homepage-Baukasten arbeitest.
So sieht ein Favicon eingebunden aus:
Das kleine 
vor Google auf dem Browser-Tab ist der Favicon.
Warum ein Favicon wichtig ist
Ein gut gestaltetes Favicon:
- erhöht den Wiedererkennungswert Deiner Webseite
- wirkt professionell und vertrauenswürdig
- verbessert die Benutzerfreundlichkeit
- unterstützt Dein Branding auf Desktop und Mobilgeräten
Merksatz:
Einen Menschen erkennt man an seinem Gesicht.
Eine Stadt erkennt man an ihren Bauwerken.
Eine Webseite erkennt man an ihrem Favicon.
Technische Grundlagen eines Favicons
Dateiformate und Größen
Das klassische Favicon hat folgende Eigenschaften:
- Dateiformat:
.ico - Standardgröße: 16 × 16 Pixel
- Empfohlene Zusatzgröße: 32 × 32 Pixel
- Farbtiefe: bis zu 256 Farben
- Transparenz: möglich
Moderne Webseiten nutzen zusätzlich PNG-Favicons für verschiedene Geräte und Auflösungen. Viele Generatoren erstellen automatisch alle benötigten Dateien.
Favicon per HTML einbinden (für klassische Webseiten)
Wenn sich Deine Datei favicon.ico im Stammverzeichnis Deiner Webseite befindet, genügt meist diese Einbindung im <head>-Bereich:
<link rel="shortcut icon" href="favicon.ico">
Externes Favicon mit absolutem Pfad einbinden
<link rel="shortcut icon" href="https://www.deine-domain.de/favicon.ico">
Hinweis: Wenn Du keine Angabe im Head-Bereich machst, suchen Browser automatisch nach einer Datei namens
favicon.icoim Stammverzeichnis.
Favicon in WordPress einrichten
In WordPress ist kein manuelles Bearbeiten von HTML nötig:
- Gehe im Backend zu Design → Customizer
- Öffne den Punkt Website-Informationen
- Lade Dein Favicon als Website-Icon hoch
- Änderungen speichern
WordPress erstellt automatisch die passenden Größen für verschiedene Geräte und Browser.
Favicon bei Homepage-Baukästen & CMS
Auch bei Systemen wie Joomla, Jimdo oder anderen Baukästen kannst Du Favicons nutzen. In der Regel findest Du die Funktion:
- in den Design-Einstellungen
- im Theme-Bereich
- oder in der Dokumentation des Anbieters
Hilfreiche Suchanfragen bei Google sind zum Beispiel:
- „WordPress Favicon einbinden“
- „Jimdo Favicon ändern“
- „Joomla Favicon hinzufügen“
Online Favicon-Generatoren (Anbieterübersicht)
Die folgenden kostenlosen Online-Tools helfen Dir, schnell und einfach Favicons zu erstellen. Die Anbieter sind alphabetisch sortiert.
| Link zum Anbieter | Beschreibung des Angebots |
|---|---|
| https://degraeve.com/favicon/ | Einfacher Online-Generator zur individuellen Favicon-Erstellung |
| https://favicon.cc | Komfortabler Favicon-Editor mit Zeichenfunktion, Galerie und Live-Vorschau |
| https://favicongenerator.com | Erstellt Favicons aus bestehenden Bildern |
| https://freefavicon.com | Kostenloser Online-Favicon-Generator |
| https://genfavicon.com | Wandelt vorhandene Grafikdateien in Favicons um |
| https://www.ionos.de/tools/favicon-generator | Drei Methoden: Zeichnen, Buchstaben-Favicon oder Bild-Upload inkl. HTML-Code |
| https://www.websiteplanet.com/de/webtools/favicon-generator/ | Online-Tool mit Galerie und Bild-Upload (JPG, PNG, GIF bis 5 MB) |
Favicon mit Software erstellen
Alternativ kannst Du Favicons auch lokal erstellen:
- IcoFX – spezialisiertes Icon-Bearbeitungsprogramm
https://icofx.ro/ - IrfanView – Bildbetrachter mit Export ins ICO-Format
https://www.irfanview.com/
Achtung: Ein einfaches Umbenennen einer Bilddatei in
.icofunktioniert nicht zuverlässig und führt meist zu fehlerhaften Dateien.
Typische Probleme & Lösungen
- Favicon wird nicht angezeigt: Browser-Cache leeren und Seite neu laden
- Änderung sichtbar verzögert: Cache von Browser und ggf. CDN löschen
- Mobil kein Icon sichtbar: zusätzliche PNG-Favicons verwenden
Weiterführende Informationen
- https://de.wikipedia.org/wiki/Favicon
- https://wiki.selfhtml.org/wiki/Favicon
- https://www.iconarchive.com
- https://www.bjoernsworld.de/ie/favicon.html
Fazit
Ein Favicon ist ein kleines, aber wirkungsvolles Element Deiner Webseite. Es steigert die Wiedererkennung, wirkt professionell und verbessert die Nutzererfahrung. Dank moderner Generatoren und CMS-Funktionen kannst Du Favicons heute schnell und kostenlos erstellen – egal ob Du mit HTML oder WordPress arbeitest.