Favicon-Größen und ICO-Dateien: Was in einem Favicon.ico steckt

Most favicon ratschläge ist eine Liste von einem Dutzend PNG-Größen, die von einem Generator kopiert wurden, der 2014 geschrieben wurde Die meisten dieser Größen bringen nichts mehr Was eine Seite heute braucht, ist kurz: eine favicon.ico Für die Browser und Tools, die noch danach suchen, ein skalierbares oder hochauflösendes Icon für alles Moderne, und ein Touch-Icon für Telefone Der Teil, der die Leute auf die Probe stellt, ist der ico selbst, denn es ist kein Bild mit einer ungeraden Erweiterung Es ist ein kleiner Container, der mehrere Bilder enthält.

Diese Anleitung behandelt, wie eine ICO-Datei aufgebaut ist, welche Größen in ein Favicon.ico gehören und warum, welche anderen Symboldateien eine Website daneben benötigt und welche Fehler ein Symbol in einem Browser-Tab weich oder unlesbar aussehen lassen. Es befindet sich unter der Bildwerkzeuge Hub, und jede für den Toolz-Konverter angegebene Größe stammt aus seinem Quellcode.

tl; dr: Eine ICO-Datei ist ein Container: ein kurzes Verzeichnis gefolgt von mehreren quadratischen Bildern, eines pro Größe, aus dem der Browser oder das Betriebssystem die nächstgelegene Übereinstimmung auswählt, für ein favicon.ico 16, 32 und 48 px einschließen, und 256 px hinzufügen, wenn dieselbe Datei gleichzeitig als Windows-Icon dient Jeder Eintrag kann höchstens 256 x 256 Pixel aufnehmen, neben ihm ein SVG - oder großes PNG-Icon und ein 180 x 180 deklarieren apple-touch-icondrohen der PNG-zu-ICO-Wandler Schreibt 16, 32, 48 und 256 px Einträge als PNG mit Transparenz, clientseitig, nichts hochgeladen, kostenlos, keine Anmeldung.

Was ist eine ICO-Datei?

Eine ICO-Datei ist das Windows-Symbolformat: ein Header, ein Verzeichnis, in dem jedes Bild darin aufgeführt ist, und die Bilddaten für jeden Eintrag Microsoft hat das Layout in seinem dokumentiert Fachartikel Icons, und es ist das Format für Windows-Programm, Verknüpfung und Ordner-Icons seit den ersten Versionen von Windows Browser haben es für Favicons in den späten 1990 er Jahren übernommen, weshalb die Datei auf den meisten Websites immer noch aufgerufen wird favicon.icodrohen

Das Verzeichnis unterscheidet es von einem PNG oder JPG. Software, die ein Symbol mit 16 Pixeln benötigt, liest das Verzeichnis, findet den Eintrag am nächsten bei 16 und zeichnet diesen ein Ein Tab, eine Lesezeichenliste, eine Taskleiste und eine Desktop-Verknüpfung können jeweils ein anderes Bild aus derselben Datei aufnehmen. Dadurch kann ein Designer eine vereinfachte Markierung für die winzigen Größen und eine detaillierte Markierung für die großen Größen bereitstellen, anstatt überall ein einzelnes Bild skalieren zu lassen.

Das Format wird von zwei Medientypen unterschieden. IANA-Listen image/vnd.microsoft.icon, während die meisten Server und Browser ältere verwenden image/x-icon. Beide funktionieren für ein Favicon.

Wie ist eine ICO-Datei aufgebaut?

Eine ICO-Datei startet mit einem 6-Byte-Header, gefolgt von einem 16-Byte-Verzeichniseintrag pro Bild, gefolgt von den Bilddaten Alle Zahlen sind Little-Endian.

ICONDIR (6 bytes)
  reserved      2 bytes   always 0
  type          2 bytes   1 = icon (2 = cursor)
  count         2 bytes   number of images

ICONDIRENTRY (16 bytes, repeated count times)
  width         1 byte    pixels; 0 means 256
  height        1 byte    pixels; 0 means 256
  colorCount    1 byte    palette size; 0 when there is no palette
  reserved      1 byte    0
  planes        2 bytes   1
  bitCount      2 bytes   bits per pixel, e.g. 32
  bytesInRes    4 bytes   size of this image's data
  imageOffset   4 bytes   where this image's data starts in the file

