Skip to content
user@convertitive:~$convertitive

Favicon-Generator

Ein quadratisches Bild rein, ein komplettes Favicon-Set raus. Nichts verlässt deinen Browser.

Ein modernes Favicon-Setup ist 2026 ein kleines Bündel, keine einzelne Datei: ein klassisches favicon.ico für ältere User-Agents und alte Lesezeichen, PNG-Icons mit 16 und 32 Pixeln für Browser-Tabs, ein 180px großes apple-touch-icon für iOS-Startbildschirme sowie 192/512px-PNGs für das Web-App-Manifest. Der ICO-Teil ist weniger schmerzhaft, als er klingt: Seit Windows Vista dürfen ICO-Verzeichniseinträge direkt PNG-kodierte Bilder enthalten. Dieses Werkzeug rendert dein Bild daher in jeder Größe auf einem Canvas, kodiert jede Variante als PNG und verpackt das 16/32/48-Trio in einen ICO-Container, der nur einen 6-Byte-Header plus 16 Byte Verzeichnis pro Bild kostet — komplett clientseitig, ohne dass irgendetwas hochgeladen wird.

Drop one image here (PNG, SVG, JPEG, WebP…), or

One file, up to 16 MB. A square 512×512+ source works best. Stays in your browser — nothing is uploaded.

How to use

  1. Ein Bild ablegen

    Ziehe ein beliebiges Bild, das dein Browser dekodieren kann — PNG, SVG, JPEG, WebP — auf die Ablagezone. Eine quadratische Quelle von mindestens 512×512 liefert die schärfsten Ergebnisse; nicht quadratische Bilder werden automatisch mittig zugeschnitten.

  2. Die Vorschauen in kleinen Größen prüfen

    Das Werkzeug rendert dein Icon mit 16, 32 und 48 Pixeln auf hellem und dunklem Schachbrett-Hintergrund — genau die Größen, die Browser-Tabs verwenden. Wenn das Design bei 16px zu Brei wird, vereinfache es, bevor du es auslieferst.

  3. Das Set herunterladen

    Lade favicon.ico herunter (das 16-, 32- und 48px-PNG-Einträge in einer Datei bündelt) plus die einzelnen PNGs: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png mit 180px sowie icon-192/icon-512 für dein Manifest.

  4. Die Head-Tags kopieren

    Kopiere das fertige <link>-Snippet in den HTML-Head, lege die Dateien im Stammverzeichnis deiner Website ab und referenziere icon-192.png und icon-512.png im icons-Array deines Web-App-Manifests.

Frequently asked questions

