How to make a favicon for your website

A favicon is the small icon in a browser tab, a bookmark list, a phone's home screen and — increasingly — next to your site in search results. It is a tiny file, but a missing or blurry one makes a site look unfinished.

The files a website needs

Different browsers and devices look for different files, which is why one image is not enough. A complete set covers:

• favicon.ico — containing 16, 32 and 48-pixel versions, for browser tabs and Windows. Browsers request /favicon.ico automatically, even when a page declares nothing.
• 16 and 32-pixel PNGs — the versions modern browsers prefer for tabs.
• apple-touch-icon.png, 180 × 180 pixels — used when someone adds your site to an iPhone or iPad home screen.
• 192 and 512-pixel PNGs — for Android home screens and installable web apps.
• site.webmanifest — a small file that tells Android and browsers your site's name and where these icons are.

The Favicon Generator produces all of them in one ZIP.

Design for 16 pixels

The hardest part of a favicon is that its most common size is 16 × 16 pixels — 256 dots in total. A full logo with a wordmark becomes an unreadable smudge. What works:

• One bold shape or a single letter, taken from your logo. Most well-known favicons are a monogram or a symbol, not the full logo.
• Strong contrast. Tabs can be light or dark, so a mid-grey icon on a transparent background can vanish in one of them. A solid background shape — a rounded square or a circle — guarantees contrast on both.
• Some padding, so the design does not touch the edges.
• Your brand colour. If you are not sure of the exact value, the Color Palette Extractor reads it from your logo as a HEX code.

The generator shows enlarged previews of the small sizes. Keep simplifying until the 16-pixel version is still recognisable.

Make the favicon step by step

1. Start with a square source: a logo exported at 512 pixels or larger, an SVG, or simply one or two letters or an emoji typed into the generator.
2. Choose the shape, padding and background, and watch the small previews.
3. Enter your site name for the web manifest.
4. Download the ZIP.

If your logo is an SVG with fonts or linked images in it, you may get a better result by first rendering it to a large PNG with SVG to PNG, checking it looks right, and using that as the source.

Add it to your site

1. Upload the files to the root of your site, so they are served from addresses such as example.com/favicon.ico and example.com/apple-touch-icon.png.
2. Paste the HTML the generator gives you into the head section of every page — in a site template or theme this is usually one shared file.
3. If you put the files in a folder instead of the root, change the paths in the HTML and in site.webmanifest to match.

Website builders and content management systems usually have a “site icon” setting instead. Upload the 512-pixel PNG there and let the platform create the rest.

Why your new favicon does not show

Browsers cache favicons stubbornly, sometimes for days. To check the new one is really in place, open the icon's address directly, such as example.com/favicon.ico, or load your site in a private window. If the direct address shows the old icon or an error, the file is not where the HTML points.

Favicons in search results

Google shows a site's favicon next to its results on mobile and desktop. Its guidance asks for a square icon, recommends one larger than 48 × 48 pixels, and requires that search crawlers can fetch both the icon and the home page that declares it. A complete set with the 192 and 512-pixel icons covers the size, and it can take some time after a change for search results to pick up the new icon.

The Apple touch icon is different

iPhones and iPads add their own rounded corners to home-screen icons and show transparent areas as black. That is why the Apple touch icon always gets a solid background, even if your other icons are transparent. Leave a little padding so the rounding does not clip your design.