What does this favicon generator do?
This tool turns a single logo or image into a complete favicon package for a website: a multi-size favicon.ico, standalone PNG favicons, an Apple touch icon, Android/manifest icons, a site.webmanifest file, and the exact HTML tags to paste into your page's <head>. Everything is drawn with the Canvas API directly in your browser, so the source image is never uploaded anywhere.
How to generate a favicon
- Drop your logo or source image onto the drop zone, or click Browse files. A square image with the subject centered works best.
- Choose Crop to fill to crop a non-square image to a centered square, or Fit with padding to scale the whole image inside the square with a small safe margin.
- Pick a background - Transparent keeps existing alpha, or choose White or a custom color to fill it in.
- Set your site name and theme color - both are written into the generated manifest, and the site name also updates the browser-tab preview live.
- Check the size preview grid and the tab preview, then click Download favicon package to get every file in one ZIP.
- Copy the generated HTML snippet into your page's
<head>, and upload the downloaded files to your site's root folder.
What's in the favicon package
- favicon.ico - a single file containing 16, 32, and 48px versions, the format browsers and Windows still look for by default.
- favicon-16x16.png / favicon-32x32.png - standalone PNG favicons for browsers that prefer the modern
<link rel="icon">tag over ICO. - apple-touch-icon.png - a 180×180 PNG used when someone adds your site to an iOS or iPadOS home screen.
- android-chrome-192x192.png / android-chrome-512x512.png - the sizes Android and installable web apps expect, referenced from the manifest.
- site.webmanifest - a small JSON file describing your site's name, theme color, and icon set for Android and PWA installs.
- favicon-snippet.html - the same HTML shown on this page, saved as a file for reference.
Crop to fill vs. fit with padding
Crop to fill scales the image up until it covers the entire square, cropping off whatever doesn't fit - ideal when your source is already close to square, like a circular logo mark or an app icon. Fit with padding scales the whole image down to fit inside the square with a small margin on every side, so nothing gets cropped - better for wide logos, text-based marks, or artwork where cutting off any part would look wrong at favicon size.
Transparent, white, and custom backgrounds
If your source image has transparency and you leave the background on Transparent, every exported size keeps its alpha channel, which is usually what you want for a browser tab that adapts to light or dark themes. Switching to White or a custom color fills the square behind the artwork first - useful for logos designed on a transparent canvas that need a solid backdrop to stay legible in a tab, taskbar, or home-screen icon.
Why favicons need several sizes
No single image size covers every place a favicon shows up. Browser tabs typically render at 16px, with 32px used on high-DPI screens; Windows taskbar shortcuts favor 48px; iOS home screens use 180px; Android and installable web apps pull 192px and 512px from the manifest. Generating all of them from one source image, at the exact pixel sizes each platform expects, avoids blurry upscaling or a browser silently down-scaling an oversized image.
Common uses
Launching a new site
Turn a logo into every favicon size and manifest file a new site needs, then paste one HTML snippet instead of hand-writing each link tag.
Refreshing an old favicon
Replace a single low-resolution favicon.ico with a full modern set, including retina and Apple touch sizes that older setups often miss.
Making a site installable
Generate the 192px and 512px icons plus a site.webmanifest needed for Android's "Add to Home Screen" and basic PWA install prompts.
Frequently asked questions
What files does this favicon generator create?
It creates a multi-size favicon.ico (16, 32, and 48px in one file), standalone favicon-16x16.png and favicon-32x32.png, an apple-touch-icon.png at 180px, android-chrome-192x192.png and android-chrome-512x512.png for Android and web manifests, a site.webmanifest, and an HTML snippet with the correct link tags for all of them.
What happens to transparent backgrounds?
If your source image has transparency and you leave the background set to Transparent, every generated size keeps the alpha channel intact. Switching to White or a custom color fills the background before the icon is drawn, which is useful for logos that look better on a solid backdrop in a browser tab.
Where do I put the downloaded files?
Upload favicon.ico, the PNG files, and site.webmanifest to the root folder of your website (the same level as index.html), then paste the generated HTML snippet into every page's <head>, or into a shared header include if your site has one.
Does this work with an SVG logo?
Yes. Modern browsers can rasterize an SVG onto a canvas, so you can drop in a vector logo and it will be rendered at each target pixel size automatically.
Is my image uploaded anywhere?
No. Loading, resizing, and packaging all happen locally in your browser using the Canvas API. Nothing is sent to a server.