Favicon Generator: aus einem Bild zwölf Dateien
Bild hochladen, Hintergrund wählen, ZIP laden. Mehr braucht der Favicon Generator nicht, um aus einem Logo, einem Emoji oder bis zu drei Buchstaben alle Icon-Dateien einer Website zu bauen. Jede Größe entsteht aus einer Zeichenfläche von 512×512 Pixeln. Die Vorschau zeigt das Icon als Browser-Tab, als Google-Treffer und auf dem Startbildschirm eines Handys.
Die Einstellungen der Reihe nach
- Wähle den Reiter Bild / SVG Upload, Emoji Favicon oder Text / Monogramm. Ziehe eine PNG-, SVG-, JPG- oder WebP-Datei hinein oder tippe ein bis drei Buchstaben.
- Wähle den Hintergrund: Transparent, Einfarbig oder Moderner Farbverlauf. Der Verlauf hat zwei Farben und einen Winkel von 0° bis 360°.
- Stelle den Innenabstand (0–40 %, Standard 15 %) und die Abrundung der Ecken (0–50 %, Standard 22 %, die iOS-Optik) ein.
- Trage den Namen deiner Website ein. Er steht im Manifest als
name; die ersten 12 Zeichen werden zushort_name. - Klicke auf Komplettes Paket (.ZIP) herunterladen oder nimm einzelne Dateien von den Karten unter der Vorschau.
Zwölf Bilder, drei Textdateien
Das Paket enthält favicon.ico, PNGs mit 16, 32, 48 und 96 Pixeln, drei Apple Touch Icons (180, 152, 120), Android-Icons mit 192 und 512 Pixeln, ein Maskable-Icon mit 512 und eine Windows-Kachel mit 150 Pixeln. Dazu kommen site.webmanifest, browserconfig.xml und eine README.txt. Die Schaltfläche Code kopieren liefert die passenden <link>- und <meta>-Tags für den Head deiner Seite.
Was die .ico wirklich enthält
Drei PNG-Ebenen mit 16, 32 und 48 Pixeln. Ebenen mit 64 oder 256 Pixeln gibt es nicht.
Schrift und Emoji hängen von deinem Rechner ab
Emojis zeichnet der Browser mit der Emoji-Schrift deines Betriebssystems. Dasselbe Emoji sieht auf macOS, Windows und Android anders aus. Monogramme nutzen Systemschriften, und Impact oder eine Schreibschrift kann bei dir durch eine andere Schrift ersetzt werden. Innenabstand und Abrundung gelten für jede Datei, auch für das Maskable-Icon. Für ein randloses Maskable-Icon setzt du die Abrundung auf 0 und hältst das Motiv innerhalb des gepunkteten Kreises.
Der HTML-Code verlinkt die .ico, die PNGs mit 16 und 32 Pixeln, das Apple-Icon mit 180 Pixeln, das Manifest und die Windows-Konfiguration. Die Dateien mit 48, 96, 152 und 120 Pixeln liegen im ZIP, sind aber nicht verlinkt. Ein kleines Rasterbild wird hochskaliert. Starte daher mit mindestens 512×512 Pixeln. Bei einem Hintergrund ohne Volltonfarbe lautet die Themenfarbe im Manifest #2563eb.
Dein Bild verlässt den Browser nicht
Das Tool liest die Datei mit einem FileReader und zeichnet sie im Browser auf eine Canvas. Beim Hochladen und beim Herunterladen geht keine Anfrage ins Netz. Im Netzwerk-Tab der Entwicklertools kannst du das prüfen. Die Dateien speichert der Browser als normale Downloads. In die Zwischenablage gelangt der Code nur, wenn du Code kopieren drückst.