Image data (one block per entry)
  either a BMP-style DIB (without the file header)
  or a complete PNG file

Zwei Details in diesem Layout erklären die meisten verwirrenden Dinge an Symbolen.

Die 256 Pixel große Decke stammt aus einem einzigen Byte. Breite und Höhe werden jeweils in einem Byte gespeichert, das 0 bis 255 aufnehmen kann, das Format verwendet 0 wieder zu bedeuten 256, und es gibt keine Möglichkeit, etwas Größeres auszudrücken Ein 512 x 512 Eintrag kann nicht in einem gültigen ICO existieren, was auch immer ein Generator behauptet.

Einträge können PNG sein. Frühe Symbole speicherten jedes Bild als unkomprimierte Bitmap mit einer separaten 1-Bit-Transparenzmaske. Seit Windows Vista kann ein Eintrag stattdessen eine vollständige PNG-Datei enthalten, die bei großen Größen weitaus kleiner ist und einen richtigen Alphakanal trägt. Ein 256 x 256-Icon, das als unkomprimierte 32-Bit-Bitmap gespeichert ist, ist ungefähr 256 KB groß; das gleiche Bild wie PNG ist normalerweise ein Bruchteil davon.

Der Toolz-Konverter schreibt die moderne Variante Sein ICO-Builder setzt Typ 1, einen Verzeichniseintrag pro Größe mit den Ebenen 1 und 32 Bit pro Pixel, schreibt 256 als 0 und speichert jeden Eintrag als PNG mit seinem Alphakanal, das Abfragen nach einer Größe außerhalb von 1 bis 256 wird abgelehnt, bevor etwas geschrieben wird, denn das Verzeichnis hat keine Möglichkeit, es aufzuzeichnen.

Welche Größe sollte ein Favicon haben?

Ein favicon.ico sollte 16 x 16, 32 x 32 und 48 x 48 Bilder enthalten, und ein 256 x 256 Bild, wenn die Datei auch als Windows-Icon funktionieren soll, über das ico hinaus bevorzugen moderne Browser ein SVG oder ein großes PNG, das mit einem Link-Tag deklariert wurde, und Telefone verwenden ein separates Touch-Icon.

Diese Tabelle ordnet jede Größe dem Ort zu, an dem sie verwendet wird. Das genaue Verhalten variiert je nach Browser, Betriebssystem und Anzeigeskalierung. Behandeln Sie es daher als den üblichen Fall:

Größe	Wo es auftaucht	Benötigt in favicon.ico?
16 x 16	Browser-Tabs, Adressleiste, Lesezeichen auf Standard-Displays	ja
32 x 32	Tabs auf Displays mit hoher Dichte, Windows-Taskleiste und Verknüpfungen	ja
48 x 48	Windows-Desktop-Verknüpfungen, mittlere Symbolansichten; Die Google-Suche empfiehlt, größer zu werden	ja
256 x 256	Windows große und extra große Symbolansichten	Nur wenn es als Windows-Symbol verwendet wird
180 x 180	iPhone und iPad Startbildschirm (apple-touch-icon)	Nein, separates PNG
192 x 192	Android-Home-Screen, Web-App-Manifest	Nein, separates PNG
512 x 512	Web-App-Manifest, Installation und Splash-Bildschirme	Nein, passt nicht in ICO
Beliebig (SVG)	Moderne Browser, die SVG-Symbole unterstützen, einschließlich Varianten des Dark Mode	Nein, separates SVG

Auf Suchergebnisse, Google's Favicon-Richtlinien Fragen Sie nach einem quadratischen Symbol und empfehlen Sie eines, das größer als 48 x 48 Pixel ist, und Google holt es von dem auf Ihrer Startseite deklarierten Symbol ab. Ein Ico, das auf 16 Pixel aufsteigt, ist ein häufiger Grund, warum ein Site's-Symbol neben seinem Suchergebnis verschwommen aussieht.

Welche Favicon-Dateien benötigt eine Seite?

