Skip to content

Favicon Generator Online

Browser-side — no upload
Last verified May 2026 — runs in your browser

Favicon Generator — favicon.ico + 8 PNG Sizes via Lanczos3 + In-Tree ICONDIR Encoder

Drop a square image and get a complete favicon set in one click: a real multi-resolution favicon.ico (Microsoft ICO container packing 16/32/48/64/128/256 sizes via the in-tree src/lib/ico-encoder.ts ICONDIR + ICONDIRENTRY encoder) + eight standalone PNG variants (16, 32, 48, 64, 128, 180, 192, 512 pixels) covering every modern surface — desktop browser tabs (16/32 per IE 5 1999 favicon convention), Windows Explorer file-type icons (48 per Microsoft Windows large-icon size), Apple touch icon (180 per Safari Web Content Guide iOS 8+), Android Chrome home screen (192 per W3C Web App Manifest spec), and PWA manifest splash screen (512 per W3C Web App Manifest minimum). Each size is downscaled via the in-tree Lanczos3 implementation (src/lib/lanczos.ts — Duchon 1979 reformulation of the windowed sinc filter, sharper than Canvas drawImage's default bilinear/bicubic at icon-grade sizes). Output is a downloadable ZIP bundle (favicon.ico + 8 favicon-NxN.png files) ready to drop into your site root + reference via the standard `<link>` HTML head declarations. Files never leave the device.

Related: PNG to ICO Resize Image Social Media Resizer PNG to JPG JPG to PNG WebP to JPG

How to generate the favicon set

  1. Drop a square image onto the tool (512x512 PNG with transparent background is ideal). Non-square images are centre-cropped to the largest possible square automatically.
  2. The tool generates 8 PNG variants (16/32/48/64/128/180/192/512) AND a real multi-resolution favicon.ico (packing 16/32/48/64/128/256 per Microsoft's ICONDIR spec). All sizes use Lanczos3 downscale for icon-grade sharpness.
  3. Download individual files via the per-size buttons, or grab the full set as a ZIP bundle (favicon.ico + 8 favicon-NxN.png).
  4. Drop the files into your site root and wire the HTML head: `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` + `<link rel='apple-touch-icon' sizes='180x180' href='/favicon-180x180.png'>` + a site.webmanifest pointing to the 192 + 512 PNGs for PWA install + `<link rel='icon' href='/favicon.ico' sizes='any'>` as the legacy fallback.
  5. Verify the favicon stack with caniuse, RealFaviconGenerator's favicon checker, or your browser's DevTools Application tab → Manifest section.

Common use cases

  • Producing the complete favicon set for a new website launch — covers every browser surface (desktop tabs, Apple touch icon, Android Chrome home screen, PWA install) in one pass.
  • Regenerating the favicon stack after a brand refresh so every platform picks up the new logo cleanly without one-off resizing.
  • Generating the PWA-ready icon set (192 + 512 for the manifest, 180 Apple touch icon) for a Progressive Web App that needs install-prompt artwork on Android + iOS.
  • Producing the legacy /favicon.ico fallback paired with modern declared PNG favicons via `<link rel='icon' sizes='WxH' type='image/png'>` to maximise browser + Windows Explorer coverage.
  • Building icon variants for a browser extension or developer tool that requires multiple square resolutions in a single packaged ZIP.

Frequently asked questions

Does the output include a real favicon.ico?

Yes — the output ZIP includes a real multi-resolution favicon.ico packing the standard 16/32/48/64/128/256 sizes via the in-tree src/lib/ico-encoder.ts ICONDIR + ICONDIRENTRY encoder (PNG-in-ICO 32bpp ARGB, Vista RTM 8 November 2006 format). The .ico is built browser-side, alongside the 8 standalone PNG variants. You can use the favicon.ico as the legacy /favicon.ico fallback (auto-fetched by every browser when no `<link rel='icon'>` declaration matches, plus required by IE 8 and earlier + Windows Explorer + desktop-shortcut icons) and use the standalone PNGs for the modern declared `<link rel='icon' sizes='WxH' type='image/png'>` mechanism per WHATWG HTML.

What source size should I use?

Use a 512x512 PNG with a transparent background. The 512x512 PWA manifest size is the largest output the tool generates; if your source is smaller than 512, the 512 PNG will look soft because Lanczos3 cannot recover detail that wasn't in the source. Larger sources (1024x1024, 2048x2048) work fine — they're Lanczos3-downscaled to each target size in a single pass. Square is required (non-square sources get centre-cropped to the largest possible square).

How do I wire the HTML head?

Drop favicon.ico + favicon-32x32.png + favicon-16x16.png + favicon-180x180.png + favicon-192x192.png + favicon-512x512.png at the site root, then in `<head>`: `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` + `<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>` + `<link rel='apple-touch-icon' sizes='180x180' href='/favicon-180x180.png'>` + `<link rel='manifest' href='/site.webmanifest'>` + `<link rel='icon' href='/favicon.ico' sizes='any'>`. The site.webmanifest is a JSON file the tool does NOT generate — write it by hand or via a webmanifest generator referencing the 192 + 512 PNGs with `"purpose": "any maskable"` for adaptive Android icons.

What about SVG favicons?

Modern browsers support SVG favicons declared via `<link rel='icon' href='/icon.svg' type='image/svg+xml'>` — Chrome 80+ (released 4 February 2020), Firefox 41+ (released 22 September 2015), and macOS Safari 15.6+ (released 20 July 2022). The SVG favicon scales losslessly to any resolution which is the modern best-practice for desktop browsers. This tool generates raster (PNG + ICO) only — for the SVG favicon, hand-author or export from a vector design tool (Figma, Illustrator, Inkscape) and add the `<link rel='icon' type='image/svg+xml'>` declaration alongside the PNG + ICO declarations this tool's output supports.

Why Lanczos3 downscaling instead of Canvas default?

Canvas's default imageSmoothingQuality (browser-default; settable to 'low' / 'medium' / 'high') uses a bilinear or bicubic filter — adequate for general image downscaling but produces noticeably softer edges at icon-grade sizes (16x16, 32x32) where every pixel matters. Lanczos3 (Duchon 1979 reformulation of the windowed sinc filter) preserves sharpness at small sizes by using a wider 6-tap kernel that better approximates the ideal sinc response. The in-tree src/lib/lanczos.ts helper is what ImageGridSplitter, png-to-ico, and this tool all use for icon-precision downscales. The CPU cost is roughly 2-3× bilinear, irrelevant for the 8 PNG sizes + 6 ICO sizes (sub-200ms total).

Are my files uploaded?

No. The decode + Lanczos3 downscale per size + PNG encoding + ICO container packing + ZIP bundling all run client-side via WHATWG Canvas drawImage + the in-tree Lanczos and ICO-encoder helpers + the client-zip library. DevTools Network tab shows zero upload requests during conversion.

What this tool generates and how to wire it into your HTML

The output ZIP contains nine files: one real multi-resolution favicon.ico (built via the in-tree src/lib/ico-encoder.ts encoder per Microsoft's ICONDIR + ICONDIRENTRY spec — the 6-byte header + 16-byte entry-per-size + concatenated PNG-in-ICO 32bpp ARGB data blocks; Microsoft Vista RTM 8 November 2006 PNG-in-ICO format) plus eight standalone PNG variants at 16, 32, 48, 64, 128, 180, 192, and 512 pixels. The standard HTML head wiring per WHATWG HTML Living Standard + Apple Safari Web Content Guide + W3C Web App Manifest spec: drop favicon.ico + favicon-32x32.png + favicon-16x16.png + favicon-180x180.png + favicon-192x192.png + favicon-512x512.png at the site root, then declare `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` + `<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>` + `<link rel='apple-touch-icon' sizes='180x180' href='/favicon-180x180.png'>` + `<link rel='manifest' href='/site.webmanifest'>` (the manifest JSON declares the 192 + 512 PNGs for PWA install) + `<link rel='icon' href='/favicon.ico' sizes='any'>` as the legacy fallback. Modern browsers (Chrome 4+, Firefox 3+, Safari 4+, Edge 12+) prefer the declared PNG resources via `<link>`; the favicon.ico is auto-fetched as a fallback when no `<link>` declaration matches the requested context (Windows Explorer, desktop-shortcut icons, IE 8 and earlier — IE 5 origin via Bharat Shyam at Microsoft, IE 5 release 18 March 1999 — also need the .ico). The in-tree Lanczos3 downscale is what gives icon-grade sharpness at the 16x16 and 32x32 sizes where every pixel matters; bilinear/bicubic (Canvas drawImage default smoothing) produces noticeably softer edges at those scales. The 180px Apple touch icon is the Safari Web Content Guide-specified single size since iOS 8 (auto-downscaled by Safari for older iPad mini Retina + iPhone variants). The 192 + 512 PWA manifest sizes are W3C Web App Manifest minimum recommendation; some platforms (Android Chrome maskable adaptive icons) prefer a 512x512 with `purpose: 'maskable'` declaration where artwork sits within the centre 80% safe-zone (409x409 circle) so the OS can crop to circle / squircle / rounded-square shapes without clipping. Files never leave the device — Lanczos3 + ICO encoding + ZIP bundling all run client-side.

  • Output ZIP bundle: 1 multi-resolution favicon.ico + 8 standalone PNG variants (favicon-NxN.png)
  • favicon.ico packs 16/32/48/64/128/256 sizes per Microsoft's ICONDIR + ICONDIRENTRY spec via in-tree src/lib/ico-encoder.ts (PNG-in-ICO 32bpp ARGB, Vista RTM 8 November 2006 format)
  • PNG variants 16/32/48/64/128/180/192/512 cover every modern favicon surface: desktop tab + Windows Explorer + Apple touch icon + Android Chrome + PWA manifest
  • 180x180 Apple touch icon per Apple Safari Web Content Guide iOS 8+ (single size auto-downscaled by Safari)
  • 192 + 512 PWA manifest sizes per W3C Web App Manifest minimum spec (Android Chrome home screen + splash screen)
  • Lanczos3 downscale per size for icon-grade sharpness via in-tree src/lib/lanczos.ts (sharper than Canvas drawImage default at small sizes)
  • Browser-side via WHATWG Canvas drawImage + Lanczos3 + in-tree ICO encoder + client-zip ZIP bundling — no upload
  • Operates in sRGB (IEC 61966-2-1:1999); source images without an embedded ICC profile are interpreted as sRGB

Free. No signup. No file uploads. Ads via AdSense (consent required).

Sources (9)
  • Microsoft Corporation (1985). ICO Icon File Format — ICONDIR + ICONDIRENTRY container structure. learn.microsoft.com/en-us/previous-versions/ms997538(v=msdn.10) — target favicon.ico container format used for the legacy /favicon.ico fallback; the in-tree src/lib/ico-encoder.ts implementation writes the 6-byte ICONDIR header + 16-byte ICONDIRENTRY-per-size + concatenated PNG-in-ICO 32bpp ARGB data blocks per Microsoft's spec.
  • Microsoft Corporation (2006). ICO PNG-encoded image data (Windows Vista large icons). devblogs.microsoft.com/oldnewthing/20101022-00 (Raymond Chen, 22 October 2010) — Windows Vista (RTM 8 November 2006; general consumer availability 30 January 2007) introduced PNG-compressed image data inside the ICO container in 32bpp ARGB format; the in-tree encoder uses this format for every embedded ICO size since it preserves alpha cleanly + keeps file size small.
  • Apple Inc. (live). Safari Web Content Guide — Configuring Web Applications: apple-touch-icon. developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html — Apple touch icon mechanism: place an icon file in PNG format named apple-touch-icon.png in the root document folder OR declare via `<link rel='apple-touch-icon' sizes='180x180' href='...'>`; since iOS 8 the recommended size is 180x180 pixels (single size, auto-downscaled by Safari for older iPad mini Retina + iPhone variants).
  • W3C (live). Web App Manifest — Working Draft (icons + maskable purpose). w3.org/TR/appmanifest — standardised PWA install metadata; minimum recommendation per Chromium/web.dev guidance: 192x192 (Android Chrome home screen) + 512x512 (PWA splash screen + maskable adaptive icon). Maskable icon requires `"purpose": "any maskable"` declaration with artwork inside the centre 80% safe-zone (409x409 circle) per developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons.
  • WHATWG (live). HTML Living Standard — link rel='icon' + sizes attribute + apple-touch-icon. html.spec.whatwg.org/multipage/links.html#rel-icon + html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes — the modern declared favicon mechanism per browser auto-fetch ordering: declared `<link rel='icon' sizes='WxH' type='image/png'>` resources rank ahead of /favicon.ico when matching context, but /favicon.ico is auto-fetched as the fallback when no `<link>` declaration matches; supported across Chrome 4+, Firefox 3+, Safari 4+, Edge 12+.
  • Shyam, B. (Microsoft Corporation) (1999). favicon.ico convention introduced in Internet Explorer 5. thehistoryoftheweb.com/how-we-got-the-favicon — Bharat Shyam at Microsoft introduced the favicon convention shipped with Internet Explorer 5 (released 18 March 1999); /favicon.ico at site root is the legacy fallback every browser still auto-fetches today, and the only mechanism IE 8 and earlier (Windows Explorer + desktop-shortcut icons too) accepts.
  • Duchon, C. E. (1979). Lanczos Filtering in One and Two Dimensions. Journal of Applied Meteorology Vol. 18 No. 8 (August 1979) pp. 1016-1022 — Lanczos3 algorithm reformulation of the windowed sinc filter; the in-tree src/lib/lanczos.ts implementation uses the 6-tap kernel (a=3) for sharper icon-grade downscaling than Canvas drawImage's default bilinear/bicubic at small target sizes (16x16, 32x32). Cluster 12 OI png-to-ico + cluster 13 OI favicon-generator both use this helper.
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; source images without an embedded ICC profile are interpreted as sRGB by the browser decoder during the load step.
  • Cornell, T. (client-zip) (live). client-zip — Streaming ZIP creation in the browser. github.com/Touffy/client-zip (MIT license) v2.x — minimal-footprint ZIP creation library used by the tool to bundle the favicon.ico + 8 PNG variants into the downloadable favicons.zip; streams to the browser without loading the entire archive into memory.

These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.

Sponsored

By ·