How to make a favicon for your website

Making a favicon means rendering one square drawing at several fixed pixel sizes, packaging the small ones into a single .ico file, and telling browsers where to find each of them with <link> tags. There is no single magic file: a browser tab, an iPhone home screen and an installed web app each ask for something different, which is why a favicon arrives as a small set rather than one image.

The quickest route here: open Favicon Generator, drop a square PNG or SVG of at least 512 px, type your site name (it goes into the manifest), optionally tick Add 10% padding or Fill background, then click Generate favicons. The ZIP contains favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest — seven files, plus the HTML shown below the previews. Your image is rendered in the browser and is not uploaded.

The sizes that still matter

File	Size	Who asks for it
favicon.ico	16, 32 and 48 px in one file	Browser tabs, bookmarks, Windows shortcuts, and any browser that requests /favicon.ico on its own
favicon-16x16.png, favicon-32x32.png	16 and 32 px	Current browsers, when the <link> tags point at them
apple-touch-icon.png	180 px	iOS and iPadOS, when a site is added to the home screen
android-chrome-192x192.png	192 px	Android home screen shortcuts
android-chrome-512x512.png	512 px	Android splash screens, and the installability check in Chrome
site.webmanifest	—	Names the site and lists the 192 and 512 px icons for installable web apps

Everything else you may have seen — 64, 96, 144, the long list of old Windows tile sizes — is a leftover from browsers and phones that have since moved on. A 16 px icon is 256 pixels in total. That is the real design constraint, not the number of files.

The HTML to paste

Put the files at the root of your site, so they answer at yoursite.com/favicon.ico, then paste this into the <head> of every page. It is the exact snippet the generator gives you:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

On a framework, "the root" is whatever folder is served from / — usually public/ or static/. On a hosted site builder or a CMS, look for a "site icon" setting instead: WordPress has one under Appearance → Customise → Site Identity → Site Icon, and it generates the sizes itself from a single square image of 512 px or more.

SVG favicons

A browser that supports them will prefer an SVG, because one vector file is sharp at every size. Add it above the PNG lines, keeping the .ico as a fallback:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chrome, Firefox and Edge have supported SVG favicons for years; Safari came to them later, so do not drop the .ico. The useful trick an SVG makes possible is a colour that follows the browser theme, because a style block inside the file is honoured:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Our generator rasterises an SVG you give it into the PNG sizes; it does not output an SVG favicon, so that file is one you write or export yourself, for instance from Inkscape with File → Save As → Optimised SVG.

Start from the right drawing

• Make it square. A non-square source is scaled to fit inside the square and centred, which leaves empty bands on two sides and makes the icon look smaller than its neighbours. Trim it first with Crop Image.
• Simplify. One letter, one symbol, or the mark from your logo without the wordmark. Text that is legible on a business card is unreadable across 16 pixels.
• Start large. 512 px or more. Resize Image can enlarge a small source, but enlarging invents no detail; an SVG or a big PNG always gives a cleaner 16 px result.
• Mind the mask. Android crops installed icons to a device-specific shape, and iOS applies its own rounded corners — so never draw rounded corners or a border yourself, and keep the important part inside the middle 80% of the square. The Add 10% padding option is a reasonable default for that.

What the generator does, and does not do

• Each size is rendered separately from your source with smoothing, rather than shrunk from the previous one.
• favicon.ico is a container holding three complete PNG images, at 16, 32 and 48 px. Browsers and Windows have read PNG-in-ICO for a very long time.
• The manifest declares your site name, a short name cut to the first 12 characters, the 192 and 512 px icons, display: standalone, and a theme and background colour that follow the Fill background setting (white when it is off).
• It does not set purpose: "maskable" on the icons, does not produce an SVG, does not vary the artwork per size, and does not upload anything to your server. If you want a simplified 16 px version and a detailed 512 px one, make two source images and run the generator twice.
• realfavicongenerator.net is a good alternative when you want per-platform previews and finer control over the manifest.

Why you still see the old icon

This is the failure that wastes the most time, and it is almost never a problem with your files. Browsers cache favicons separately from pages, and a hard reload of the page often does not re-fetch them. Check in this order:

1. Open yoursite.com/favicon.ico directly in a tab and reload it there. If the new icon appears, your files are fine and only the cache is stale.
2. Try a private window, or another browser, to see the state a first-time visitor gets.
3. If you need the change to propagate now, version the URL: href="/favicon.ico?v=2". The browser treats it as a new address.
4. In Chrome, DevTools → Application → Manifest lists the manifest icons and reports the ones it could not load — the quickest way to catch a wrong path.

Common problems, and what they mean

The icon looks blurry in the tab. The drawing has too much detail for 32 px, or the source was small and got enlarged. Simplify the artwork rather than adding sizes.

The icon vanishes on a dark theme. A dark mark on a transparent background disappears against a dark tab strip. Fill the background with a colour, or use an SVG with the prefers-color-scheme rule above.

The Apple icon shows on black. iOS does not display transparency on home screen icons, so transparent areas render as black. Tick Fill background and choose your brand colour before generating.

Chrome says the site is not installable. The manifest must be reachable and must list an icon of at least 192 px and one of 512 px. A 404 on /site.webmanifest, usually from uploading the files to a subfolder, is the common cause.

The icon is right on desktop and wrong on the phone. Phones read the Apple icon and the manifest, not favicon.ico. Check that all three were uploaded, not just the .ico.

Questions people ask

Do I still need favicon.ico? Yes. Browsers request /favicon.ico on their own even with no <link> tag, and it is the fallback that works everywhere.

Can one PNG replace the whole set? For browser tabs, yes. You lose the home screen icon on iOS and the installable-app icon on Android.

What size should my source image be? Square, 512 px or larger, or an SVG. Beyond that, size matters less than simplicity.

Does the favicon affect search rankings? It is shown next to some mobile search results, which is a reason to have one. Nothing in these files controls when or whether a search engine picks it up.

Can I use a photograph? You can, but at 16 px a photograph turns into coloured mush. A flat shape with strong contrast reads far better.

Next steps

• Turn a vector logo into a PNG at a chosen size: SVG to PNG
• Square up or tighten the source: Crop Image and Resize Image
• Produce a standalone .ico from any image: Image Converter