Eine Seite benötigt drei Icon-Dateien und einen Manifest-Eintrag, um jeden Mainstream-Browser und jedes Mainstream-Gerät abzudecken Mehr als das sind fast immer Reste.

<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">

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

Jede Zeile hat einen Job:

• favicon.ico Ist der Fallback Die WHATWG HTML-Standard lässt Browser anfordern /favicon.ico Vom Seitenstamm aus, wenn eine Seite überhaupt kein Symbol angibt, und RSS-Leser, Crawler und ältere Tools dies immer noch tun Behalten Sie die Datei im Stammverzeichnis, auch wenn Sie andere Symbole deklarieren.
• icon.svg Ist das scharfe Symbol für Browser, die SVG-Favicons unterstützen Es skaliert auf jede Dichte und kann ein prefers-color-scheme Medienabfrage, damit sich das Symbol an dunkle Tabs anpasst Nicht jeder Browser ehrt es, weshalb der ico bleibt.
• apple-touch-icon.png Bei 180 x 180 ist es das, was iOS verwendet, wenn jemand Ihre Website zum Startbildschirm hinzufügt. Geben Sie ihr einen undurchsichtigen Hintergrund, da iOS die Transparenz auf den Homescreen-Symbolen nicht gewährleistet.
• Die Manifestsymbole bei 192 und 512 sind das, was Android- und Chromium-basierte Browser verwenden, wenn eine Website als App installiert wird, wie in der beschrieben W3 C Web Application Manifestdrohen

der sizes Attribut auf dem ico-Link zählt in einer Art. Wenn ein Browser einen SVG und einen dimensionierten ico sieht, kann er erkennen, dass der SVG die skalierbare Wahl ist Einige Setups verwenden sizes="any" Stattdessen auf dem ico, und einige Chrome-Versionen reagierten, indem sie den ico über dem SVG wählten. Eine bestimmte Größe vermeidet das.

Warum sieht mein Favicon verschwommen oder falsch aus?

Die meisten Favicon-Probleme kommen vom Quellbild, nicht vom Format, der ICO speichert das, was er bei jeder Größe vorgibt, und die Skalierung kann nur in eine Richtung gut gehen.

Symptom	Ursache	Fix
Weicher, fleckiger 256-px-Eintrag	Quelle kleiner als 256 px, also wurde sie nach oben gestreckt	Beginnen Sie mit einem Export von 512 x 512 oder mehr
Logo gequetscht oder gestreckt	Nicht quadratische Quelle auf Quadrat gestreckt	Vor der Konvertierung zu quadratisch schneiden oder einpolstern
Wortmarke im Tab nicht lesbar	Der mit 16 px gezeichnete Text ist zwei Pixel groß	Verwenden Sie das Symbol allein für 16 und 32 px
Dünne Umrisse verschwinden	Streichungen unter 1 px bei kleinen Größen	Dicke Striche in einer kleinen Variante
Weiße Box um das Symbol	JPG-Quelle hat keine Transparenz	Verwenden Sie ein PNG mit einem Alphakanal
Altes Symbol wird immer wieder angezeigt	Browser cachen Favicons aggressiv	Benennen Sie die Datei um oder fügen Sie eine Abfragezeichenfolge hinzu, und aktualisieren Sie sie dann hart
Kein Symbol in den Google-Ergebnissen	Symbol unter 48 px, blockiert durch robots.txt, oder nicht auf der Startseite	Servieren Sie ein größeres Symbol von der Startseite und erlauben Sie das Crawlen

Die erste Reihe lohnt sich auszulisten, denn sie fängt erfahrene Designer auch ein Eine 64 px Quelle, die mit 256 angekreuzt konvertiert wurde, erzeugt einen 256 px Eintrag, der das 64 px Bild viermal vergrößert ist Es ist genau der Eintrag High-Density Windows Ansichten und große Verknüpfungen zeigen Downscaling von einer großen Quelle ist die Richtung, die gut aussieht.

