{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Profile · {{ profile.label }} Source · {{ sourceDimensionLabel }} Package · {{ packageSizeLabel }}

{{ summaryAnnouncement }}

Favicon source and package settings
Drop, paste, or browse one square logo. A 512 px or larger source gives cleaner small icons.
{{ dropzoneTitle }} {{ sourceFileName || 'Local sample ready' }}

{{ sourceStatusLine }}

Use the public product or site name shown in install prompts.
{{ profile.help }}
Use / for the web root or a path such as /assets/icons/.
Contain is safer for logos; cover suits edge-to-edge artwork.
{{ normalizedPadding }}%
Use 6–12% for most marks. Cover mode ignores this setting.
Leave blank to keep the profile unchanged.
Leave off to preserve transparency where the source and browser support it.
{{ solid_background ? 'Solid matte enabled' : 'Transparent output' }}
Choose the destination matte to avoid low-contrast edges.
{{ artifact.label }} {{ formatBytes(artifact.bytes) }}

The favicon preview appears after the source image renders.

{{ packageExportStatus }}

FileSizePurposeCopy
{{ row.file }}{{ row.size }}{{ row.purpose }}

{{ tableExportStatus }}

{{ item.title }}{{ item.status }}

{{ 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.

Common favicon destinations and their design concerns
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.

  1. 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.
  2. Enter the Site name, choose a Package profile, and set the public Asset path used by the generated links and manifest.
  3. 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.
  4. 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:

  1. Decode one image and read its width, height, byte size, and media type.
  2. Resolve the profile's PNG and ICO sizes, then add unique extra PNG sizes from 16 to 1024 px.
  3. Draw the source into each square canvas with high-quality image smoothing, optional padding, and an optional solid matte.
  4. Encode standard and maskable canvases as PNG, assemble ICO entries, generate HTML links, and add a web manifest when the profile requires one.
  5. 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:

p=round(Nq100)

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.

scontain= min( N2pW, N2pH) scover= max(NW,NH)

The drawn dimensions are rounded once after scaling.

W=round(Ws) H=round(Hs)

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:

PNG and ICO sizes produced by each favicon package profile
Profile PNG sizes ICO entries Additional output
Full platform bundle16, 32, 48, 180, 192, 512 px16, 32, 48 pxApple link and web manifest
Minimal web16, 32 px16, 32 pxBrowser install links
PWA install32, 180, 192, 512 px32 pxApple link and web manifest
Apple/iOS32, 120, 152, 167, 180 px32 pxApple touch links
Android/PWA32, 192, 512 px32 pxWeb manifest
Legacy browser16, 32, 48 px16, 32, 48 pxClassic shortcut-icon markup
Maskable icon package32, 180, 192, 512 px plus separate 192 and 512 px maskable icons32 pxApple 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: