Beste Favicon-Größen für Websites

Ein favicon wird auf viele physische Pixel skaliert: 16×16 in einem Tab, 32×32 auf einer Retina-Lesezeichenleiste, 180×180 auf einem iPhone-Startbildschirm, 512×512 auf einem PWA-Begrüßungsbildschirm. Ein Bild kann nicht allen gerecht werden. Verwenden Sie unseren [favicon-Generator](Tool:favicon-Generator), [PNG-zu-ICO-Konverter](Tool:png-to-ico), [SVG-zu-ICO-Konverter](Tool:svg-to-ico) und [Live-favicon-Tester](Dienstprogramm:favicon-Tester), um Ihren Icon-Satz zu erstellen und zu überprüfen, und lesen Sie den Begleiter guide für eine komprimierte Komplettlösung.

Das Hochskalieren einer winzigen Quelle führt zu Unschärfe. Beim Herunterskalieren einer detaillierten Auflösung von 1024 x 1024 ohne Tests gehen feine Linien verloren. Der Fix besteht aus einem kleinen Satz speziell entwickelter Exporte oder einem .ico in mehreren Größen, der die gängigen Desktop-Frames einbettet.

Der Versand jeder Größe, die in alten Blogbeiträgen aufgeführt ist, ist verschwenderisch. Zu wenig Versand hinterlässt eine sichtbare Lücke auf einer Plattform. Die folgende Matrix spiegelt reale Anfragen wider, die in 2026 Browsern gemessen wurden.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Desktop-Registerkarten rendern normalerweise ein 16×16 CSS Pixel großes Symbol, das je nach Anzeigedichte 16×16 oder 32×32 Gerätepixeln entspricht.

Lesezeichenleisten und angeheftete Tabs verwenden oft 32×32 oder 48×48. Chromium wählt möglicherweise automatisch den nächstgelegenen eingebetteten Frame von favicon.ico aus.

Alle drei gängigen Tab-Größen (16, 32, 48) passen bequem in einen einzigen .ico in mehreren Größen. Aus diesem Grund bleibt der .ico-Container das effizienteste Desktop-Bereitstellungsformat.

Windows Startmenü, Taskleisten-Pins und Datei-Explorer-Verknüpfungen erfordern möglicherweise 24×24, 32×32, 48×48, 64×64, 128×128 oder 256×256, je nach Kontext und Anzeigeskalierung.

Microsoft dokumentiert 16, 24, 32, 48, 64, 128 und 256 als praktisches Set für Windows-Apps. Web-favicons profitieren von der Bündelung von mindestens 16 bis 256 in favicon.ico.

macOS bevorzugt .icns für native Apps, nutzt aber gerne .ico und PNG für Webverknüpfungen. iOS ignoriert .ico für Startbildschirmsymbole und möchte ein dediziertes 180×180 PNG über das Apple-Touch-Symbol.

Für Web-App-Manifeste sind Symbole mit beliebigem Zweck und optionaler Maskierung erforderlich. Gängige Größen sind 192×192 und 512×512 PNG.

Android Chrome verwendet Manifestsymbole für die Installationsoberfläche und Begrüßungsbildschirme. Eine 512×512-Quelle lässt sich sauber herunterskalieren; Ein Manifest nur in 192×192 sieht auf High-End-Telefonen weich aus.

iOS liest keine Manifestsymbole für die Platzierung auf dem Startbildschirm. Sie müssen <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> deklarieren.

16×16 – Browser-Registerkarten (1× Dichte). 32×32 – Registerkarten und Lesezeichen auf Retina-Displays. 48×48 – einige Windows-UI-Kontexte und veraltete Lesezeichenverwendungen.

64×64 und 128×128 – Windows-Verknüpfungen bei höherer Skalierung. 256×256 – Windows angeheftete Kacheln und Vorschauen mit hoher DPI.

180×180 – Apple-Touch-Symbol (iOS / iPadOS). 192×192 und 512×512 – PWA-Manifestsymbole für Android und Installationsaufforderungen.

Persönlicher Blog: favicon.ico nur mit 16/32/48. Akzeptabel, wenn Sie sich nicht für die Politur des iOS-Startbildschirms interessieren.

Unternehmensmarketingseite: .ico-Bundle plus 180×180 Apple-Touch-Icon plus 32×32 PNG <Link> für explizite Retina-Tabs.

Installierbares PWA: vollständiges .ico, Apple-Touch-Icon, Manifest 192 + 512, optionales SVG für skalierbares UI-Chrome.

Electron-Desktop-App: Windows .ico mit 16–256; macOS .icns separat, wenn Sie außerhalb des Browsers verteilen.

Mehrere Größen favicon.ico (16, 32, 48, 64, 128, 256) bei /favicon.ico.

apple-touch-icon.png bei 180×180 für iOS-Startbildschirme.

