Skip to the tool
CALCPARK

Favicon Generator

Turn a logo into a complete favicon set: multi-size favicon.ico, 16/32/48 px PNGs, Apple touch icon, Android icons, site.webmanifest and the HTML snippet in one ZIP.

Files stay on your device
Loading the tool…

How to use it

  1. Drop a logo (PNG with transparency or SVG works best). Drag the square or type Left/Top/Size in pixels.
  2. Enter the site name, short name and the theme/background colours for the manifest. Tick the fill option for transparent logos.
  3. Press Generate, check the real-size previews (16 px is what a tab shows), download the ZIP and paste the snippet into your <head>.
  4. Upload the files to the site root so that /favicon.ico and /site.webmanifest resolve.

Example

A 1,200 × 800 px PNG logo: select a 700 px square around the mark, name the site “Acme Tools” with short name “Acme” and theme colour #1f5f4a. The ZIP (about 60–120 KB) contains favicon.ico with three PNG-compressed images, six PNGs from 16 to 512 px, a manifest whose icons array points at the two Android sizes, and favicon-snippet.html with seven lines of markup.

How the package is built

The crop is cut from the full-resolution image and scaled to each size with stepwise halving and imageSmoothingQuality = 'high', then encoded as PNG with canvas.toBlob(). The ICO file follows the classic layout: a 6-byte ICONDIR header (type 1), one 16-byte ICONDIRENTRYper image (width, height, 32 bpp, byte size, offset) and the PNG streams appended in order – PNG entries are valid since Windows Vista and in every browser. The manifest uses the Web App Manifest fields name, short_name, icons, theme_color, background_color and display: standalone.

Why these sizes: 16/32 px tabs and bookmarks (32 on HiDPI), 48 px is what Google requires for search-result icons and Windows uses for site shortcuts, 180 px is the iOS touch icon, 192 and 512 px are the minimum Chrome needs to offer “Install app”. Limits: no “maskable” padded variant is generated (add 10–20 % safe-zone padding yourself if you need one); animated sources use the first frame; HEIC is refused.

Sources: MDN – Web app manifest: icons, Google Search Central – favicon guidelines (48 px multiples), Apple – Configuring web applications (apple-touch-icon), ICO file format (Wikipedia).

Do I still need favicon.ico?

Modern browsers accept PNG and SVG icons from <link rel="icon">, but many crawlers, feed readers and older clients request /favicon.ico directly, so keeping it at the root costs nothing. List the SVG first when you have one: browsers that understand it prefer the crisp vector at every size.

Questions

Why does my icon look blurry at 16 px?
Fine detail and thin lines cannot survive at 16 × 16. Crop tightly around a bold mark, avoid text, and check the real-size preview; some designers draw a simplified version just for the small sizes.
Should the background be transparent?
For browser tabs yes, transparency looks best in light and dark themes. For the Apple touch icon iOS fills transparency with black, so either tick the fill option or accept the black backdrop.
What is site.webmanifest for?
Android and desktop Chrome read it to show the home-screen icon, the splash screen colours and the app name when a visitor installs the site. The snippet links it with rel="manifest".