ICO-Favicon aus einem Bild erstellen

Wählen Sie ein Bild und eine der fünf quadratischen Größen. Mit JavaScript entsteht das Icon in diesem Browser und nichts wird hochgeladen; ohne JavaScript sendet das Formular die Datei an den Server. Beide Wege liefern eine favicon.ico, die Transparenz und Seitenverhältnis der Vorlage behält.

1. Wähle ein PNG-, JPEG-, GIF- oder WebP-Bild. Ein quadratisches Bild liefert das beste Ergebnis.

2. Wähle die ICO-Abmessungen, die der Zielbrowser oder die Anwendung benötigt.

3. Erzeuge und lade die favicon.ico herunter und füge sie anschließend den Website-Assets hinzu.

ICO-Abmessungen:

So wird aus einem Bild eine favicon.ico

Wählen Sie ein Bild (PNG, JPEG, GIF oder WebP), eine der fünf quadratischen Größen, und laden Sie eine favicon.ico für Browser-Tab, Lesezeichen oder installierte App herunter. Das Icon behält die Form der Vorlage: ein nicht quadratisches Bild wird eingepasst, zentriert und mit transparenten Rändern aufgefüllt statt verzerrt.

Mit JavaScript wird die Datei in diesem Browser dekodiert und die ICO hier geschrieben; das Bild wird also nicht hochgeladen. Das Formular funktioniert auch ohne JavaScript: Es sendet die Datei an den Server, der bis 200 KB annimmt. Beide Wege schreiben dasselbe Format: ein 32-Bit-Bild mit seiner 1-Bit-AND-Maske, damit Transparenz erhalten bleibt.

  1. Bild wählen: PNG, JPEG, GIF oder WebP.
  2. Quadratische Größe wählen: 16, 32, 48, 64 oder 128 Pixel.
  3. „ICO erzeugen“ drücken.
  4. Die Vorschau mit dem Ausgangsbild vergleichen; das Karomuster hinter der Vorschau ist Transparenz.
  5. favicon.ico herunterladen und ins Wurzelverzeichnis legen oder per <link rel="icon"> darauf verweisen.
  6. Zeigt der Browser weiterhin das alte Symbol, hilft ein harter Neuladen: Favicon-Caches sind zäh.

Wofür die einzelnen Größen stehen, wie das Bild eingepasst wird und wo die Umwandlung läuft

Wofür die einzelnen Größen stehen

16 px ist das klassische Tab-Symbol, 32 px ist hier die Voreinstellung und deckt Tabs auf hochauflösenden Bildschirmen ab, 48 px und 64 px nutzen Desktop-Verknüpfungen, Aufgabenumschalter und einige Android-Launcher, 128 px deckt Store-Einträge und App-Kacheln ab. Erzeugt wird ICO und nicht PNG, weil Verknüpfungsdateien und ältere Windows-Shells einen ICO-Container erwarten.

Eine Datei enthält ein Bild: Ein 32-px-Icon ist 4.286 Bytes groß, 16 px sind 1.150 Bytes, 128 px sind 67.646 Bytes. Browser skalieren das eine Bild, das sie finden; die gewählte Größe ist deshalb ein Kompromiss zwischen Schärfe auf großen Kacheln und Bytes bei jedem Seitenaufruf.

Wie das Bild eingepasst wird

Ein quadratisches Bild wird direkt auf die gewählte Größe skaliert. Ein nicht quadratisches Bild behält sein Seitenverhältnis: Es wird in das Quadrat eingepasst, zentriert, und die Restflächen bleiben transparent – Kreise bleiben Kreise, Logos werden nicht verzerrt.

Transparenz wird zweimal geschrieben: im 32-Bit-Alphakanal und in der AND-Maske, die ältere Leser noch auswerten. Ein transparentes PNG behält seinen transparenten Hintergrund, statt schwarz zu werden. Ein animiertes GIF wird als erstes Einzelbild gelesen, ein JPEG hat keine Transparenz zu bewahren.

Wo die Umwandlung läuft und was abgelehnt wird

Mit JavaScript verlässt das Bild das Gerät nicht: kein Upload, keine Dateigrößen-Grenze, und das Werkzeug arbeitet auch offline. Der Weg ohne JavaScript sendet das Bild an den Server und nimmt bis 200 KB (204.800 Bytes) an.

Beide Wege lehnen Bilder über 4096 × 4096 Pixel ab, weil eine größere Bitmap den Speicher einer Anfrage erschöpft, und beide lehnen andere Formate als PNG, JPEG, GIF und WebP ab. Vergrößern ist erlaubt – aus 4 × 4 Pixeln wird eine 128-px-Datei –, aber das Ergebnis bleibt so weich wie die Vorlage.

Zuletzt verwendet: