Favicon Generator
Turn one image into a complete favicon package — favicon.ico, all PNG sizes, apple-touch-icon, Android icons, a manifest, and the HTML — in a single zip.
Bild ablegen, um ein Favicon zu erstellen
Ziehen & Ablegen, Einfügen oder Datei auswählen
PNG · JPG · WebP · SVG — Icons auf deinem Gerät erstellt
One image in, a full favicon set out
A modern favicon is not a single file — browsers, iOS, Android, and installable PWAs each want their own sizes and formats. This generator takes one square-ish image and produces the whole set: a favicon.ico with 16, 32, and 48 px, standalone PNG favicons up to 512 px, a 180 px apple-touch-icon, 192 and 512 px Android icons, a site.webmanifest, and a copy-paste HTML snippet.
Everything is rendered on your device with the canvas API, then bundled into a zip you download. Add a background color, padding, or rounded corners if your artwork needs a little breathing room inside the icon frame.
How to generate a favicon
- Add your image — drag & drop, paste, or choose a PNG, JPG, WebP, or SVG.
- Adjust the look — keep it transparent or pick a background, and tweak padding and corner rounding.
- Preview every size — check the live 16–512 px previews so nothing looks muddy when small.
- Download the zip — get favicon.ico, the PNGs, the manifest, and the HTML, then paste the snippet into your <head>.
Tip: design for the smallest size
At 16×16 a detailed logo turns to mush. Use a bold, simple mark with strong contrast, and add a little padding so the artwork is not clipped by rounded tab corners.
der vollständige Favicon-Satz: sizes and where each is used
Ein modernes Favicon ist nicht eine einzelne Datei, sondern ein kleiner Satz, denn Browser, iOS, Android und installierbare PWAs suchen jeweils eine andere Größe und ein anderes Format. Hier ist genau, was erzeugt wird und wo jeder Teil verwendet wird.
| Size | File | Where it's used |
|---|---|---|
| 16 × 16 px | favicon.ico + favicon-16x16.png | Das Symbol für Browser-Tab und Adressleiste bei Standard-Bildschirmdichte (1×); die kleinste und meistgesehene Größe. |
| 32 × 32 px | favicon.ico + favicon-32x32.png | Das Tab- und Lesezeichensymbol auf hochauflösenden (Retina-)Displays sowie die Windows-Taskleisten-Verknüpfung. |
| 48 × 48 px | favicon.ico + favicon-48x48.png | In favicon.ico enthalten für Desktop-Verknüpfungen und Windows-Website-Kacheln, die eine größere Größe wählen. |
| 180 × 180 px | apple-touch-icon.png | Das Symbol, das iOS Safari anzeigt, wenn eine Website zum Startbildschirm des iPhone oder iPad hinzugefügt wird. |
| 192 × 192 px | android-chrome-192x192.png | Das Startbildschirm-/Launcher-Symbol von Android für eine installierte PWA, im Web-Manifest aufgeführt. |
| 512 × 512 px | android-chrome-512x512.png | Der PWA-Startbildschirm und das hochauflösende App-Symbol, auch als maskierbares Symbol des Manifests genutzt. |
Format & container
Sie erhalten alle drei wichtigen Formate: eine mehrgrößige .ico für Altsysteme und Windows, scharfe PNGs für moderne Browser und die Manifest-Symbole für PWA-Installationen — so deckt ein einziger Upload alles ab.
How it's wired into your page
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Tip
Gestalten Sie zuerst für 16 × 16: Ein detailreiches Logo wird in dieser Größe matschig, verwenden Sie also eine kräftige, einfache Bildmarke mit starkem Kontrast und etwas Abstand und lassen Sie die größeren Größen aus Ihrer hochauflösenden Quelle herunterskalieren.
Alle Favicon- und Icon-Tools
Häufig gestellte Fragen
What sizes does the favicon.ico include?
The generated favicon.ico packs 16, 32, and 48 px — the sizes browsers pick from for tabs, bookmarks, and the address bar. Larger displays use the standalone PNG icons.
Where are my icons generated?
Everything happens in your browser, so the files are created on your own device. How any data associated with the tool is handled is described in our privacy policy.
Do I need the web manifest?
If you want your site to be installable on Android or as a PWA, yes — site.webmanifest points to the 192 and 512 px icons. Otherwise it's harmless to include and future-proofs your setup.
What image format should I upload?
An SVG or a large PNG gives the crispest small icons because there is more detail to downscale from. JPG and WebP also work; just use the highest resolution you have.
Weitere Bildwerkzeuge
Convert image format
PNG, JPG and WebP — convert any to any.
Image toolResize an image
Change dimensions to exact pixels or presets.
Image toolCrop an image
Crop to any ratio or an exact pixel size.
Image toolCompress an image
Shrink file size without visible quality loss.
Image toolConvert HEIC to JPG
Turn iPhone HEIC photos into universal JPG.