Die dritte Reihe ist eine Frage der Arithmetik Ein 16 x 16 Icon hat insgesamt 256 Pixel Eine in diese Breite gepresste Wortmarke mit fünf Buchstaben bekommt etwa drei Pixel pro Buchstabe, und Anti-Aliasing verwandelt diese in graue Flecken Fast jede bekannte Seite verwendet aus diesem Grund einen einzelnen Buchstaben oder ein Symbol für ihr Favicon.

Wie mache ich ein Favicon.ico aus einem PNG?

Exportieren Sie einen quadratischen PNG von mindestens 512 x 512 Pixeln mit transparentem Hintergrund, konvertieren Sie ihn in ICO mit den von Ihnen benötigten Größen und überprüfen Sie den 16-px-Eintrag vor der Veröffentlichung in Originalgröße.

Unter Verwendung der PNG-zu-ICO-Wandler auf Toolz:

1. Lassen Sie den PNG fallen. Mehrere können gleichzeitig hineingehen; Jeder wird zu seinem eigenen Ico.
2. Wählen Sie die Symbolgrößen Alle vier Kästchen, 16, 32, 48 und 256 px, werden zum Starten angekreuzt Für ein reines Favicon 256 aufkreuzen, um die Datei viel leichter zu machen, da der 256-Eintrag den größten Teil seines Gewichts hat Wenn Sie alle vier aufkreuzen, greift der Konverter zurück, um alle vier zu schreiben, anstatt ein leeres Symbol zu erzeugen.
3. Drücken Sie Konvertieren in ICO. Ein Quadrat 512 x 512 logo.png Kommt zurück als logo.ico Mit der Anmerkung & quot; Enthält 16, 32, 48, 256 px-Symbole."
4. Laden Sie die Datei herunter oder nehmen Sie einen Stapel als converted-ico.zipdrohen

Der Konverter zeichnet Ihr Bild auf eine Leinwand in jeder Größe, kodiert jedes Quadrat als PNG und verpackt sie zuerst am kleinsten in ein.ico, alle client-Seite, so dass das Kunstwerk nie das Gerät verlässt Transparenz wird bei jeder Größe gehalten Eine nicht quadratische Quelle wird gestreckt, um jedes Quadrat zu füllen, anstatt zu beschneiden, und die Notiz sagt so: Lassen Sie eine 1024 x 256 Wortmarke fallen und es berichtet, dass das Bild 1024x256 war und auf Quadrate der von Ihnen gewählten Größen gestreckt wurde Diese Notiz ist Ihr Hinweis, zuerst zuzuschneiden oder zu padieren.

Für das beste Ergebnis bei kleinen Größen machen Sie zwei PNGs: ein detailliertes für 48 und 256 px und ein vereinfachtes Symbol für 16 und 32 px. Konvertieren Sie jedes mit nur seinen angekreuzten Größen Der Konverter schreibt eine Quelle pro Datei, so dass der Zwei-Bild-Ansatz Ihnen zwei ico-Dateien liefert; verwenden Sie die vereinfachte als favicon.ico, da Browser hauptsächlich die kleinen Einträge und die detaillierten Einträge für Windows-Anwendungs- oder Verknüpfungssymbole auswählen.

Kann ich einen ICO aus einem JPG oder einem SVG machen?

Ja zu beiden, mit jeweils einem Vorbehalt.

Ein JPG funktioniert, aber jeder Symboleintrag wird als gefülltes Quadrat ohne Transparenz ausgegeben, da JPEG keinen Alphakanal hat und kein Konverter einen wiederherstellen kann. Die JPG zu ICO Konverter Abtastet das Foto in die gleichen Quadrate 16, 32, 48 und 256 px um, Fotos verlieren auch bei 16 px fast alle Details, also schneidet euch fest um ein einzelnes kontrastreiches Motiv und macht den Schnitt vor dem Umwandeln quadratisch Ein 4032 x 3024 Telefonfoto, das so umgewandelt wird, wie es ist, wird horizontal zusammengedrückt, und der Zettel sagt es euch.