Wird mein Bild auf einen Server hochgeladen?
Nein. Dekodieren, mittiges Zuschneiden, Skalieren, PNG-Kodierung und der Zusammenbau des ICO-Containers laufen komplett in deinem Browser mit der Canvas-API und reinem JavaScript. Es gibt zu keinem Zeitpunkt eine Upload-Anfrage — Convertitive sieht dein Bild nie.
Welche Größen sind wirklich wichtig — und warum genau diese?
16×16 und 32×32 decken Browser-Tabs, Lesezeichenleisten und Verlaufslisten auf Standard- und hochauflösenden Displays ab. 48×48 deckt Windows-Website-Verknüpfungen und einige Desktop-Kontexte ab. 180×180 fordern aktuelle iPhones und iPads für Startbildschirm-Icons an. 192×192 und 512×512 sind die beiden Größen, die die Web-App-Manifest-Spezifikation und der Android-Installationsdialog erwarten. Alles Weitere skalieren Browser aus einer dieser Größen.
Brauche ich 2026 noch eine .ico-Datei?
Ja, als Sicherheitsnetz. Browser und Crawler, die älter sind als die PNG-Favicon-Unterstützung, alte Lesezeichen mit fest verdrahtetem /favicon.ico sowie eine lange Reihe von Feed-Readern, Link-Vorschaudiensten und Monitoring-Bots fordern /favicon.ico im Stammverzeichnis weiterhin bedingungslos an. Dort eine echte Datei auszuliefern kostet nichts und erspart dir einen stetigen Strom von 404-Fehlern in den Logs.
Bleiben transparente Hintergründe erhalten?
Ja. Jede Ausgabe ist PNG-kodiert — auch die Einträge im .ico-Container — und PNG trägt einen vollen Alphakanal. Die Schachbrett-Vorschauen oben existieren genau dafür: damit du prüfen kannst, wie dein transparentes Icon auf hellen und dunklen Browser-Themes wirkt, bevor du dich festlegst.
Warum ist das Apple-Touch-Icon 180 Pixel groß?
180×180 ist die Größe, die iOS für Startbildschirm-Icons auf 3x-Retina-Displays anfordert (60pt × 3). Ältere Geräte, die 152 oder 167 Pixel wollen, skalieren die 180px-Datei einfach herunter — mit der größten Einzelgröße deckst du also die gesamte Apple-Palette ab. Beachte, dass iOS seine eigene Maske mit abgerundeten Ecken darüberlegt; liefere daher ein randloses Quadrat — keine vorab abgerundeten Ecken nötig.
Was ist mit SVG-Favicons?
Moderne Desktop-Browser akzeptieren <link rel=„icon“ type=„image/svg+xml“>, und das ist eine großartige Ergänzung — eine gestochen scharfe Datei in jeder Größe, die sich per eingebettetem CSS sogar an den Dark Mode anpassen kann. Aber Safaris Unterstützung hinkte historisch hinterher, und viele Nicht-Browser-Agents ignorieren es — das PNG-plus-ICO-Set bleibt daher die sichere Basis. Liefere das SVG als zusätzliches <link> aus, nicht als Ersatz.

About

Der ICO-Container — und warum PNG-Einträge funktionieren

Eine .ico-Datei ist eines der einfachsten Containerformate, das noch täglich im Einsatz ist: ein 6-Byte-ICONDIR-Header (reserviertes Wort, Typ 1 für Icons, Anzahl der Einträge), dann pro Bild ein 16-Byte-ICONDIRENTRY, das Breite und Höhe (als einzelne Bytes, wobei 0 für 256 steht), Farbtiefe, Bytelänge und Offset festhält, gefolgt von den rohen Bilddaten direkt hintereinander. Ursprünglich mussten diese Daten ein headerloses BMP mit einer AND-Transparenzmaske sein; seit Windows Vista darf es stattdessen ein vollständiger PNG-Datenstrom sein, den das Betriebssystem an seinen Signaturbytes erkennt. Genau diese eine Änderung macht einen so kleinen clientseitigen Generator möglich — der PNG-Encoder von canvas.toBlob im Browser erledigt die Pixelarbeit, und die ICO-Schicht ist nur 6 + 16×n Bytes Little-Endian-Buchhaltung, geschrieben mit einer DataView.

Wie Browser eine Favicon-Quelle auswählen

Sind mehrere Icon-Links deklariert, wählen Browser nach rel-Typ und dem sizes-Attribut: Ein Tab auf einem 2x-Display will 32px, also gewinnt ein <link rel=„icon“ sizes=„32x32“> gegen ein 16px-Icon; passt nichts Deklariertes, fordern die meisten Browser ersatzweise /favicon.ico aus dem Stammverzeichnis an — selbst ganz ohne Link-Tag. Apple-Geräte ignorieren rel=„icon“ für Startbildschirm-Icons vollständig und suchen nach rel=„apple-touch-icon“ (mit Fallback auf /apple-touch-icon.png im Stammverzeichnis). Installierbare Web-Apps lesen keines von beidem — sie nehmen die 192- und 512px-Einträge aus dem icons-Array des Manifests. Diese Aufteilung — Link-Tags für Tabs, apple-touch-icon für iOS, Manifest für Installationen — ist der Grund, warum ein vollständiges Set drei Auslieferungswege hat statt einem.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.