How to make a favicon.ico: the sizes and formats you actually need

Updated 2026-10-24

A favicon is the small icon shown in browser tabs, bookmarks and search results next to your site's name. Getting it right takes five minutes once you know which files browsers actually look for.

The sizes that matter

A favicon.ico file can contain several images at different sizes. Browsers pick the one that fits: 16×16 for tabs, 32×32 for high-density screens and the taskbar, 48×48 for Windows shortcuts. Putting all three in one ICO covers almost every case.

Phones use separate files. iOS looks for a 180×180 PNG (apple-touch-icon), and Android and installable web apps use 192×192 and 512×512 PNGs listed in a web manifest.

ICO, PNG or SVG?

ICO is the most compatible option and the one browsers request automatically at /favicon.ico. PNG favicons work in all modern browsers when you link them explicitly. SVG favicons scale perfectly and are supported by current Chrome, Edge and Firefox, but not by every browser, so keep an ICO as a fallback.

Design tips for something that's 16 pixels wide

Start from a square image. Simplify: a single letter or a bold shape survives being shrunk; a detailed logo with fine text turns into a smudge. Use strong contrast, and check how it looks on both light and dark browser tabs.

If your logo is an SVG, convert from the SVG rather than a PNG. Vector artwork is redrawn fresh at each size, so even the 16-pixel version stays sharp.

Making the file and adding it to your site

Convert your PNG, JPG or SVG with Localvert's PNG to ICO or SVG to ICO tool. You get one favicon.ico containing 16, 32 and 48 pixel versions. Non-square images are padded rather than cropped, and transparency is kept.

Place favicon.ico at the root of your site and add this line inside <head>: <link rel="icon" href="/favicon.ico" sizes="any">. Browsers cache favicons aggressively, so if you don't see the change, try a private window.