Favicon Sizes: The 3 Files Every Website Needs, and the 3 an App Adds

The same small square has to work in a browser tab, next to your name in Google and on a phone's home screen, and the files behind it run from 32 to 512 pixels wide.

What sizes does a favicon need?

Each file has one job, so each has its own size. The drawing below puts them on one sheet, to scale against each other.

Sources: file set and sizes from Evil Martians; browser versions from Can I use (read 2026-10-16); the 192 and 512 minimum for Chromium from web.dev; Google's formats and link types from Google Search Central.

Which HTML tags load the icons?

Three lines in the <head> of every page load the three files. The sizes value on the ICO line and the 180 x 180 comment are from the Evil Martians guide.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180x180 -->

For an installable site, add one more line, <link rel="manifest" href="/manifest.webmanifest">, and add this icons array to that file. The manifest also needs fields such as name, start_url and display before a browser offers to install the site (web.dev).

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

Two safety nets help if a tag goes missing. The HTML standard lets a browser fetch /favicon.ico from the site root when a page has no icon link (HTML Living Standard, link type "icon"), and Apple's guide says an apple-touch-icon.png in the root folder covers every page (Safari Web Content Guide). Keep both files at the root.

Where does each file show up?

Sources: Google Search Central, Apple, web.dev on manifests, web.dev on maskable icons, Evil Martians.

Why does a logo turn to mush at 16 pixels?

A tab draws your icon on a tiny grid, and every thin line or letter must land on whole pixels. A full logo with a leaf and a wordmark becomes grey noise; one bold letter on a solid square stays readable. The Evil Martians guide suggests asking a designer for a version of the logo made for small pixel grids when the shrunk logo looks blurry.

Both drawings are invented examples for a made-up brand, drawn pixel by pixel for this page.

What does Google need to show your favicon in search results?

Google lists these rules in its favicon guidelines (last updated 2026-08-28). Meeting all of them makes the icon eligible; Google says it is still not guaranteed to appear.

• The icon link is on your home page. A subdomain home page counts; a folder such as /news does not.
• Square (1:1) and at least 8 x 8 pixels. Google recommends larger than 48 x 48.
• A supported format: BMP, GIF, ICO, PNG, JPEG, PPM or TIFF. SVG is not on the list, so keep a raster file linked too.
• Googlebot-Image can crawl the icon file and Googlebot can crawl the home page: neither is blocked.
• The icon URL is stable: you do not change it often.
• It represents your brand. Google replaces icons it deems inappropriate with a default icon.

After a change, Google has to recrawl the home page, which can take several days to several weeks. You can request indexing of the home page with the URL Inspection tool in Search Console.

How do you make all six files from one drawing?

1. Draw one square master

   Start from a square version of the mark, built from a few bold shapes and no small text.

2. Export the SVG, with a dark mode

   Save the master as icon.svg. A prefers-color-scheme: dark media query inside the SVG can switch a dark fill to a light one, as the Evil Martians guide shows.

3. Make the 32 x 32 ICO from the small-grid version

   Look at it at real size in a tab. If the 32 pixel file blurs when the browser scales it down, add a hand-made 16 x 16 version.

4. Make the 180 x 180 Apple touch icon

   Add about 20 pixels of padding around the mark and a background color: Evil Martians says it looks better that way.

5. Make the 192 and 512 PNGs

   Export the master at both sizes for the manifest.

6. Make the 512 maskable icon

   Keep everything important inside a central circle with a radius of 40% of the width (web.dev). On a 512 canvas that is a circle about 409 pixels wide (Evil Martians). Let the background run to the edges, because the launcher crops them.

7. Upload, link, then leave the URLs alone

   Put the files at the root, add the tags above, and keep the URLs stable so Google does not have to relearn them.

A favicon is part of how your site looks wherever it is shared. The same goes for the preview card a chat app draws for your link: see Open Graph tags that fix link previews.

Favicon words, defined

Favicon

The small square icon that identifies a website in browser tabs, bookmarks and search results.

ICO

An image file format that can hold several sizes of one icon; the classic favicon format.

Apple touch icon

The PNG that iPhone and iPad use when someone adds a page to the Home screen, linked with rel="apple-touch-icon".

Web app manifest

A JSON file, linked with rel="manifest", that tells browsers the name and icons to use when a site is installed as an app.

Maskable icon

An icon with extra padding that a launcher may crop to its own shape; Android calls these adaptive icons.

Safe zone

The central circle of a maskable icon, 40% of the icon's width in radius, that is never cropped.

Common favicon questions

Sources

• Define a favicon to show in search results, Google Search Central, last updated 2026-08-28.
• How to Favicon in 2026: Three files that fit most needs, Andrey Sitnik, Evil Martians, 2026-01-21.
• SVG favicons, Can I use.
• Link type "icon", HTML Living Standard, WHATWG.
• Configuring Web Applications, Safari Web Content Guide, Apple.
• Add a web app manifest and Adaptive icon support in PWAs with maskable icons, web.dev.
• All pages read on 2026-10-16.

• X
• LinkedIn
• Facebook
• Email