How to create a favicon for your website

The favicon is the small icon in the browser tab, the bookmarks bar, the history list, the iPhone home screen and next to your site's name in search results. It is often the only piece of your brand a visitor sees when they have twenty tabs open. Getting it right used to mean juggling a dozen sizes. Today a handful of files covers every platform that matters.

This guide covers what to produce, how to design an icon that survives 16 pixels, how to install it, and how to diagnose the most common problems.

The files a modern site needs

• favicon.ico containing 16, 32 and 48 px images. Browsers request /favicon.ico on their own even without any HTML, Windows uses it for shortcuts, and it is the safest fallback.
• apple-touch-icon.png at 180×180. Used when someone adds the site to the home screen on an iPhone or iPad.
• icon-192.png and icon-512.png. Android home-screen icons and the splash screen of an installed web app.
• site.webmanifest. A small JSON file that points to the two Android icons and, if you want the site installable, describes it.
• Optionally, icon.svg. A single vector icon that browsers which support SVG favicons render sharply at any size, and which can switch colours for dark mode.

Everything else you may see in older tutorials, such as dozens of PNG sizes and browser-specific tile images, is no longer needed for a typical site.

Generate the set from one logo

1. Prepare a square source. An SVG is ideal; otherwise a PNG of at least 512×512.
2. Open Favicon generator and drop the file. PNG, JPG, WebP and SVG up to 20 MB are accepted.
3. Download the ZIP. It contains favicon.ico (16, 32 and 48 px inside), apple-touch-icon.png, icon-192.png, icon-512.png and site.webmanifest.
4. Copy the files to the root of your site, next to the home page.

Every size is drawn directly from the original, so an SVG is rasterised natively at 16 px rather than being shrunk from a large bitmap. Rendering happens in your browser; the logo is not uploaded. A source that is not square is scaled to fit and centred, with transparent space on the shorter sides.

The generator does not produce icon.svg. If you want an SVG favicon, copy your own SVG logo to the site root under that name.

Add the HTML

Put these lines in the <head> of every page, or in the shared layout template:

<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">

<link rel="manifest" href="/site.webmanifest">

Leave out the SVG line if you do not have one. The sizes="32x32" attribute on the ICO line matters when an SVG is present: it stops some browsers from picking the ICO over the sharper SVG.

The generated manifest lists the icons with absolute paths such as /icon-192.png. If your site lives in a subfolder rather than at the domain root, edit those paths to match.

Designing an icon that survives 16 pixels

At 16×16 there are 256 pixels in total. No export setting rescues a design that needs more than that.

• Use the mark, not the logo. A single letter, a monogram or the symbol without the wordmark. Words become a grey smear below 32 px.
• Thick shapes, few colours. Lines thinner than about 1/16 of the icon's width vanish at the smallest size. Two colours with strong contrast read best.
• Fill the square. Trim empty margins in the source. A logo floating in transparent space ends up tiny in the tab.
• Test both tab themes. Tab bars can be light or dark. A black mark on a transparent background disappears on a dark theme. A solid coloured shape behind the mark, such as a rounded square, works on both.

If the logo is wide, cut it down to its symbol with Crop image at 1:1 before generating. If a raster logo only exists at a small size, enlarging it with Upscale image gives the 512 px icon cleaner edges than plain stretching.

Dark mode with an SVG favicon

An SVG favicon can contain a CSS media query for prefers-color-scheme: dark and change its fill colour when the browser uses a dark theme. This is the cleanest fix for a dark mark that disappears on dark tabs. Keep the ICO as a fallback, because not every browser uses SVG favicons.

Need PNGs at other sizes

Some platforms, plugins and app stores ask for a specific PNG size the set does not include. SVG to PNG renders your vector logo at any width you type, with a transparent background.

Platform details worth knowing

iPhone home screen

iOS does not display transparency on home-screen icons; transparent areas are filled, usually with black, and the corners are rounded by the system. Since the generator keeps transparency, use a source with a solid background colour for the Apple touch icon. Do not round the corners yourself.

Android and installable sites

Android launchers may crop icons to a circle or another shape. To make the site installable as an app, open site.webmanifest in a text editor and add at least name, short_name, start_url, display (for example standalone) and theme_color. If you mark an icon as "purpose": "maskable", keep the important part of the design within the central 80% of the square, since the edges can be cut off.

Search results

Google shows a site icon next to results. Its guidelines ask for a square icon whose size is a multiple of 48 px, referenced from the home page and crawlable. The 48 px layer in the ICO and the 192 px PNG both qualify. Changes in search results can take days or weeks to appear, because the icon is refreshed when the home page is recrawled.

Troubleshooting

• The old favicon keeps showing. Browsers cache favicons aggressively, separately from the page. Open /favicon.ico directly and reload it, or add a version query such as ?v=2 to the icon links.
• The icon is blank or broken. Open each file URL in the browser. A 404 usually means the files went into a subfolder instead of the site root, or the server needs the right type for .webmanifest.
• The icon looks blurry in the tab. The 16 and 32 px versions came from a detailed source. Prepare a simplified version for the small sizes.
• A black square on the iPhone home screen. The source had a transparent background. Regenerate from a version with a solid background.
• A thin line in the middle of the square. The source was a wide wordmark. Crop to the symbol first.

Checklist

1. Simplify the logo to a mark that reads at 16 px and works on light and dark tabs.
2. Make it square, ideally as SVG, otherwise PNG of 512×512 or larger.
3. Generate the set and copy all files to the site root.
4. Add the four link tags to the head, adding icon.svg only if you have one.
5. Complete the manifest if the site should be installable.
6. Check each file URL directly, then test on a phone home screen.