Favicon Generator
Turn one logo into a local favicon ZIP with profile-sized PNG and ICO assets plus ready-to-copy HTML links and manifest data.{{ summaryTitle }}
{{ summaryLine }}
{{ summaryAnnouncement }}
The favicon preview appears after the source image renders.
{{ packageExportStatus }}
| File | Size | Purpose | Copy |
|---|---|---|---|
| {{ row.file }} | {{ row.size }} | {{ row.purpose }} |
{{ tableExportStatus }}
{{ item.detail }}
{{ chartExportStatus }}
The chart renderer is unavailable. Exact file sizes remain available in the ledger.
{{ textExportStatus }}
{{ textExportStatus }}
At sixteen or thirty-two pixels, a logo loses every detail that does not survive strong reduction. Thin strokes merge, small lettering disappears, and artwork that looks balanced on a large canvas can become an off-center blur in a browser tab. Favicon preparation is therefore a small-image design task as well as a file-format task.
A modern icon set serves several destinations. Browser tabs and bookmarks need tiny square assets, older browser paths may still request an ICO file, saved shortcuts can use an Apple touch icon, and installable web apps read icon declarations from a web app manifest. These files can share one source image, but they are not all interchangeable.
| Destination | Typical concern | Useful review |
|---|---|---|
| Browser tab | Very small display with little room for detail. | Inspect the 16 px and 32 px renders at actual size. |
| ICO fallback | One container may carry several embedded square sizes. | Confirm that the expected entry sizes are present. |
| Home-screen icon | Launchers may apply their own shape or background treatment. | Check edge clearance and contrast on the destination device. |
| Maskable web-app icon | The operating system may crop the outer area into different shapes. | Keep important artwork inside a generous centered safe area. |
Square, high-resolution source artwork gives the cleanest starting point because it needs less cropping and supplies enough pixels for large app icons. A transparent background works well for many marks, while pale or translucent edges may need a deliberate matte. The asset path matters too: valid image files do not help when the HTML or manifest points to the wrong public directory.
A complete file set is not proof of a good visual result. Browsers, search products, operating systems, and launchers may cache icons or choose among declared resources differently. Small previews, deployed URLs, markup, and the final manifest should all be checked before an icon change is considered finished.
How to Use This Tool:
Start with one browser-readable image and choose the smallest package profile that covers the destinations you support.
- Drop, paste, or browse for one Source image. Prefer a square image whose shortest edge is at least 512 px, then inspect the decoded dimensions shown in the summary.
- Enter the Site name, choose a Package profile, and set the public Asset path used by the generated links and manifest.
- Choose Contain with padding to preserve the whole mark or Cover the square to crop it edge to edge. Use Advanced only when extra PNG sizes or a solid matte are needed.
- Check the actual-size previews and every item in the Readiness guide. Review the generated install links and manifest before downloading the ZIP for deployment.
Interpreting Results:
Ready means generation completed, the selected profile contains its required PNG and ICO sizes, and the source meets the built-in square-and-resolution check. Review identifies a non-square or sub-512 px source, or missing profile coverage. It does not mean the files are corrupt.
The 32px geometry note is especially useful for non-square artwork. Contain preserves the full image and may leave empty space; cover fills the canvas and crops. Neither choice can restore detail that disappears during reduction. Inspect the 16 px and 32 px previews instead of relying on the large source.
The file ledger and byte chart describe what was generated, not whether a browser has refreshed its cache or a public URL is correct. After deployment, open the declared asset URLs directly and test a fresh browser profile or device when cache behavior matters.
Technical Details:
Each output begins with browser decoding of the source image, followed by rasterization onto a square canvas. Standard icons use the chosen contain or cover rule. PNG files are then assembled into the selected profile, and the profile's small PNG renders are reused as entries inside favicon.ico where sizes match.
Transformation Core:
- Decode one image and read its width, height, byte size, and media type.
- Resolve the profile's PNG and ICO sizes, then add unique extra PNG sizes from 16 to 1024 px.
- Draw the source into each square canvas with high-quality image smoothing, optional padding, and an optional solid matte.
- Encode standard and maskable canvases as PNG, assemble ICO entries, generate HTML links, and add a web manifest when the profile requires one.
- Place the generated assets, a deployment readme, and the text artifacts into one ZIP.
Formula Core:
For an output square of side N, source width W, source height H, and padding percentage q, contain mode first rounds the clear margin on each side:
Contain uses the smaller scale so the whole source fits inside the padded box. Cover uses the larger scale so the square is filled, allowing the longer dimension to extend beyond the canvas.
The drawn dimensions are rounded once after scaling.
A source is classed as square when its width-to-height ratio is from 0.92 to 1.08 inclusive. The built-in source-quality check is ready only when that shape test passes and the shortest edge is at least 512 px. These are review rules, not browser requirements.
Profile Coverage:
| Profile | PNG sizes | ICO entries | Additional output |
|---|---|---|---|
| Full platform bundle | 16, 32, 48, 180, 192, 512 px | 16, 32, 48 px | Apple link and web manifest |
| Minimal web | 16, 32 px | 16, 32 px | Browser install links |
| PWA install | 32, 180, 192, 512 px | 32 px | Apple link and web manifest |
| Apple/iOS | 32, 120, 152, 167, 180 px | 32 px | Apple touch links |
| Android/PWA | 32, 192, 512 px | 32 px | Web manifest |
| Legacy browser | 16, 32, 48 px | 16, 32, 48 px | Classic shortcut-icon markup |
| Maskable icon package | 32, 180, 192, 512 px plus separate 192 and 512 px maskable icons | 32 px | Apple link and web manifest |
Maskable icons always use contain mode, a solid matte, and at least 18% padding even when the standard icons use different settings. The manifest labels those separate entries with the maskable purpose. The site name supplies the manifest name and a short name truncated to 24 characters; it is not drawn onto the image.
Privacy and Accuracy Notes:
- The source image is decoded, resized, encoded, and packaged in the browser without an upload step.
- One image is processed at a time, and files larger than 40 MB are rejected.
- Browser decoding determines which image formats can be read. An unreadable or very large image may fail even when its filename looks supported.
- Raster downscaling cannot recover missing detail, repair poor contrast, or guarantee how every browser, launcher, crawler, or cache will display the icon.
- The generated asset path and markup are planning output. Confirm the final public URLs and content types after deployment.
References:
- HTML link type icon, WHATWG HTML Living Standard.
- Web Application Manifest, World Wide Web Consortium.