Favicon Generator Online — PNG to ICO with All Sizes
Drop a PNG, JPG or SVG — get a ready-to-use favicon.ico, all PNG sizes, apple-touch-icon, webmanifest and the HTML snippet. Everything runs in your browser, no upload.
Drop an image here or click to browse
PNG, JPG, SVG or WebP. Your file is not uploaded.
About the favicon generator
A modern favicon isn't a single file — it's a set: ICO for legacy browsers and Windows shortcuts, PNGs at multiple sizes for modern Chrome/Firefox, an apple-touch-icon for the iOS home screen, and a webmanifest for PWA. This tool builds the whole bundle from a single image with one click.
Conversion runs client-side: Canvas renders your source at every required size, then we pack the PNG bytes into the ICO container (PNG-in-ICO, supported since Windows Vista, works in every browser). Your file is never uploaded.
The resulting ZIP contains favicon.ico, PNGs 16/32/96/192/512, apple-touch-icon (180×180), site.webmanifest and an HTML snippet with ready-to-paste link tags. Drop the files into your site root and paste the snippet into head.
When you'll need a favicon generator
Launching a new site
Upload your logo — get a ready package that works correctly across Chrome, Safari, Firefox, Edge and mobile browsers. No Photoshop, no need to memorize Apple's specs.
Desktop app or shortcut
Need favicon.ico for a Windows shortcut, EXE resource or legacy Internet Explorer? Download just the ICO — multi-resolution 16/32/48 in a single file.
PWA / iOS Add to Home Screen
If your site supports 'Add to Home Screen', you need apple-touch-icon (180×180) and a webmanifest with PNG 192/512. The generator builds them automatically.
Replacing an outdated icon
Old favicon blurry, no retina or dark-mode support? Regenerate from a clean SVG with the proper modern set of sizes.
FAQ
Which formats can I upload?
PNG, JPG, JPEG, WebP, GIF and SVG. Best results from a square PNG or SVG: they scale without losing crispness. If your source is rectangular, pick a fit mode (cover / contain / stretch).
What's the difference between fit modes?
Cover — crops the edges so the image fills the square (good for logos with a centered element). Contain — fits the whole image, fills edges with a background (good for complex logos). Stretch — distorts proportions (rarely needed).
What's inside favicon.ico?
ICO is a container. Inside it sit PNG images at three sizes: 16×16, 32×32 and 48×48. The browser picks the right one for the context. This is the 'PNG-in-ICO' format, supported since Windows Vista (2007) and in every modern browser.
Why so many PNG files?
Each size has its purpose: 16/32 — browser tab; 96 — Chrome new tab; 180 — iOS Home Screen (apple-touch-icon); 192 — Android Chrome; 512 — PWA splash. Browsers pick the right one via the sizes attribute on the link tag.
What is site.webmanifest?
A JSON file with the icon list and PWA parameters. Required for 'Add to Home Screen' on Android / Chromium so the icon and title look correct. If you're not building a PWA, the file is harmless.
Why does apple-touch-icon ship with a background even if Transparent is on?
iOS adds a black background to transparent PNGs by default. That looks bad, so we fill it with the chosen color (white by default). All other PNGs and the ICO stay transparent if you opted in.
Where do I put the files?
Site root: example.com/favicon.ico, example.com/favicon-32x32.png and so on. Then paste the HTML snippet into head of every page — best done via a shared layout. The browser will pick up the favicon on the next page load.