Ein SVG ist die bestmögliche Quelle, da er keine feste Auflösung hat und bei jeder Eintragsgröße scharf macht, die Route hängt davon ab, wie viel Kontrolle Sie haben möchten Die SVG-zu-PNG-Wandler Rendert die SVG zu einem PNG, den Sie zuerst prüfen und bearbeiten können; jede SVG, deren längste Seite unter 512 px liegt, wird bei 512 gezeichnet, so dass ein 24 x 24-Symbol SVG immer noch eine saubere Quelle für den 256-Eintrag liefert Oder lassen Sie die SVG direkt in den Allgemeinen fallen Bildkonverter, das SVG, PNG, JPG und ein Dutzend anderer Formate akzeptiert und ICO als Ziel zum Rendern und Packen in einem Schritt wählt.

Quelle	Transparenz im ICO	Schärfe bei 256 px	Beste Verwendung
SVG	gepflegt	Scharf, aus Vektoren gerendert	Logos, die Sie in Vektorform haben
PNG 512 px oder größer	gepflegt	Scharf	Meisten Favicons
PNG unter 256 px	gepflegt	Weich bei 256	256 loslassen oder größer reexportieren
JPG	Keine, gefülltes Quadrat	Hängt von der Quellgröße ab	Nur fotobasierte Symbole
Bestehende ICO	gepflegt	Aus dem Eintrag, den der Browser dekodiert, neu aufgebaut	Ändern, welche Größen eine Datei trägt

Ein vorhandenes i.ico kann auch wieder eingespeist werden. Der Konverter behandelt ICO zu ICO niemals als Umbenennung; Es baut die Datei immer in den von Ihnen angekreuzten Größen um. Das ist eine schnelle Möglichkeit, ein aufgeblähtes Favicon auf 16, 32 und 48 zu reduzieren, obwohl es von einem Eintrag, den der Browser dekodiert, neu erstellt wird. Beginnen Sie also mit dem Original-Artwork, wenn Sie es haben. SVG gegen PNG behandelt, warum es sich lohnt, den Vektormaster für genau diese Art des Reexports aufzubewahren.

Spielt Favicon.ico im Jahr 2026 noch eine Rolle?

Ja, als Fallback Aktuelle Browser verwenden die von Ihnen deklarierten SVG - oder PNG-Icons, aber den Root /favicon.ico Ist immer noch das, was manche Browser, Feedreader, Lesezeichen-Tools und Crawler abrufen, wenn sie keine Deklaration finden oder den deklarierten Typ nicht unterstützen, ein fehlendes füllt auch Server-Protokolle mit 404 s, da diese Anfragen ankommen, ob die Datei existiert oder nicht.

Was nicht mehr zählt, ist der lange Schwanz der Legacy-Größen Separate 57, 60, 72, 76, 114, 120, 144 und 152 Pixel Touch-Symbole stammen aus älteren iOS-Versionen und werden durch die einzelne 180 px-Fenster-Kachelbilder deklariert durch browserconfig.xml Windows 8 und 10 Start Bildschirm Kacheln gehörte Beides wird für eine neue Seite nicht benötigt.

Hier ist das praktische Mindestset mit zu erwartenden Dateigrößen:

Datei	Pixelgröße	Typisches Gewicht	erforderlich?
favicon.ico Mit 16, 32, 48	16, 32, 48	Ein paar KB	Ja, als Fallback
icon.svg	Skalierbar	Unter 2 KB für eine einfache Markierung	empfohlen
apple-touch-icon.png	180 x 180	5 bis 20 KB	Ja, für iOS
icon-192.png, icon-512.png	192, 512	10 bis 60 KB	Wenn die Seite ein Manifest hat

Ist das Konvertieren von Symbolen im Browser privat?

Ja. Auf Toolz, Decodierung, Größenänderung, PNG-Codierung und Packen der ico passieren alle client-seitig, innerhalb der Browser-Registerkarte, so dass kein Bild hochgeladen wird, und die Seite arbeitet offline, sobald geladen Metadaten und Farbprofile, die an die Quelle angehängt sind, werden durch den Canvas-Schritt fallen gelassen, was für ein Symbol harmlos ist.

Bilder über 100 Megapixel und leere Dateien werden mit einer Nachricht abgelehnt, und SVG-Quellen über 50 MB werden abgelehnt Die Tools sind kostenlos, kein Signup, mit einer täglichen Begrenzung der Conversions.

Häufig gestellte Fragen