What is a favicon? Size, formats and how to make one

What is a favicon?

A favicon is a small square image that stands for a website in a browser. The name is short for “favorite icon”, in MDN’s glossary. Browsers show it in tabs, bookmarks and history. Phones use a larger copy for a Home Screen shortcut. Google can show it beside your site in search results.

Favicons began with Internet Explorer 5 in March 1999, as Wikipedia’s favicon article records. The file was favicon.ico, in the Windows ICO format, at the site’s root. Microsoft’s Internet Explorer 9 guide calls it a “site icon (also called shortcut icon, or favicon)”.

Today the HTML Standard defines it as a link with rel=“icon”. The standard says a browser “should” use the icon “when representing the page in the user interface”.

What size should a favicon be?

A favicon should be a square: 32 × 32 pixels for a browser tab, larger for phones and Google. The 32 is our reading, not an owner’s rule. MDN gives 16 × 16 as the usual size. A 2x screen draws 16 CSS pixels with 32 real ones. The HTML Standard counts the sizes attribute in “raw pixels (as opposed to CSS pixels)”.

Favicon dimensions and file size, measured

Favicon files are small: the Blinkimg mark is 643 bytes at 32 × 32. We sized the mark, a 750 × 750 PNG, to each size with Blinkimg’s engine. Each file was saved as PNG at Auto, which keeps at most 256 colours.

The mark has flat colours, so Auto needed only 36 colours at 32 × 32. Quality 100 keeps every colour the resize made. From 16 × 16 up, it cost 2.1 to 6.1 times the bytes. Laid on white, each Auto file scored a PSNR of 42.2 dB or more against its quality 100 twin. PSNR measures how close one file stays to another; higher is closer.

Why a favicon must be a simple mark

A favicon reads best as a simple mark, because a 16 × 16 icon has only 256 pixels. We drew the engine’s four smallest files 192 pixels wide, every pixel a square:

At 8 × 8, Google’s minimum, the mark is a green smudge. At 16 × 16 the sun and the bolt survive as a few pixels each. At 32 × 32 every shape reads.

Words fare worse. We drew a test wordmark, the word Blinkimg in white on the same green. We sized it the same way:

ICO, PNG or SVG: which favicon format to use

A PNG is the format the owners agree on: MDN, Apple’s guide and Google’s format list all name PNG. Each format has one job:

• PNG: one file per size, with a see-through background. What is a PNG file opens one byte by byte.
• ICO: “A single .ICO file can contain multiple images of different resolutions”, Microsoft’s Internet Explorer 9 guide says. Internet Explorer 9 took only ICO.
• SVG: one vector file that stays sharp at every size. The caniuse site counts 91.61% of users with support; Safari joined at version 26.0. Serve it as image/svg+xml, caniuse notes.
• JPG, GIF, BMP: Google lists them too, but a JPG has no transparency. Turn a JPG logo into a PNG with the JPG to PNG converter first.

Google’s list of favicon formats has no SVG. So an SVG favicon needs a PNG or ICO linked beside it for search results.

What is favicon.ico?

The favicon.ico file is a website’s icon in Microsoft’s ICO format, kept at the site’s root. A browser may fetch it without any link. The HTML Standard allows a request for /favicon.ico when a page has no icon link.

An ICO is a container. It opens with a 6-byte header, then a 16-byte entry for each image, Microsoft’s icon article shows. We built one with Pillow 12.3.0 from the engine’s 16, 32 and 48 pixel PNGs. Its first 22 bytes:

Each image inside can be a PNG or an old-style bitmap (BMP). We saved the same three images both ways with Pillow:

The pixels were the same, so the gap is compression: the BMP version came out 7.6 times larger. Blinkimg’s own favicon.ico comes from our site’s build script, which wraps the engine’s PNGs as they are. Pillow re-saves each PNG entry, which made its copy 59 bytes smaller. The file command reads all three:

Which icon file does a browser load?

We served five test pages from this Mac and logged every file requested. Playwright drove headless Chromium 149, at 1x and 2x, and its WebKit 26.5 build. Chromium asked for /favicon.ico only when a page had no icon link. On the others it took one linked icon, or the next one after a 404.

The two PNG links drew one request, for the 32 pixel file, even at 2x. The SVG beat the ICO in either order. When the 32 pixel file was missing, the browser tried the 192 next. That matches the standard’s rule for an icon found inappropriate: a browser “must try the next-most-appropriate icon”.

Chromium never fetched the apple-touch-icon; Apple’s guide ties that link to iPhone and iPad Home Screens. Playwright’s WebKit build asked for no icon at all. A headless test build is not the browser on your desk, so read these logs as one build’s behaviour.

How to add a favicon in HTML

To add a favicon in HTML, put link elements with rel=“icon” in the head of every page. This set covers the cases in this post:

The ICO line matches our ICO-then-SVG test page. Keep favicon.ico at the site’s root too, for any client that asks for it without a link. The older rel=“shortcut icon” still works: the standard allows “shortcut” for historical reasons.

The manifest lists the large icons. For Chromium, in web.dev’s words, “you must provide at least a 192x192 pixel icon and a 512x512 pixel icon.”

Safari also looks for apple-touch-icon.png at the root when no link names one, says Apple’s Safari Web Content Guide. Its own example links a 180 × 180 file.

How Google shows your favicon in search results

Google can show the favicon your home page links, one per hostname, when its rules are met. The rules sit on Google Search Central, last updated 28 August 2026:

• “Your favicon must be a square (1:1 aspect ratio) that’s at least 8x8px.”
• Its advice: “we recommend using a favicon that’s larger than 48x48px so that it looks good on various surfaces.”
• The formats it supports: “BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF”.
• “Googlebot-Image must be able to crawl the favicon file and Googlebot must be able to crawl the home page”.
• “The favicon URL must be stable (don’t change the URL frequently).”

A 192 × 192 PNG meets the size advice; ours from the engine is 3,047 bytes. Google adds that a favicon “isn’t guaranteed to appear” even when every rule is met. A new icon waits for a recrawl, which can take “several days to several weeks”.

How to make a favicon

To make a favicon, start from one square mark and save it at each size as a PNG. Five steps cover it:

1. 1

   Start from a square master

   Export your mark as a square PNG of 512 × 512 pixels or more. Give it a see-through background. Enlarging a small icon adds no detail: how to resize an image without losing quality measures why.

2. 2

   Simplify it for 16 pixels

   Drop the words and thin lines. Check a 16 × 16 copy enlarged, as in our test.

3. 3

   Make each size

   Open the 512x512 resizer, fit the mark and save it as a PNG. For 32, 180 and 192, use Custom size in the image resizer. It takes 16 to 8,192 pixels a side.

4. 4

   Wrap an ICO, if you want one

   Blinkimg has no favicon generator; the resizer makes the PNGs. Blinkimg’s engine writes JPG, PNG, WebP and AVIF, not ICO. An ICO tool wraps your PNGs into one file. We used Pillow, a free Python library: one save call with three sizes.

5. 5

   Link the files and check

   Add the link tags, upload the files and open the site in a new tab. A changed icon may need a cleared cache or a new file name, Microsoft’s Internet Explorer 9 guide warns.

Your PNGs are already small at Auto. To squeeze a large PNG further, the PNG compressor keeps it a PNG. Favicons are one part of a fast page; image optimization for the web covers the rest.