Favicon-Generator (ICO · PNG)

Erstellt aus einem Bild favicon.ico, PNG-Favicons, Startbildschirm-Icons und ein Web-Manifest und lädt alles als ZIP zusammen mit den HTML-Tags zum Einfügen herunter.

Wird geladen…

So funktioniert es

  1. Wählen Sie ein Bild aus oder ziehen Sie es in das Feld. PNG, JPEG, WebP, GIF und SVG funktionieren; ein quadratisches Bild mit mindestens 512 × 512 px liefert das schärfste Ergebnis.
  2. Stellen Sie Innenabstand und abgerundete Ecken ein und wählen Sie einen transparenten oder einfarbigen Hintergrund. Die Liste unten wird bei jeder Änderung neu erstellt.
  3. Geben Sie einen App-Namen ein, wenn er in site.webmanifest stehen soll. Er erscheint, wenn die Website zum Startbildschirm des Handys hinzugefügt wird.
  4. Klicken Sie auf „Alles herunterladen (ZIP)“ oder laden Sie einzelne Dateien aus der Liste herunter.
  5. Laden Sie die Dateien in den Stammordner Ihrer Website hoch und fügen Sie die Tags unter „Tags für <head>“ in den <head> Ihrer Seiten ein.

Häufige Fragen

Wird mein Bild hochgeladen?
Nein. Skalieren und Packen geschieht nur in Ihrem Browser.
Welche Dateien sind enthalten?
favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html. Die HTML-Datei enthält die Tags zum Einfügen.
Warum hat apple-touch-icon.png einen Hintergrund, obwohl ich transparent gewählt habe?
iOS füllt transparente Bereiche schwarz und rundet die Ecken selbst ab. Deshalb bekommt dieses Icon immer einen festen Hintergrund (weiß, wenn transparent gewählt ist) und keine abgerundeten Ecken.
Mein Bild ist nicht quadratisch. Was passiert?
Es wird mit gleichem Seitenverhältnis eingepasst und zentriert, an den kürzeren Seiten bleibt Leerraum. Schneiden Sie es vorher quadratisch zu, wenn es das Icon ausfüllen soll.
Bei 16 px wirkt das Icon unscharf.
Bei 16 × 16 px gehen feine Details und kleine Schrift verloren. Verwenden Sie eine einfache Form oder ein bis zwei Buchstaben und einen kleinen Innenabstand.
Der Browser zeigt noch das alte Icon.
Browser speichern Favicons lange im Cache. Laden Sie die Seite mit geleertem Cache neu oder hängen Sie eine Version an den Link an, z. B. /favicon.ico?v=2.