Cool Easy

← All articles

How to make a complete favicon and app-icon set in under a minute

A proper favicon set means a multi-size favicon.ico, PWA icons, iOS and Android ladders, social cards, and Chrome extension icons — all from a single source image. Here's how to generate the whole thing without uploading your logo anywhere.

4 May 2026 · 4 min read

Why getting favicons right is harder than it looks

Most developers add a single 32×32 favicon.ico and call it done. That worked in 2010. Today, a browser tab is only one of many places your icon appears.

Pin a site to an iPhone home screen and iOS looks for an apple-touch-icon at 180×180. Add it to Android and the launcher looks for 192×192 and 512×512. Install it as a PWA and the manifest needs at least two icon sizes for the browser to recognise it as installable. Share a link on Twitter or LinkedIn and the social crawler pulls an Open Graph image at 1200×630 — if that's missing, it uses whatever image it finds first, which is usually wrong. Build a Chrome extension and you need 16, 32, 48, and 128 pixel variants.

Do this manually for one project and you'll count at least eight separate exports from your image editor. Do it for a client project and you'd better not upload their brand assets to a random favicon-generator site to save time.

The jobs themselves aren't complex — they're just mechanical and repetitive.

The system

Step 1: Prepare your source image

The icon generator only runs once, but the output has to look sharp at 16×16. That means starting from the highest quality source you have.

Best: an SVG — a vector icon scales to any size without interpolation artifacts.

Good: a square PNG at 512×512 or larger. Most brand assets and app icons are at least this size.

Avoid: a rectangular logo. The icon-set generator needs a square crop. If your logo is wide (a wordmark), isolate the icon/mark component, not the full lockup — wordmarks collapse to an illegible smear at 16×16.

If you only have a rectangular PNG, crop it to the square mark before generating. Toolbelt's crop tool can do this: open the image, drag a 1:1 aspect-ratio selection around the mark, export.

Step 2: Generate the icon set

Open Toolbelt's side panel and navigate to the icon-set generator. Drop your source image. It produces a single ZIP file organised into folders:

The whole thing runs in the browser. Nothing is uploaded.

Step 3: Add the icons to your project

Unzip the output and drop the contents into your public directory — typically /public/icons/ or the root if you want favicon.ico at /.

The HTML head tags you'll almost always need:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icons/browser/favicon-32.png" type="image/png" />
<link rel="apple-touch-icon" href="/icons/ios/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

In your site.webmanifest (or manifest.json):

{
  "icons": [
    { "src": "/icons/pwa/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/pwa/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

For the social images, add Open Graph tags:

<meta property="og:image" content="https://yourdomain.com/icons/social/og-image.png" />
<meta name="twitter:image" content="https://yourdomain.com/icons/social/twitter-card.png" />

Step 4: Verify in the browser

Open DevTools → Application → Manifest (for PWA validation). Check the favicon shows correctly in browser tabs by opening the site in an incognito window (avoids the cached old favicon). Test the apple-touch-icon by using Safari on iOS and adding the page to the home screen.

For a quick external check, Favicon Checker (third-party) lets you paste a URL and see which sizes are found. Useful for confirming everything landed correctly.

Common mistakes

Starting from a compressed JPEG. JPEG artifacts are invisible at 400×400; they're visible and ugly at 32×32. Always export from your design tool as PNG or use an SVG.

Generating favicons from the full wordmark. A horizontal logo reduced to 16×16 is an unrecognisable smear. Use the standalone icon or symbol — the part of the brand that works at small sizes.

Forgetting to update the manifest icons. Adding new icon sizes to the HTML head but not updating the web-app manifest means the PWA install prompt either doesn't appear or uses the wrong icon.

Uploading an unreleased logo to generate icons. Pre-launch projects, rebrands, and client work often have brand assets under NDA or embargo. Local generation avoids the question entirely.

Not clearing the favicon cache. Browsers cache favicons aggressively. After updating icons, use an incognito window or force-clear the cache. Otherwise you'll spend 20 minutes convinced the update isn't working.

FAQ

What sizes does a complete favicon set actually need?

"At minimum: 16×16 and 32×32 for browser tabs, 180×180 for iOS home screen (apple-touch-icon), 192×192 and 512×512 for PWA manifests, and an Open Graph image (1200×630) for social sharing. If you're publishing a Chrome extension, 16×16, 32×32, 48×48, and 128×128. Android adaptive icons need 512×512. The full list is longer than most developers expect."

Should I start from a PNG or SVG?

SVG is better if you have one — it scales to any size without quality loss, so the small sizes (16×16, 32×32) look sharper. If you only have a PNG, use the highest resolution version you have. 512×512 or larger gives good results at small sizes; anything below 256×256 will look soft at the smallest sizes.

What's the difference between favicon.ico and a PNG favicon?

favicon.ico is a container format that embeds multiple sizes (typically 16×16, 32×32, 48×48) in one file. Browsers that don't support PNG favicons (older IE, some email clients) fall back to it. Modern browsers will use a PNG favicon if you link one, but serving both covers all bases. The ico file is mainly a legacy compatibility measure at this point.

Do I need to upload the ZIP anywhere to use it?

No — the ZIP is just a folder of images. Unzip it, drop the contents into your project's public directory, and add the appropriate link tags to your HTML head. The exact tags depend on which sizes you need; most projects need at minimum the favicon.ico, apple-touch-icon.png, and the two PWA manifest icons.

Will Toolbelt upload my logo to generate the icon set?

No. The entire generation process runs in your browser. Nothing is sent to a server. That means your unreleased logo, brand mark, or client asset doesn't pass through any third-party infrastructure.