zurück zur Glossar-Übersicht
Webdesign Glossar: Favicon
Veröffentlicht von: Alexander Gildernstern
Kurz und knapp: Was ist ein Favicon?
Ein Favicon ist ein kleines Website-Symbol, das in Browser-Tabs, Lesezeichen, Lesezeichenleisten und teils in Suchergebnissen angezeigt wird. Es stärkt dein Branding, verbessert die Nutzerorientierung und sorgt dafür, dass deine Webseite auf Anhieb wiedererkennbar und professioneller wahrgenommen wird.
Inhaltsverzeichnis
Warum ist ein Favicon so wichtig für deine Webseite?
Ein Favicon ist viel mehr als nur ein dekoratives Bild neben dem Seitentitel. Der Browser zeigt das Favicon in Tabs, in der Lesezeichenliste, im Verlauf und auf dem Smartphone sogar als kleines App-Symbol auf dem Startbildschirm. So erkennen Nutzer deine Webseite auch dann schnell wieder, wenn viele Tabs geöffnet sind oder etliche Seiten als Favoriten gespeichert wurden.
Damit unterstützt ein Favicon direkt die Benutzerfreundlichkeit, weil Besucher sich besser orientieren können und deine Marke nicht zwischen generischen Standard-Icons untergeht. Gleichzeitig wirkt eine Seite mit eigenem Favicon seriöser und vertrauenswürdiger als eine Seite, bei der nur ein graues Standard-Symbol des Browsers erscheint.
Wichtig ist außerdem die Rolle für dein Branding: Farben, Formen und Stil des Favicons sollten klar zu deinem Logo und deinem visuellen Auftritt passen. So entsteht ein konsistentes Bild über Webseite, Social Media und Suchergebnisse hinweg. Indirekt hilft ein Favicon auch der Suchmaschinen-Optimierung, weil Nutzer länger bleiben, häufiger zurückkehren und deine Seite insgesamt als professioneller wahrnehmen.
Der Begriff Favicon setzt sich aus den englischen Wörtern „favorite“ und „icon“ zusammen und lässt sich sinngemäß als Favoriten-Symbol übersetzen. Üblich sind quadratische Grafiken mit 16 x 16 oder 32 x 32 Pixeln, die aus einem stark reduzierten Logo, einem Initial oder einem einfachen Symbol bestehen.
Kostenloses
Webdesign Beratungsgespräch
Wir gestalten deine Webseite so, wie du sie dir schon lange wünschst.
100 % Transparenz
Alle Leistungen und Preise sind von Anfang an transparent für dich einsehbar.
Langfristig an deiner Seite
Auf Wunsch übernehmen wir die fortlaufende Betreuung deiner Website und reagieren schnell auf Änderungen oder technische Fehler.
Google Bewertungen
Basierend auf 5 Bewertungen
Welche Favicon-Größen und -Formate sind sinnvoll?
Damit dein Favicon in allen Browsern sauber dargestellt wird, brauchst du passende Größen und Formate. Klassisch ist das ICO-Format. Eine favicon.ico Datei im Stammverzeichnis deiner Domain wird von nahezu allen Browsern automatisch erkannt. In dieser Datei können mehrere Auflösungen wie 16 x 16, 32 x 32 oder 48 x 48 Pixel gespeichert sein, damit das Favicon auf unterschiedlichen Bildschirmen gut aussieht.
Zusätzlich solltest du moderne Formate nutzen. PNG eignet sich für Favicons mit Transparenz und klaren Kanten, SVG für skalierbare Icons auf hochauflösenden Displays. Diese Dateien bindest du im head-Bereich deiner HTML-Seite mit dem link-Tag ein, zum Beispiel mit einer Variante in 32 x 32 Pixeln für Browser-Tabs und einer größeren Version für Web-Apps oder Progressive-Web-Apps.
Für Smartphones sind weitere Größen sinnvoll. Apple-Touch-Icons mit 180 x 180 Pixeln und ein Android-Icon mit 192 x 192 Pixeln sorgen dafür, dass dein Favicon als Startbildschirm-Symbol scharf und professionell wirkt. Wichtig ist immer ein einfaches, kontrastreiches Motiv. Lange Wörter, dünne Linien oder sehr detailreiche Logos brechen in kleinen Favicon-Größen optisch zusammen und wirken schnell unscharf.
Mit einer Kombination aus favicon.ico, mehreren PNG-Varianten und optional einem SVG-Favicon deckst du fast alle Plattformen ab und stellst sicher, dass dein Favicon überall sauber gerendert wird.
Wie erstellst du ein professionelles Favicon?
Am Anfang steht ein klares Konzept für dein Branding. Überlege dir, welches Element deine Marke am besten repräsentiert: ein stark reduziertes Logo, ein einzelner Buchstabe oder ein prägnantes Symbol. Öffne ein Grafikprogramm wie Photoshop, GIMP oder eine Browser-App und lege eine quadratische Arbeitsfläche an, zum Beispiel 512 x 512 Pixel. Auf dieser Basis entwickelst du dein Favicon-Design.
Setze auf wenige Formen und kräftige Farben mit hohem Kontrast, damit das Favicon auch in 16 x 16 Pixeln noch erkennbar bleibt. Filigrane Schriften, lange Begriffe oder komplexe Bildmarken sind für Favicons ungeeignet und sollten konsequent vereinfacht werden. Teste dein Favicon früh, indem du es stark verkleinerst und prüfst, ob das Motiv immer noch klar zu erkennen ist.
Im nächsten Schritt exportierst du dein Design als PNG in mehreren Größen, etwa 16 x 16, 32 x 32, 64 x 64 und 192 x 192 Pixel. Mit einem Favicon-Generator wandelst du diese Dateien in eine ICO-Datei um und lässt dir auf Wunsch Apple-Touch-Icons und Android-Icons automatisch erzeugen. Viele Generatoren liefern dir außerdem den dazugehörigen HTML-Code direkt mit.
Bevor du das Favicon live schaltest, testest du es in unterschiedlichen Browsern, auf Desktop, Tablet und Smartphone. So erkennst du früh, ob Farben kippen, Kanten fransen oder das Motiv in bestimmten Größen nicht funktioniert. Erst wenn das Favicon überall stimmig wirkt, gehört es auf deine produktive Webseite.
Wie bindest du ein Favicon korrekt in HTML ein?
Damit dein Favicon zuverlässig angezeigt wird, musst du es sauber in den HTML-Code einbinden. Lege zuerst die Datei favicon.ico ins Stammverzeichnis deiner Domain. Viele Browser greifen automatisch auf diese Datei zu. Ergänzend bindest du weitere Varianten im head-Bereich deiner Seite ein, zum Beispiel ein PNG in 32 x 32 Pixeln, ein größeres PNG für Web-Apps und optional ein SVG-Favicon.
Ein typischer Ausschnitt sieht so aus:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
Wichtig ist, dass die Pfade wirklich zu den Dateien auf deinem Server passen und dass alle Icons über HTTPS ausgeliefert werden. Mischst du HTTP- und HTTPS-Inhalte, markieren Browser deine Seite eventuell als unsicher. Wenn dein neues Favicon nicht erscheint, liegt das häufig am Browser-Cache. Ein Cache-Busting-Parameter wie /favicon.ico?v=2 hilft, die aktuelle Version durchzusetzen.
Zusätzlich solltest du prüfen, ob dein Webserver die Dateien korrekt ausliefert und ob die Zugriffsrechte stimmen. Online-Tools wie ein Favicon-Checker zeigen dir, ob Größen, Formate und HTML-Einbindung passen. Eine kleine SEO-Checkliste hilft dir außerdem: mehrere Größen bereitstellen, Dateigrößen schlank halten, das Favicon zwischenspeichern lassen und die Einbindung nach einem Relaunch erneut kontrollieren.
Fazit: Zum Thema Favicon?
Ein Favicon ist winzig, aber für deine Webseite enorm wichtig. Es stärkt die Markenwahrnehmung, erleichtert die Orientierung in Browser-Tabs und kann deine Suchmaschinen-Performance indirekt verbessern. Wenn Design, Formate und Einbindung stimmen, wirkt deine Seite professioneller, bleibt besser im Gedächtnis und hebt sich klar von Webseiten ab, die noch mit einem austauschbaren Standard-Symbol unterwegs sind.