Favicon Generator — ICO, PNG und Apple Touch Icon
Verwandle ein Bild in ein komplettes Favicon-Set: favicon.ico, PNG-Icons, ein apple-touch-icon und ein Web-App-Manifest.
Das apple-touch-icon ist immer undurchsichtig. Wenn der App-Name leer ist, verwendet das Manifest den Dateinamen des Bildes.
Vorschau
Dateien im ZIP
So erstellst du ein Favicon
- Wähle ein quadratisches Bild, idealerweise mindestens 512 mal 512 Pixel, im Format PNG, JPG, WebP oder SVG.
- Wähle, wie nicht quadratische Bilder passen sollen: contain füllt sie mit der Hintergrundfarbe auf, cover schneidet sie mittig zu.
- Stelle die Hintergrund- und Themenfarbe, den Abstand und ein, ob die kleinen Icons einen transparenten Hintergrund behalten.
- Gib den App-Namen und den Kurznamen ein, die das Web-App-Manifest tragen soll, und prüfe dann die Live-Vorschauen.
- Lade das ZIP mit allen Dateien herunter oder hole favicon.ico und apple-touch-icon.png einzeln, und kopiere den HTML-Schnipsel.
Wann es hilft
- Einer neuen Website ein Favicon geben, ohne einen Bildeditor zu öffnen.
- Ein fehlendes oder unscharfes Favicon ersetzen, das in Tabs als leeres Seiten-Icon erscheint.
- Ein apple-touch-icon hinzufügen, damit eine Seite auf dem iPhone-Homescreen richtig aussieht.
- Android-Icons und ein Manifest für eine progressive Web-App vorbereiten.
- Ein Logo in ein ordentliches Icon-Set mit gleichmäßigem Abstand in jeder Größe verwandeln.
Häufig gestellte Fragen
Welche Größen erzeugt der Generator?
Er schreibt favicon.ico mit 16, 32 und 48 Pixel großen Bildern darin, separate Dateien favicon-16x16.png und favicon-32x32.png, ein apple-touch-icon.png mit 180 mal 180 und Android-Icons mit 192 und 512 Pixeln.
Warum ist das apple-touch-icon immer undurchsichtig?
iOS zeigt keine Transparenz in einem Homescreen-Icon, daher käme ein transparentes PNG mit einem schwarzen oder weißen Block dahinter heraus. Der Generator füllt diese Datei mit deiner Hintergrundfarbe und lässt die kleinen Favicon-Größen transparent, wenn du möchtest.
Was sollte ich in das Manifest schreiben?
Verwende den vollständigen Website- oder App-Namen und einen Kurznamen von etwa zwölf Zeichen, denn der Kurzname erscheint unter dem Icon auf einem Handy. Die Themenfarbe tönt die Browserleiste und die Hintergrundfarbe füllt den Startbildschirm.
Kann ich ein SVG-Logo verwenden?
Ja. Das SVG wird mit 512 Pixel Breite gerastert und sein Seitenverhältnis stammt aus den width- und height-Attributen oder aus der viewBox, ein quadratisches Logo bleibt also quadratisch.
Wohin kommen die Dateien auf meinem Server?
Lege sie im Website-Stammverzeichnis neben index.html ab, damit die Pfade im Schnipsel wie /favicon.ico und /site.webmanifest aufgelöst werden. Wenn du sie in einem Unterordner behältst, passe die href-Werte im Schnipsel entsprechend an.
Wird mein Bild irgendwohin hochgeladen?
Nein. Das Bild wird dekodiert und auf einem Canvas in deinem Browser gezeichnet, und das ZIP wird im Speicher zusammengestellt, es wird also nichts an einen Server gesendet.