Ratgeber
Favicon-Größen: welche Größen und Formate du brauchst
Ein Favicon erscheint in vielen Größen, vom Browser-Tab mit 16 Pixeln bis zum App-Icon mit 512 Pixeln. Dieser Ratgeber listet die Größen, auf die es ankommt, und zeigt, wie du sie einbindest.
Favicon-Größe für die Website: die Kurzliste
| Größe | Datei | Wo sie verwendet wird |
|---|---|---|
| 16 × 16 px | favicon.ico | Browser-Tabs und Lesezeichen |
| 32 × 32 px | favicon.ico | Tabs auf hochauflösenden Bildschirmen, Windows-Verknüpfungen |
| 48 × 48 px | favicon.ico | Windows und Suchergebnisse bei Google |
| 180 × 180 px | apple-touch-icon.png | Home-Bildschirm auf iPhone und iPad |
| 192 × 192 px | icon-192.png | Android und installierte Web-Apps |
| 512 × 512 px | icon-512.png | Startbildschirme und App-Stores für Web-Apps |
Eine favicon.ico mit 16, 32 und 48 px plus die drei PNG-Dateien decken Browser, Smartphones und Suchmaschinen ab. Unser Favicon-Generator erstellt sie alle aus einem einzigen Bild.
Favicon-Größe in Pixeln für Google
Google zeigt Favicons neben den Suchergebnissen an. Die Richtlinien verlangen ein quadratisches Favicon von mindestens 8 × 8 Pixeln und empfehlen eines, das größer als 48 × 48 Pixel ist, damit es auf verschiedenen Oberflächen gut aussieht (Google Search Central). Eine favicon.ico mit einem Bild in 48 px oder ein verlinktes PNG in 192 px erfüllt diese Empfehlung.
Favicon-Formate: ICO, PNG und SVG
- ICO enthält mehrere Größen in einer Datei und wird von Browsern unter
/favicon.icoabgerufen, wenn kein Icon angegeben ist. Behalte eine für die Kompatibilität. - PNG wird für das Apple Touch Icon und für die App-Icons im Web-Manifest verwendet.
- SVG funktioniert in modernen Browsern als Favicon und bleibt in jeder Größe scharf. Binde es als zusätzliches Icon ein, nicht als einziges.
Um ein vorhandenes PNG in eine .ico-Datei mit den gewünschten Größen umzuwandeln, nimm den Konverter PNG in ICO.
Favicon in HTML einbinden
Lade die Dateien ins Stammverzeichnis deiner Website hoch und füge diese Tags in den <head> ein:
<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">
<link rel="manifest" href="/manifest.webmanifest">Das Manifest listet die Icons in 192 und 512 px. Lass die SVG-Zeile weg, wenn du keine SVG-Version hast.
Favicon-Größe bei WordPress, Shopify und Squarespace
Website-Baukästen verlangen ein einziges Bild und erzeugen die Größen selbst. WordPress nennt es Website-Icon und verlangt ein quadratisches Bild von mindestens 512 × 512 Pixeln. Auch Shopify und Squarespace nehmen in ihren Marken- oder Design-Einstellungen ein quadratisches Bild an. Lade ein großes, quadratisches PNG hoch, lass die Plattform es skalieren und prüf das Ergebnis danach in einem Browser-Tab.