Favicon Generator

Introduction

A favicon is the smallest brand asset many visitors ever see, but it has to survive several very different contexts. The same mark can appear in a browser tab, a bookmark menu, a mobile home-screen shortcut, a search result, a web app install prompt, and a launcher grid. Each surface asks for a square icon, but the useful size, crop behavior, and fallback rules are not identical.

Good favicon preparation starts with recognizability at tiny sizes. Fine strokes, long wordmarks, subtle shadows, and low-contrast details often look polished at 512 pixels and disappear at 16 pixels. A simple centered symbol, strong foreground/background contrast, and enough empty space around the main shape usually matter more than preserving every detail from the full logo.

Browser icon

The image linked with rel="icon", often supplied as small PNG files plus a favicon.ico fallback.

Touch icon

A larger square PNG that iOS and iPadOS can use when a page is saved to the Home Screen.

Manifest icon

An icon listed in a web app manifest for install prompts, launchers, app lists, and similar app-like surfaces.

Maskable icon

A manifest icon with important artwork kept near the center so platform masks can crop the outer edge safely.

Square source artwork is the safest starting point because many favicon consumers assume a 1:1 image. Transparent backgrounds can look clean in browser tabs, while installed app icons may be composited over a platform-chosen shape or color. A solid matte is sometimes better when a pale or transparent mark would disappear on light browser chrome or launcher backgrounds.

Deployment is part of the job. The icon files, document-head links, manifest entries, and public paths need to agree, and old icons can remain visible while browsers, content delivery networks, mobile launchers, and search crawlers refresh their caches. Stable URLs and crawlable square icons are easier to diagnose than a scattered set of renamed files.

How to Use This Tool:

A sample mark is rendered by default so the file ledgers and previews are visible before you load your own artwork. Replace the sample with one image, choose the target profile, then check the readiness rows before downloading the ZIP or copying the markup.

1. Drop, paste, or browse one file in Source image. The file must be a browser-readable image and must be smaller than 40 MB. If several files are selected, only the first file is used.
2. Enter Site name for the manifest name and short name. This text is not drawn onto the icons.
3. Choose Package profile for the deployment target. The profile sets default PNG sizes, ICO sizes, HTML links, manifest output, Apple touch icons, and maskable output rules.
4. Set Asset path to the public folder that will hold the downloaded files, such as / or /assets/icons/. The generated links and manifest entries use this prefix.
5. Edit PNG sizes and ICO sizes only when the profile defaults need adjustment. PNG entries are filtered to unique values from 16 to 1024 pixels, and ICO entries are filtered to unique values from 16 to 256 pixels.
6. Pick Image fit, Safe padding, and Background. Use contain with 6 to 12 percent padding for most logo marks, cover for edge-to-edge artwork, and solid background when the mark needs a predictable square behind it.
7. Open Readiness Ledger, Icon File Ledger, Icon Byte Profile, HTML Links, and Manifest JSON. Fix any Review or Blocked row before using Download ZIP.

Interpreting Results:

The readiness status checks whether the selected source, profile, size lists, and generated artifacts are internally consistent. Deployable set means the current outputs meet the page's profile rules. It does not guarantee that the smallest icon is visually recognizable, that every platform will pick the same file, or that search results will refresh immediately.

• Source shape deserves review when the image is not close to square or is smaller than 512 pixels on its shortest side.
• Profile PNG set, ICO fallback, Apple touch icons, and Manifest icons identify missing required sizes for the selected profile.
• Maskable icons applies only to the maskable profile and checks for separate padded 192 and 512 pixel icons with manifest purpose maskable.
• Icon Byte Profile shows which generated files are unusually large. Use it with the preview grid, because byte size cannot tell whether a 16 pixel icon still reads correctly.
• Local processing confirms that the source image is decoded, resized, zipped, and exported in the browser tab rather than uploaded for conversion.

