PNG to favicon.ico and multi-size icon packs

Published: 2026-09-05

How browser favicons and app icons use multiple sizes, what goes in favicon.ico vs PNG packs, HTML link tags that matter, and how to generate an icon set locally from one square source image.

A favicon is the small mark that shows in browser tabs, bookmarks, and some OS “add to home screen” flows. Modern sites rarely ship a single 16×16 GIF anymore: you typically need a .ico for legacy and tab defaults, plus PNG sizes for Apple, Android, and high-DPI tabs—and a short block of <link> tags so agents pick the right file.

This guide covers sizes that still matter, how PNG-in-ICO works, what to put in <head>, and how to build a pack from one raster source without uploading brand art.

Why one size is not enough

Browsers and platforms request icons at different pixel dimensions:

Size (px) Common use
16 / 32 Classic tab / bookmark icons; often packed inside favicon.ico
48 Older Windows / ICO consumers; still useful in a multi-size .ico
180 Apple touch icon (apple-touch-icon)
192 / 512 Android Chrome / PWA-style maskable or launcher icons
Other High-DPI tabs, shortcuts, and “just in case” PNG fallbacks

Serving only a tiny 16×16 bitmap looks soft on retina displays. Serving only a huge 512 PNG wastes bandwidth when the UI only needs a tab glyph. A pack lets each consumer pick a near-native size.

What is favicon.ico?

.ico is a container format that can hold one or more bitmap images (historically BMP, commonly PNG frames today). Putting 16×16, 32×32, and 48×48 in one favicon.ico remains a reliable default: many browsers still look for /favicon.ico at the site root even when you also declare PNG <link> tags.

Practical notes:

  • Prefer a square source. Generators usually center-crop non-square images so every size stays square.
  • Start from a sharp high-resolution master (often 512×512 or larger). Upscaling a soft 32×32 logo will not invent detail.
  • SVG favicons (<link rel="icon" type="image/svg+xml" href="…">) are excellent where supported, but many pipelines still ship a raster .ico + PNG pack for broad coverage. LocalTools’ Favicon Generator works from raster inputs (PNG, JPEG, WebP, GIF, BMP)—export SVG to PNG first if your master is vector (SVG Minifier helps clean SVG before export).

MIME and extensions for image types are covered in MIME types and file extensions. Compression trade-offs for PNG vs JPEG source art are in Lossy vs lossless image compression.

HTML <link> tags that matter

A typical modern head snippet looks like:

<link rel="icon" href="/favicon.ico" sizes="any" />
<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="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />

Guidelines:

  • Keep paths consistent with where you actually deploy files (site root vs /icons/…). Adjust hrefs if your ZIP layout differs.
  • sizes helps user agents choose; wrong sizes confuse more than they help.
  • apple-touch-icon is still the common way iOS home-screen bookmarks pick a large square PNG.
  • A web app manifest (icons array) is separate from tab favicons; large 192 / 512 PNGs often feed both.

You do not need every size on every site. Tabs + Apple + one Android size cover most marketing sites; PWAs and install prompts benefit from the full set.

Source art checklist

Before you generate:

  1. Square composition — logo centered with safe margin; avoid text that disappears at 16×16.
  2. Contrast — tab bars are tiny; thin lines vanish. Test a downscaled preview.
  3. Transparency — PNG with alpha works well for icons; JPEG sources get an opaque canvas fill after crop/resize.
  4. No secret in the pixels — product shots and unreleased brands should not be uploaded to random online converters (Why “local only” matters for developer tools).

If the master is a photo-heavy mark, compress or resize first with Image Optimizer. For tiny inline experiments (not production favicons), Image to Base64 can embed a data URL—remember Base64 inflates size (Embedding images as Base64 data URLs).

Generate a pack locally

Online “PNG → ICO” sites often upload your logo. Browser tools that decode with FileReader, resize with canvas, pack PNG frames into an ICO, and ZIP the rest keep pixels on the device.

Open Favicon Generator:

  1. Drop one raster image (max 8 MB; SVG not supported—export PNG first).
  2. Toggle output sizes (16 through 512). Apple (180) and Android (192 / 512) names are used in the ZIP when those sizes are selected.
  3. Download favicon.ico (prefers 16 / 32 / 48 when available) and/or the ZIP pack, then paste the generated HTML <link> tags into your document head.

Place favicon.ico at the site root (or update links) and deploy PNG paths to match the snippet. Prefer a high-resolution square source for crisp results at every size.

Related reading

← All learn articles