Boneyard Tools

Favicon sizes and the HTML link tags explained

Which favicon sizes a modern site actually needs, what each PNG is for, and the exact link tags to paste into the head of your pages.

Open the Favicon Generator →

Why one 16px icon is no longer enough

In the early web a single 16x16 favicon covered every case. Today a browser tab may render at 16 or 32px, a Windows shortcut wants 48px, iOS pins a 180px touch icon to the home screen, and Android and progressive web apps reach for 192 and 512px versions. Each context scales an image differently, so shipping only a tiny icon leaves the larger ones blurry. Generating one clean PNG per size keeps the mark crisp everywhere it appears.

What each file is for

The favicon-16x16 and favicon-32x32 files handle the browser tab and its retina variant, while favicon-48x48 covers Windows taskbar pins and desktop shortcuts. The apple-touch-icon at 180px is what iOS shows when someone adds your site to their home screen. The android-chrome files at 192 and 512px feed Android home-screen icons and the splash art a PWA displays while it loads. This tool outputs all six from a single source image so the set stays visually consistent.

The link tags and where they go

Copy HTML gives you five <link> tags: three PNG icon tags for the 32, 16 and 48px files, one apple-touch-icon tag for the 180px file, and one icon tag for the 192px Android file. Paste them inside the <head> of every page, or into a shared layout so they apply site wide. The 512px file is not a plain link tag; it belongs in a web app manifest, which most frameworks generate for you when you enable PWA support.

Placement, caching and common mistakes

Upload each PNG so its href resolves from the site root, meaning /favicon-32x32.png loads directly in the browser. The most common mistake is a stale cache: browsers hold on to favicons far longer than normal images, so a fresh icon may not appear until you hard refresh or visit the file URL once. Another pitfall is a non-square source image, which gets center cropped, so keep the important part of your logo near the middle.

Frequently asked questions

Do I need a manifest file too?

For a basic favicon, no; the link tags are enough. To make the site installable as a PWA with the 512px icon and a name, add a web app manifest that lists the android-chrome files.

Can I use SVG favicons instead?

Some browsers accept an SVG favicon, but PNG support is universal and predictable. Shipping the PNG set avoids rendering gaps in older browsers and on iOS home screens, which do not use SVG.