Favicon Generator from Image
Build a complete website icon package from one image. Frame it as a square, choose sharp, rounded or circular corners, preview it at real browser sizes, then download a multi-layer ICO or a ZIP with Apple and Android icons. Nothing is uploaded.
Favicon Generator, at a glance
Favicon Generator on SquareImage.dev converts any PNG, JPEG, WebP, GIF or BMP image into a multi-resolution favicon.ico (packing 16x16, 32x32 and 48x48 PNG layers into one file) plus a complete ZIP package with 180x180 Apple Touch Icon, 192x192 and 512x512 Android Chrome icons, and a site.webmanifest file. Non-square logos can be cropped or padded to a 1:1 square and given rounded corners or a circular mask before export. It is free, requires no account, and runs entirely in your browser with Canvas.
By SquareImage · Verified
What files does a modern website need for its favicon?
Browsers and installed web apps ask for different sizes. The full package keeps the conventional names below so it can be copied into a site's public folder.
| File | Size | Used for |
|---|---|---|
favicon.ico | 16x16, 32x32, 48x48 | Browser tabs and Windows shortcuts |
favicon-32x32.png | 32x32 | Modern browser tabs |
apple-touch-icon.png | 180x180 | iPhone and iPad home screens |
android-chrome-192x192.png | 192x192 | Android launcher |
android-chrome-512x512.png | 512x512 | Installed web app splash and launcher |
site.webmanifest | JSON | App icon declarations |
How do I generate a favicon package from a non-square image?
- Add the image. Choose a file, drop it onto the page, or paste it.
- Frame the square. Center crop it, fit it on transparency, or add a solid padding color.
- Choose the shape. Leave the radius at zero, use 18% for an app icon, or use 50% for a circle.
- Export. Download the ICO alone or the complete eight-file ZIP.
Why does favicon.ico pack 16x16, 32x32 and 48x48 inside one file?
ICO is a container, not one bitmap. A browser or Windows shell can select the closest stored layer instead of shrinking a large image every time. That gives a designer direct control over the tiny 16-pixel result while preserving a sharper 48-pixel version for high-density surfaces.
When should I round the corners of my favicon?
Use a modest radius when a square logo looks too hard against a browser tab, but keep enough background around fine lettering. For a separate transparent export, use Rounded Corners or create an avatar with Circle Crop. If only the Windows container is needed, open the PNG to ICO Converter.
When will a generated favicon look blurry?
Fine text, thin strokes and photographs lose detail at 16x16. Start with a clean, high-resolution source, keep the important mark near the center, and inspect the real-size tab preview. The exporter halves the image in steps before its final reduction so edges survive better than they do in one large resize.
Frequently asked questions
How can I inspect the sizes inside favicon.ico?
Open the file in an icon editor or inspect its ICONDIR entries with an ICO viewer. This generator writes three independent PNG resources at 16x16, 32x32 and 48x48 into the default favicon.ico rather than renaming one PNG file.
What favicon size does Google Search require?
Google asks for a square favicon whose dimensions are a multiple of 48 pixels, such as 48x48, 96x96 or 144x144. The ZIP includes a 48x48 PNG and the ICO includes a 48x48 layer.
Can a favicon have a transparent background?
Yes. Choose transparent padding or use a source image with alpha. The PNG layers inside the ICO keep 32-bit RGBA transparency, as do the exported PNG app icons.
Which HTML tags do I need for a favicon?
Link favicon.ico, the 16x16 and 32x32 PNGs, the 180x180 Apple Touch icon, and site.webmanifest from the page head. The generator provides a copyable block with those five tags.
Is my logo uploaded while the favicon package is generated?
No. Canvas draws each size in your browser, the ICO and ZIP bytes are assembled on the device, and the generated files download directly from the current tab.
Every tool on this site draws your photo onto an HTML canvas and reads the result back out — that is the whole pipeline, which is why nothing is uploaded and why the export size behaves the way it does. The browser's own documentation describes the drawing step:
“drawImage() will always use the source element's intrinsic size in CSS pixels when drawing, cropping, and/or scaling.”
Sources
- MDN Web Docs — CanvasRenderingContext2D: drawImage() method
- MDN Web Docs — HTMLCanvasElement: toBlob() method
- WHATWG — HTML Standard — The canvas element
Links checked 2026-09-03.
Other image tools on this site
- Square Image OnlineMake any image square with blur, solid color, resize, or a manual 1:1 crop.
- Crop Image to SquareDrag a fixed 1:1 crop frame over one or several source photos.
- Blur Image or Add a Blurred FrameBlur a whole photo or control a sharp image over a blurred backdrop.
- Rounded CornersRound the corners of an image and keep the cut-out transparent.
- Full DP MakerA whole photo as a profile picture, with no crop on WhatsApp.
- Instagram Grid MakerSplit one photo into 2×2 to 4×4 tiles for a feed mosaic.
- Drawing GridOverlay a numbered grid on a reference photo for grid drawing.
- Solid Color BackgroundGenerate a plain color image at any size, no upload needed.
- PNG to ICO ConverterPack any PNG, JPG or WebP into a transparent multi-resolution Windows .ico file.
- Circle Crop ImageCrop a photo into a 1:1 circle with transparent corners and an optional border ring.