DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Generating a Complete Favicon Set From a Single Image

#webdev #design #beginners #programming

Your designer hands you a single PNG of the logo. You need favicons for every platform: browser tabs, bookmarks, home screen icons, PWA manifests, Windows tiles, social sharing. The number of sizes and formats is overwhelming until you understand which ones actually matter and how to generate them from a single source.

The complete set

If you want comprehensive coverage, here are all the sizes with their purposes:

Browser tab (essential):

  • 16x16 ICO/PNG: Classic browser tab size
  • 32x32 ICO/PNG: Retina browser tabs and bookmarks

Apple (essential):

  • 180x180 PNG: Apple Touch Icon for iOS home screen

Android/PWA (important for web apps):

  • 192x192 PNG: Android Chrome home screen
  • 512x512 PNG: PWA splash screen and install dialog

Microsoft (optional):

  • 150x150 PNG: Windows tile (medium)
  • 270x270 PNG: Windows tile (wide, if you want wide tile support)

Social/Open Graph (separate concern):

  • 1200x630 PNG: Open Graph image for social sharing (not technically a favicon but often generated alongside)

The minimum viable set

For most websites, you need exactly three files as described in the previous article. For a PWA, add the 192x192 and 512x512 sizes referenced in your web app manifest.

Source image requirements

Start with the highest quality source available:

  • Ideal: SVG of the logo/icon
  • Good: PNG at 512x512 or larger with transparent background
  • Acceptable: PNG at 180x180 or larger
  • Problematic: JPEG (no transparency), small images (under 100x100)

If your source is a full logo with text, you likely need a simplified icon version. Text at 16x16 pixels is unreadable. Most companies use a logomark (symbol only) for their favicon and the full logotype (symbol + text) elsewhere.

The generation pipeline

From a 512x512 PNG source, the pipeline is:

  1. Resize to each target dimension using high-quality Lanczos resampling
  2. For ICO: embed the 32x32 (and optionally 16x16) PNG in an ICO container
  3. For Apple Touch Icon: add opaque background if the source has transparency
  4. For PWA: ensure both 192x192 and 512x512 are maskable (important content within the safe zone of the icon, as Android may apply circular or rounded square masking)

The "maskable" requirement for PWAs means your icon content should fit within the inner 80% of the image, with background color filling the outer edges. Android may crop to a circle, rounded square, or other shape depending on the device.

The web app manifest

For PWAs, the manifest.json references your icons:

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Include both a regular and maskable version of the 512x512 icon. The regular version is used in contexts that do not apply masking. The maskable version is used when the OS applies its own icon shape.

The generator

For generating the complete favicon and icon set from a single source image, I built a favicon generator that produces all necessary sizes, formats (ICO, PNG, SVG), and provides the HTML tags and manifest entries ready to paste into your project.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)