Was ist ein Favicon?
Ein Favicon (Zusammensetzung aus „favorite“ und „icon“) ist eine kleine, quadratische Grafik, die im Webbrowser als visuelles Wiedererkennungsmerkmal einer Website dient. Meist handelt es sich dabei um das Logo eines Unternehmens oder eine reduzierte Variante davon. Es sorgt dafür, dass die Marke auch in kompakten Ansichten sofort erkennbar ist und trägt zu einem professionellen Gesamtauftritt bei. Gerade bei vielen geöffneten Tabs oder gespeicherten Lesezeichen hilft es Nutzern, sich schnell zu orientieren.
Dort taucht das Favoicon auf:
- im Browser-Tab neben dem Titel der Webseite
- in der Favoritenliste
- in den Suchergebnissen von Suchmaschinen
Die richtige Favicon Größe
Die Standardgröße für das Favicon im Browser ist 16 × 16 px. Allerdings reicht diese eine Größe heute nicht mehr aus, da Favicons auf unterschiedlichen Geräten und in verschiedenen Kontexten dargestellt werden. Um überall eine scharfe und professionelle Darstellung zu gewährleisten, ist es heute gängige Praxis, mehrere Favicon-Größen bereitzustellen. Zu einem sauberen Set gehören:
- 16 × 16 px: Standardgröße im Browser-Tab
- 32 × 32 px: Lesezeichen, Windows-Taskleiste und Retina-Displays
- 180 × 180 px: Apple Touch Icon für iPhone und iPad
- 192 × 192 px: Für Android-Geräte und Chrome beim Hinzufügen zum Startbildschirm
- 512 × 512 px: Hochauflösende Version für moderne Webanwendungen
Favicon erstellen
Für die Erstellung eines Favicons gibt es verschiedene Möglichkeiten und Dateiformate. Je nach technischem Einsatz und gewünschter Flexibilität kommen unterschiedliche Varianten infrage:
- .ico: Klassisches Favicon-Format, das mehrere Bildgrößen in einer Datei bündeln kann
- .png: Scharfe Darstellung auf modernen Displays und unterstützt Transparenz
- .svg: Vektorbasiertes Format, ideal für skalierbare Favicons und flexible Anpassungen, etwa für helle und dunkle Designs
- .gif: Wird nur selten verwendet, zum Beispiel für animierte Icons
Am häufigsten kommt das ico-Format zum Einsatz. Der Vorteil ist, dass Browser automatisch die passende enthaltene Variante auswählen können. Das macht die Einbindung des Favicons unkompliziert und sorgt für maximale Kompatibilität.
Zur Erstellung bieten sich spezielle Favicon-Generatoren an. Mit ihnen lassen sich aus einer hochauflösenden Ausgangsdatei automatisch alle benötigten Formate erzeugen und technisch korrekt aufbereiten.
Design-Tipps für ein gutes Favicon
Wichtig ist, dass das Favicon quadratisch angelegt und gestalterisch stark reduziert ist, damit es auch in sehr kleiner Darstellung gut erkennbar bleibt. Feine Details, kleine Schrift oder komplexe Logos funktionieren in Mini-Darstellung meist nicht. Weniger ist hier hier mehr. Darauf solltet ihr achten:
- Keine kleinen Details
- Große statt kleine Schrift
- Hoher Kontrast
- Klare, dicke Formen
- Initiale oder Icon statt ganzes Logo
Favicon einbinden
Die Einbindung eines Favicons gehört beim Erstellen einer Website zu den Pflichtaufgaben. Best Practice ist es, das Favicon im <head>-Bereich des HTML-Dokuments zu hinterlegen. Dort wird die jeweilige Datei über ein <link>-Element referenziert, sodass Browser sie korrekt erkennen und darstellen können. Je nachdem, welches Dateiformat verwendet wird, unterscheidet sich die Einbindung im HTML-Code leicht.
.ico-Datei einbinden
<link rel="icon" href="/favicon.ico" type="image/x-icon">
.png-Datei einbinden
<link rel="icon" href="/favicon.png" type="image/png">
Optional kann bei PNG-Dateien zusätzlich die Größe angegeben werden:
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
Favicon auf mobilen Endgeräten
Mobile Optimierung ist heute Standard und auch das Favicon spielt dabei eine Rolle. Auf Smartphones und Tablets ist es sogar noch sichtbarer als im Browser-Tab. Wenn Nutzer eine Website auf ihrem Home-Bildschirm speichern, erscheint sie dort wie eine kleine App und wird mit einem sogenannten Touch-Icon angezeigt.
Damit dieses Icon sauber aussieht und nicht unscharf oder abgeschnitten wirkt, sollte eine passende Datei im <head>-Bereich der Website hinterlegt werden. Andernfalls greifen Geräte automatisch auf irgendeine vorhandene Grafik zurück und das sieht oft nicht besonders professionell aus. Gerade auf mobilen Endgeräten ist ein sauber eingebundenes Favicon also kein Detail, sondern Teil eines durchdachten, professionellen Markenauftritts.
Fragen zum Favicon
FAQ
Ist das Favicon das Markenlogo?
Brauche ich ein eigenes Favicon für Dark Mode?
Hat das Favicon Einfluss auf SEO?
Warum sieht das Favicon manchmal unscharf aus?
Tim Selzer
Was meinst du – genug Input oder willst du noch mehr? Melde dich einfach.
0151 5406 0689 
Jetzt anfragen 
Tim Selzer
Lass uns durchstarten!
Lass uns die Einzelheiten deines Projekts doch einfach persönlich besprechen. Du kannst uns dazu entweder anrufen oder eine unverbindliche Kontaktanfrage stellen.
0151 5406 0689 
