Favicon: Website Icon im Browser erstellen und einbinden

Ein Website Icon, fachlich Favicon genannt, ist das kleine quadratische Symbol, das ein Browser im Tab, in der Adresszeile und in den Lesezeichen neben dem Namen einer Website anzeigt; auch Google zeigt es in den Suchergebnissen. Eingebunden wird es mit einer Zeile <link rel="icon"> im HTML-Kopf, heute meist als Kombination aus favicon.ico, einer SVG-Datei und einem 180 × 180 Pixel großen Apple Touch Icon.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Website-Icon, Webseiten-Icon, Browser Icon, Tab Icon, Shortcut Icon, Site Icon (WordPress), Apple Touch Icon (iOS-Variante)

Was ist ein Favicon?

Das Wort „Favicon“ setzt sich aus „Favorite“ und „Icon“ zusammen. Microsoft führte es 1999 mit dem Internet Explorer 5 ein: Speicherte man eine Seite in den „Favoriten“, suchte der Browser im Hauptverzeichnis der Website nach einer Datei favicon.ico und zeigte sie neben dem Lesezeichen an. Heute heißt das Symbol in vielen Programmen schlicht Website Icon oder Webseiten-Icon, in WordPress „Website-Icon“.

Wer viele Tabs geöffnet hat, erkennt Seiten vor allem am Browser Icon, weil die Tab-Titel abgeschnitten werden. Ein fehlendes Favicon zeigt stattdessen ein neutrales Standardsymbol, das wenig professionell wirkt. Google blendet das Website Icon in den Suchergebnissen neben dem Seitennamen ein. Damit wird das kleine Symbol Teil des ersten Eindrucks, noch bevor jemand die Seite öffnet.

Wo erscheint das Website Icon?

Welche Größen und Formate braucht ein Favicon?

Früher wurden Dutzende Dateien für jedes Gerät empfohlen. Andrey Sitnik von Evil Martians hat gezeigt, dass für fast alle Websites drei Dateien plus ein optionales Manifest genügen (Stand: November 2026):

Formate im Vergleich:

• ICO: das älteste Format, kann mehrere Pixelgrößen in einer Datei bündeln und wird praktisch überall verstanden. Nachteil: pixelbasiert und ohne Dark-Mode-Variante.
• PNG: verlustfrei, mit Transparenz, Standard für Apple Touch Icon und PWA-Icons.
• SVG: vektorbasiert und klein. Über die CSS-Abfrage prefers-color-scheme kann das Icon automatisch zwischen heller und dunkler Variante wechseln. Chrome und Edge unterstützen SVG-Favicons seit Version 80, Firefox seit Version 41, Safari laut caniuse.com erst seit Version 26 (2025). Ein ICO-Fallback bleibt deshalb sinnvoll.

Favicon im HTML einbinden

Die schlanke Variante für die meisten Websites sieht so aus:

``html <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- nur für Progressive Web Apps: --> <link rel="manifest" href="/manifest.webmanifest"> ``

Die Zeilen gehören in den <head> jeder Seite. sizes="32x32" beim ICO sorgt dafür, dass Browser mit SVG-Unterstützung das SVG bevorzugen. Die Datei favicon.ico sollte zusätzlich im Hauptverzeichnis liegen, weil manche Programme sie dort ohne Link-Tag suchen.

Website Icon in WordPress festlegen

WordPress nennt das Favicon „Website-Icon“ (englisch Site Icon) und erzeugt die nötigen Größen selbst:

1. Ein quadratisches Bild mit mindestens 512 × 512 Pixeln vorbereiten, empfohlen ist PNG.
2. Ab WordPress 6.5: Einstellungen > Allgemein > Website-Icon wählen und das Bild hochladen.
3. In älteren Versionen (4.3 bis 6.4): Design > Customizer > Website-Informationen > Website-Icon.
4. Speichern und die Seite in einem privaten Browserfenster prüfen, weil der normale Browser das alte Icon oft noch zwischenspeichert.

Baukastensysteme wie Wix, Jimdo oder Squarespace bieten vergleichbare Felder in den Website-Einstellungen.

Favicon für Google: was muss man beachten?

Google Search Central nennt für das Favicon in den Suchergebnissen klare Regeln:

• Das Icon muss quadratisch sein, mindestens 8 × 8 Pixel; empfohlen sind mehr als 48 × 48 Pixel.
• Es wird über rel="icon" (oder das ältere rel="shortcut icon"), rel="apple-touch-icon" oder rel="apple-touch-icon-precomposed" im Kopf der Startseite angegeben. Startseiten in Unterverzeichnissen wie example.com/news werden nicht unterstützt.
• Startseite und Icon-Datei dürfen für den Googlebot nicht per robots.txt gesperrt sein.
• Pro Website, definiert über den Hostnamen, unterstützt Google nur ein Favicon.
• Nach einer Änderung kann das Crawlen einige Tage bis mehrere Wochen dauern. Über das URL-Prüftool der Search Console lässt sich eine Indexierung beantragen.

Gestaltung: Was macht ein gutes Website Icon aus?