After downloading, upload the whole set to the same Asset path, paste the generated head markup into the site, and open the linked files directly in a fresh browser tab. If the old favicon persists, confirm the served file path first, then wait for browser, CDN, launcher, or crawler caches to update.

Technical Details:

Favicon generation is a rasterization and packaging problem. A decoded image is drawn into square pixel grids, each grid is exported as PNG, and selected small PNGs are also placed inside a multi-entry ICO container. The HTML sizes attribute describes the actual pixel dimensions of the referenced icon, so a 32x32 link should point to a real 32 by 32 pixel image.

Manifest icons add purpose and selection rules. Standard manifest entries use purpose any, while maskable entries are prepared for user-agent masks that may crop the edge. The W3C safe-zone model keeps the guaranteed visible area inside a centered circle with radius 40 percent of the icon size, so important artwork should not sit near the outer rim.

Transformation Core

Formula Core

For contain rendering, padding reduces the available square before scaling. Let S be the target icon size, W and H be the decoded image width and height, and p be the safe-padding percent.

A 1024 by 768 image rendered to 32 pixels in contain mode with 8 percent padding rounds to 3 pixels of padding on each edge. The available box is 26 by 26 pixels, so the image draws about 26 by 20 pixels and is centered. In cover mode, the same source fills the full 32 by 32 square and crops the left and right edges.

Profile Defaults

The generated PNG and ICO files do not preserve embedded image metadata, animation frames, or color profiles from the source. File-size ledgers help catch heavy outputs, but the final quality check is still visual: inspect the 16 and 32 pixel previews before deploying the files.

Privacy Notes:

Source images are decoded, rendered, zipped, and downloaded in the browser tab. The artwork is not uploaded for conversion, but the generated files are intended for publication, so review the mark, file names, and generated paths before placing them on a live site.

• Use artwork that you are allowed to publish as a favicon, touch icon, or app icon.
• Expect embedded metadata, color profiles, and animation frames to be removed during raster output.
• Check small previews manually because readiness rows cannot judge brand recognition.
• Keep icon URLs stable when replacing files so browsers and crawlers can update predictably.

Worked Examples:

Small marketing site. A 1024 by 1024 PNG logo named blue-lantern.png uses Minimal web, asset path /, PNG sizes 16,32, ICO sizes 16,32, contain fit, and 8 percent padding. Favicon Package should include PNG files, favicon.ico, and a README, while Manifest JSON should be skipped for this profile.

Installable product app. A square 1200 pixel app mark uses PWA install, asset path /assets/icons/, solid white background, and profile defaults. Manifest JSON should include 192 and 512 pixel icon entries, HTML Links should include the manifest link, and Readiness Ledger should mark manifest icons as ready.

Wide wordmark warning. A 1200 by 400 logo can render, but Source shape should show Review. Use contain fit with more padding if the whole wordmark must remain visible, or make a simpler square mark before relying on tiny browser icons.

Maskable launcher check. A 1024 by 1024 icon with artwork near the edge can use Maskable icon package, but the preview still needs review. The maskable 192 and 512 pixel icons use contain fit, solid backing, and at least 18 percent padding.

FAQ:

Glossary:

Favicon

A small site icon used by browsers, bookmarks, shortcuts, and some discovery contexts.

ICO fallback

A legacy icon container that can hold multiple small images inside one favicon.ico file.

Apple touch icon

A PNG that iOS and iPadOS can use when a page is saved to the Home Screen.

Web app manifest

A JSON document that can describe installable app metadata, including icons, name, colors, and display mode.

Maskable icon

An app icon prepared with centered safe-zone artwork so platform masks can crop the edges.

Asset path

The public folder prefix used in the generated HTML links and manifest icon paths.

Safe padding

The empty space added around contain-mode artwork before it is rendered into each square icon.

References:

• HTML link type icon, WHATWG.
• Web Application Manifest, W3C.
• Define a favicon to show in search results, Google Search Central.
• Web app manifest icons, MDN Web Docs.
• Configuring Web Applications, Apple Developer Documentation.