Ein 512×512 PNG in site.webmanifest für Android-Installationsflächen.

Dieses Trio deckt etwa 95 % der realen Icon-Anfragen ab. Fügen Sie SVG hinzu, wenn Sie in modernen Tabs eine unbegrenzte Skalierung und einen Dark-Mode-Stil wünschen.

Benötige ich ein 16×16 PNG, wenn es sich im .ico befindet? Nein, es sei denn, Sie möchten ein explizites <link rel="icon" sizes="16x16"> zum Debuggen.

Ist 120×120 noch erforderlich? Das war eine alte iOS-Größe. Modernes Safari erwartet 180×180.

Was ist mit 64×64 favicons? Nützlich innerhalb von .ico für Windows; Wird selten als eigenständiges PNG benötigt.

Kann ich 256×256 überspringen? Nur wenn Sie sich nie für Windows-Shortcut-Vorschauen mit hoher DPI interessieren. Die meisten Teams enthalten es.

Das iOS-Symbol hat abgerundete Ecken und sieht abgeschnitten aus: Das ist iOS-Maskierung – Design mit sicherer Auffüllung, kein Fehler in Ihrer Datei.

Bei der Installation von PWA wird ein generisches Symbol angezeigt: Manifestsymbole fehlen oder sind kleiner als 192 x 192. Validieren Sie JSON mit Chrome DevTools → Anwendung.

Tab-Symbol weich auf Retina Mac: Stellen Sie sicher, dass favicon.ico einen 32×32-Rahmen enthält, nicht nur 16×16.

Riesiger .ico-Download: Sie haben unkomprimiertes 256×256 BMP eingebettet. Mit PNG-Komprimierung im Container neu erstellen.

CSS-Pixel sind keine physischen Pixel. Ein 16×16-Tab-Slot auf einem 2×-Display lädt aus Gründen der Schärfe häufig eine 32×32-Bitmap.

Aus diesem Grund übertrifft ein favicon.ico mit 16 und 32 Frames einen einzelnen 16×16 PNG auf Retina MacBooks und Windows-Laptops mit hoher DPI.

Android PWAs zeigen Manifestsymbole auf Begrüßungsbildschirmen bei voller Geräteauflösung an – eine 192×192-Quelle, die auf ein 1440p-Telefon gestreckt wird, sieht weich aus; 512×512 lässt sich sauber herunterskalieren.

iOS wendet seine eigene Maske und seinen eigenen Eckenradius auf Apple-Touch-Icon-Assets an. Design mit sicherer Polsterung, damit wichtige Kanten nicht durch den Kreis eingeklemmt werden.

Machen Sie beim Testen einen Screenshot der Registerkarte mit 100 % Browser-Zoom und 200 % Betriebssystemskalierung. Wenn beide scharf aussehen, ist Ihre Größenmatrix wahrscheinlich korrekt.

Laden Sie favicon.ico herunter und öffnen Sie es in einem Tool, das eingebettete Frames auflistet. Bestätigen Sie, dass 16, 32, 48 und mindestens ein großer Rahmen vorhanden ist.

Rufen Sie apple-touch-icon.png ab und überprüfen Sie die Abmessungen in einem beliebigen Bildinspektor – erwarten Sie 180×180, nicht 120×120 aus veralteten Vorlagen.

Öffnen Sie site.webmanifest und überprüfen Sie, ob die Symbole [] 192×192 und 512×512 mit korrekten Pfaden und Bild-/PNG-Typen enthalten.

Laden Sie Ihre Site in Chrome DevTools → Anwendung → Manifest. Bei fehlenden oder ungültigen Einträgen werden Warnungen angezeigt, bevor Benutzer jemals einen fehlerhaften Installationsdialog sehen.

Führen Sie eine Tabelle, die jede Datei ihrem Verbraucher zuordnet (Registerkarte, iOS, PWA, Windows). Zukünftig müssen Sie den Asset-Ordner bei einem Rebranding nicht mehr umgestalten.

Neue Geräteklassen erscheinen langsam im favicon-Land. 512×512 Manifest-Symbole decken heute die Benutzeroberflächen für die Installation von faltbaren Geräten und Tablets besser ab als 192 allein.

Vermeiden Sie exotische Größen (96×96, 120×120), es sei denn, ein bestimmtes Plattformdokument schreibt sie noch vor – sie erhöhen den Autorenaufwand ohne breiten Nutzen.

Speichern Sie den Master-Vektor oder das 1024×1024-Raster in Ihrem Design-Repository, auch wenn Sie es nie versenden. Zukünftige Plattformen erfordern möglicherweise größere Manifestsymbole.

Automatisieren Sie die Neugenerierung vom Master, sodass Sie beim Erscheinen einer neuen empfohlenen Größe ein Skript erneut ausführen können, anstatt es manuell in Photoshop zu exportieren.