Favicon-Größen: Welche Sie 2025 wirklich brauchen

Wenn Sie nach "favicon size" suchen, bekommen Sie eine Fülle widersprüchlicher Zahlen: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Die meisten dieser Listen wurden vor einem Jahrzehnt geschrieben und nie aktualisiert. In der Praxis benötigt eine moderne Website etwa vier Dateien, und Sie können alle in einem Durchgang mit dem Favicon-Generator erstellen – er läuft vollständig in Ihrem Browser, daher verlässt Ihr Logo Ihre Maschine nie.

Hier ist, wofür jede Größe eigentlich ist und was Sie getrost überspringen können.

Die Größen, die noch wichtig sind

16x16 und 32x32 – Browser-Tabs und Lesezeichen

Das ist das klassische Favicon. 16x16 ist das, was Sie in einem vollen Tab-Streifen sehen; 32x32 wird auf hochauflösenden Bildschirmen, der Lesezeichen-Leiste und einigen Adressleisten-UIs verwendet. Beide werden traditionell in einer einzigen favicon.ico-Datei gebündelt, die mehrere Auflösungen gleichzeitig enthalten kann. Windows zieht auch 48x48 aus derselben .ico für Desktop-Verknüpfungen, daher kostet das Einbeziehen fast nichts.

180x180 – Apple Touch Icon

Wenn jemand auf einem iPhone oder iPad auf "Zum Home-Bildschirm hinzufügen" tippt, sucht Safari nach apple-touch-icon.png in 180x180. Wenn es nicht vorhanden ist, erstellt iOS einen Screenshot Ihrer Seite und verwendet diesen stattdessen, was schrecklich aussieht. Dieses eine PNG deckt alle aktuellen iOS-Geräte ab, da das System bei Bedarf herunterskaliert.

192x192 und 512x512 – Android und PWAs

Android Chrome und installierbare Web-Apps lesen Icons aus Ihrer site.webmanifest. 192 ist das Home-Screen-Icon; 512 wird für den Splash-Screen und App-Listen verwendet. Wenn Sie möchten, dass Ihre Website installierbar ist, benötigen Sie beide.

SVG – optional, aber schön

Firefox und Chrome unterstützen beide ein SVG-Favicon, das bei jeder Größe scharf bleibt und mit einer Media Query in der Datei auf den dunklen Modus reagieren kann. Es ist ein Bonus, kein Ersatz – Safari und ältere Browser benötigen weiterhin die Raster-Versionen.

Was Sie überspringen können

64x64, 96x96, 128x128, die gesamte Reihe von Windows-Kachel-Bildern und die Dutzende von alten apple-touch-icon-76x76-Dateien. Sie wurden für Geräte benötigt, die größtenteils verschwunden sind. Das Versenden von zwanzig Icon-Dateien bläht Ihr Repository auf und bringt Ihnen keinen messbaren Gewinn.

Das HTML

Legen Sie die Dateien in Ihr Site-Root-Verzeichnis und fügen Sie dies zu <head> hinzu:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Und in das Manifest:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Design für 16 Pixel

Der schwierige Teil ist nicht der Export, sondern dass ein vollständiges Logo bei 16x16 zu Matsch wird. Ein paar Dinge, die helfen:

• Verwenden Sie ein Fragment, nicht das ganze Logo. Ein Buchstabe, ein Glyphe, eine Form. Wort-Marken sind in der Tab-Größe unleserlich.
• Beginnen Sie quadratisch. Wenn Ihre Quelle ein breites Logo ist, schneiden Sie es zunächst zu einem Quadrat zu, damit der Generator es nicht mit leerem Raum letterboxed.
• Halten Sie den Kontrast hoch. Dünne Umrisse verschwinden. Feste Formen überstehen.
• Entscheiden Sie sich für den Hintergrund. Ein transparentes PNG passt sich an helle und dunkle Browser-Chrome an; wenn Ihre Marke dunkel ist, geben Sie ihr stattdessen eine feste Farbfläche. Sie können den Hintergrund aus einem Logo-Screenshot in Sekunden entfernen, wenn Sie nur ein flaches JPG haben.
• Beachten Sie den sicheren Bereich. Android maskiert Icons in Kreise und Squircles, also lassen Sie ungefähr 10% Polsterung um den Rand Ihrer 512er-Grafik.

Wenn Sie den Hintergrund des Favicons an die Markenfarbe Ihrer Website anpassen, zieht der Bild-Farbwähler das exakte Hex aus einem vorhandenen Screenshot – praktisch auch für den theme-color-Meta-Tag.

Generieren Sie den gesamten Satz auf einmal

Laden Sie nichts hoch: Legen Sie ein quadratisches PNG oder SVG in den kostenlosen Browser-basierten Favicon-Generator ab und er produziert die .ico, das Apple Touch Icon und die 192/512 PNGs lokal, in Ihrem eigenen Tab. Nichts wird an einen Server gesendet, es gibt keine Anmeldung, und es wird keine Kopie Ihres unveröffentlichten Logos in jemand anderem's Speicherbucket abgelegt.

Zoomen Sie dann Ihren Browser heraus, schauen Sie sich den Tab an und stellen Sie die einzige Frage, die wichtig ist: Können Sie erkennen, was es ist?