Favicon-Größen, -Formate und HTML-Tags
Ein Favicon ist eine kleine Datei, doch Browser, Smartphones und installierte Web-Apps suchen jeweils nach anderen Größen. Diese Anleitung erklärt, welche Dateien eine Website braucht, wie Sie sie in HTML angeben und wie Sie ein Icon gestalten, das auch bei 16 Pixeln erkennbar bleibt.
Was ein Favicon ist
Ein Favicon (kurz für „Favoriten-Icon“) ist das kleine Bild, das eine Website in Tabs, Lesezeichen und im Verlauf kennzeichnet. Smartphones verwenden eine größere Version, wenn die Website zum Startbildschirm hinzugefügt wird, installierte Web-Apps nutzen Icons aus ihrem Manifest, und manche Suchmaschinen zeigen das Favicon neben den Ergebnissen an. Weil diese Stellen unterschiedliche Größen verwenden, stellt eine Website meist einen kleinen Satz von Dateien bereit.
ICO-, PNG- und SVG-Favicons
| Format | Inhalt | Gut zu wissen |
|---|---|---|
ICO (favicon.ico) |
Mehrere Größen in einer Datei, oft 16, 32 und 48 Pixel | Das älteste Format. Viele Browser fragen /favicon.ico im Stammverzeichnis der Website ab, auch wenn die Seite nicht darauf verlinkt. Es ist daher ein nützlicher Fallback. |
| PNG | Eine Größe pro Datei, mit Transparenz | Wird mit einem sizes-Attribut angegeben, damit der Browser eine passende Datei auswählen kann. Wird auch für das Apple-Touch-Icon und die Manifest-Icons verwendet. |
| SVG | Eine Vektorzeichnung, die sich auf jede Größe skalieren lässt | Wird von den meisten aktuellen Desktop-Browsern unterstützt, aber nicht von jedem Browser. Behalten Sie daher auch ICO- oder PNG-Dateien. Ein SVG-Favicon kann sich per CSS an ein dunkles Design anpassen. |
Eine ICO-Datei ist ein kleiner Container: Ein Header listet jedes Bild mit Größe und Position auf, und die Bilder können als PNG-Daten gespeichert sein. Der Favicon-Generator von LeedyBox schreibt eine favicon.ico mit PNG-Bildern in 16, 32 und 48 Pixeln sowie PNG-Dateien für die übrigen Größen.
Gängige Größen und wo sie verwendet werden
| Größe (Pixel) | Typische Datei | Typische Verwendung |
|---|---|---|
| 16 × 16 | favicon-16x16.png, in favicon.ico | Tabs und Lesezeichen auf Standardbildschirmen |
| 32 × 32 | favicon-32x32.png, in favicon.ico | Tabs auf Bildschirmen mit hoher Pixeldichte, manche Verknüpfungen |
| 48 × 48 | in favicon.ico | Größere Verknüpfungs- und Desktop-Icons auf manchen Systemen |
| 180 × 180 | apple-touch-icon.png | Icon auf dem Home-Bildschirm von iPhone und iPad |
| 192 × 192 | android-chrome-192x192.png | Icon auf dem Startbildschirm unter Android, im Manifest aufgeführt |
| 512 × 512 | android-chrome-512x512.png | Installationsdialoge und Startbildschirme (Splash Screens) von Web-Apps |
Beginnen Sie mit einer quadratischen Vorlage von mindestens 512 × 512 Pixeln oder mit einer SVG-Datei. Eine kleine Vorlage muss für die größeren Icons vergrößert werden und wirkt dann unscharf. Ein nicht quadratisches Logo braucht zusätzlichen Rand oder muss zugeschnitten werden.
Das Apple-Touch-Icon sollte nicht transparent sein: Manche Apple-Geräte zeigen transparente Bereiche schwarz an. Füllen Sie den Hintergrund stattdessen mit einer Farbe. iPhone und iPad runden die Ecken selbst ab, die Datei kann also ein einfaches Quadrat sein. Hintergrundwissen zu Alphakanälen finden Sie unter Transparenz in PNG und JPG.
Die HTML-Tags und das Web-App-Manifest
Legen Sie die Dateien im Stammverzeichnis der Website ab und fügen Sie diese Tags in den <head> jeder Seite ein:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Wenn Sie auch ein SVG-Favicon haben, ergänzen Sie <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Das Manifest (site.webmanifest) ist eine kleine JSON-Datei mit dem Namen der Website, einem Kurznamen, den Icons mit 192 und 512 Pixeln, einer Designfarbe, einer Hintergrundfarbe und einem Anzeigemodus wie standalone. Liegen die Dateien in einem anderen Ordner, passen Sie jeden Pfad in den Tags und im Manifest an.
Gestaltung für winzige Größen
- Halten Sie es einfach. Bei 16 Pixeln werden dünne Linien, kleiner Text und feine Details zu Unschärfe. Ein vereinfachtes Zeichen, eine einzelne Form oder ein bis zwei Buchstaben funktionieren besser als ein vollständiges Logo mit Slogan.
- Setzen Sie auf starken Kontrast. Ein deutlicher Helligkeitsunterschied zwischen Icon und Hintergrund ist wichtiger als exakte Markenfarben.
- Verwenden Sie wenig Innenabstand. Leerraum verkleinert das sichtbare Icon. Ein kleiner Rand kann größeren Icons guttun, kleine Favicons sind aber leichter zu erkennen, wenn sie den Großteil des Quadrats ausfüllen.
- Prüfen Sie die echte Größe. Sehen Sie sich das Icon bei 100 % Zoom in einem Tab an, nicht nur als vergrößerte Vorschau.
Dunkle Browser-Designs
Viele Menschen verwenden eine dunkle Tableiste. Ein dunkles Logo auf transparentem Hintergrund kann dort fast verschwinden, und ein weißes Logo kann in einem hellen Design untergehen. Übliche Lösungen sind eine volle oder abgerundete Hintergrundform hinter dem Logo, eine helle Kontur oder ein SVG-Favicon, das seine Farben mit einer prefers-color-scheme-Media-Query ändert (wo SVG-Favicons unterstützt werden). Der LeedyBox-Generator zeigt eine helle und eine dunkle Tableiste, damit Sie beide vergleichen können.
Favicon aktualisieren und Browser-Caching
Browser speichern Favicons im Cache, manchmal lange, daher erscheint ein neues Icon nach dem Hochladen womöglich nicht sofort. Ein vollständiges Neuladen (Hard Refresh) oder ein privates Fenster kann die neue Version zeigen. Damit wiederkehrende Besucher sie früher abrufen, ändern Sie den Dateinamen oder ergänzen Sie in Ihren Tags eine Version in der URL, zum Beispiel /favicon-32x32.png?v=2. Icons in Lesezeichen und Suchergebnissen können länger brauchen, bis sie aktualisiert werden. Testen Sie nach jeder Änderung das Ergebnis in den Browsern und auf den Geräten, die für Sie wichtig sind.
Häufige Fragen
Wird favicon.ico noch gebraucht?
Die Datei ist nicht erforderlich, aber ein einfacher Fallback: Viele Browser und andere Tools suchen im Stammverzeichnis einer Website nach /favicon.ico. Sie kostet nur wenige Kilobyte.
Kann ich ein JPG als Favicon verwenden?
Browser können es meist anzeigen, doch JPG kennt keine Transparenz, und seine Komprimierung kann kleine Details verwischen. PNG-, ICO- oder SVG-Dateien eignen sich besser für Icons.
Warum wird mein neues Favicon nicht angezeigt?
Meist ist noch das alte Icon im Cache, oder die Pfade in den HTML-Tags stimmen nicht mit dem Speicherort der hochgeladenen Dateien überein. Öffnen Sie die URL jeder Datei direkt im Browser, um zu prüfen, ob sie geladen wird.