Ein Favicon muss bei 16 × 16 Pixeln erkennbar sein. Komplette Logos mit Schriftzug oder feinen Linien werden auf dieser Fläche zu Pixelbrei. Bewährt haben sich:

• ein einzelner, kräftiger Buchstabe der Marke,
• eine stark vereinfachte Bildmarke ohne Wortmarke,
• eine markante Kombination aus Farbe und Form mit hohem Kontrast.

Das Icon sollte auf hellen und dunklen Browser-Oberflächen funktionieren. Transparente Icons mit dunkler Farbe verschwinden im Dark Mode; hier hilft eine SVG-Variante mit prefers-color-scheme oder ein farbiger Hintergrund. Die Web Accessibility (Barrierefreiheit) profitiert, wenn Formen eindeutig und Farben kontrastreich sind.

Beispiele

• Google: das mehrfarbige „G“, auch in 16 Pixeln eindeutig.
• YouTube: das rote Play-Symbol ohne Schriftzug.
• Wikipedia: ein einzelnes „W“ in Serifenschrift, ein klassisches Buchstaben-Icon.
• GitHub: die Silhouette der Octocat, die auf hellen wie dunklen Flächen funktioniert.
• Kleine Unternehmen: Der Anfangsbuchstabe in der Hausfarbe auf quadratischer Fläche ist die einfachste Lösung, wenn das Logo zu detailreich ist.

In der Praxis

Favicons lassen sich mit Generatoren wie RealFaviconGenerator aus einer Quelldatei erzeugen; idealerweise ist das eine SVG oder ein PNG mit mindestens 512 × 512 Pixeln. Der Workflow: Icon vereinfachen, in 16 und 32 Pixeln am Bildschirm testen, Dateien erzeugen, ins Hauptverzeichnis legen, Link-Tags einbinden, in mehreren Browsern und auf dem Smartphone prüfen.

Caching: Browser speichern Favicons hartnäckig. Nach einem Wechsel hilft ein Test im privaten Fenster, ein harter Reload (Strg+Umschalt+R, am Mac Cmd+Umschalt+R) oder ein neuer Dateiname im Link-Tag.

Vergleich & Abgrenzung

Das App Icon einer nativen App wird im App Store eingereicht, das Favicon kommt von der Website selbst. Bei Progressive Web Apps verschwimmt die Grenze: Das im Manifest definierte Icon erscheint wie ein App Icon auf dem Homescreen. Mehr dazu unter App Icon Design.

Häufige Fragen

Was ist ein Website Icon? Ein Website Icon ist das kleine Symbol einer Website im Browser-Tab, in Lesezeichen und in Google-Suchergebnissen. Der Fachbegriff dafür ist Favicon. Es wird als kleine Bilddatei im Hauptverzeichnis abgelegt und im HTML-Kopf verlinkt.

Welche Größe braucht ein Favicon? Für die meisten Websites genügen ein favicon.ico in 32 × 32 Pixeln, eine skalierbare SVG-Datei und ein Apple Touch Icon in 180 × 180 Pixeln. Für Progressive Web Apps kommen PNG-Icons in 192 × 192 und 512 × 512 Pixeln hinzu. Für Google sollte das Icon größer als 48 × 48 Pixel und quadratisch sein.

Wie ändere ich das Browser Icon meiner Website? Neue Datei erstellen, die alte im Hauptverzeichnis ersetzen oder unter neuem Namen hochladen und den Link-Tag im <head> anpassen. In WordPress geht das ab Version 6.5 unter Einstellungen > Allgemein > Website-Icon. Danach im privaten Browserfenster prüfen, weil das alte Icon oft im Cache bleibt.

Warum zeigt Google mein Favicon nicht an? Häufige Ursachen sind ein nicht quadratisches Bild, ein Icon nur auf Unterseiten statt auf der Startseite, eine Sperre in robots.txt oder eine kürzliche Änderung, die Google noch nicht verarbeitet hat. Das Neuverarbeiten kann Tage bis Wochen dauern.

Muss ein Favicon quadratisch sein? Ja. Browser, Betriebssysteme und Google erwarten ein Seitenverhältnis von 1:1. Betriebssysteme können das Icon anschließend rund oder mit abgerundeten Ecken darstellen, die Quelldatei bleibt aber quadratisch.

Verwandte Einträge

• Web Design Grundlagen
• Web Accessibility (Barrierefreiheit)
• Landing Page, zielgerichtete Einzelseiten im Marketing
• App Icon Design
• User Interface (UI)
• Responsive Design
• Gestaltgesetze

Weiterführend

• Sitnik, Andrey (2026): How to Favicon in 2026: Three files that fit most needs. Evil Martians. evilmartians.com
• Google (2026): Define a favicon to show in search results. Google Search Central. developers.google.com
• WordPress.org (2025): Create a Favicon. wordpress.org/documentation
• Deveria, Alexis (2026): SVG favicons. caniuse.com/link-icon-svg
• RealFaviconGenerator: A brief history of favicon. realfavicongenerator.net
• MDN Web Docs (2026): rel="icon" und Web app manifest: icons. developer.mozilla.org.
• WHATWG (2026): HTML Living Standard, Abschnitt „Link type icon“. html.spec.whatwg.org.