How to Make a Favicon for a Website

A favicon — short for "favorite icon" — is the tiny square image that shows up in a browser tab, on a bookmark, in the history list, and next to a site name on a phone home screen. It is one of the smallest pieces of a website, and one of the most often forgotten. Get it right and your site looks finished and instantly recognizable among fifty open tabs; skip it and every visitor sees a blank page tile that makes the site feel unfinished. This guide walks you through making a favicon from any PNG, JPG, or logo, the exact sizes every modern site should ship, the HTML tags that declare it, and how to fix the "it still isn't showing" problem.

What is a favicon and why it matters

The word is short for "favorite icon," a term Netscape coined in 1999 when it first let browsers save bookmarks with a tiny visual marker next to them. Today the favicon has outgrown the bookmarks bar. It appears in at least six places at once:

• Browser tab strips, where people scan twenty open tabs by icon instead of reading the page titles.
• The address bar, on most desktop browsers.
• Bookmarks bars and bookmark managers.
• History lists and search suggestions.
• iOS "Add to Home Screen" tiles, delivered through the apple-touch-icon.
• Android launchers and browser chrome for installed Progressive Web Apps.

A favicon is not a direct ranking factor in search results, but it does affect how often people click your listing and how quickly they recognize your brand across tabs, bookmarks, and app shelves. Sites without a favicon also serve a 404 on /favicon.ico, which browsers request automatically on every page load — one extra failed round trip before your page is even painted.

The favicon sizes you actually need

A favicon is not a single image. It is a small set of images, because the same icon is rendered from 16 pixels wide in a desktop tab to 180 pixels wide on a phone home screen. One master file scaled down by the browser almost always looks muddy. The professional setup ships a multi-resolution ICO file for legacy browsers plus separate PNGs for modern ones.

The classic approach packs 16, 32, and 48 (and optionally 64) into a single .ico file. ICO is a container format: one file holds several bitmaps, and each browser picks the closest match. Modern Chrome, Edge, Firefox, and Safari also accept PNG and SVG directly, which is why you add the PNG and apple-touch-icon declarations alongside the legacy ICO rather than replacing it.

Make a favicon from a PNG or logo (free, in your browser)

You do not need Photoshop, a paid ICO editor, or a design subscription. If you already have a square logo — even a 1024 × 1024 PNG export — you can turn it into a proper multi-size favicon in about a minute. PixlReady's PNG to ICO converter runs locally in your browser: your image is processed on your device and never uploaded, and there is no account, no watermark, and no file-size queue.

Convert PNG to ICO — Free

Step 1 — Start with a clean square master

Begin from a square source. A 512 × 512 or 1024 × 1024 PNG of your logo mark works best — the icon part of the logo, not the wordmark, because letters turn to mud at 16 pixels. If your master is not square, drop it into the crop tool and pull the handles to a 1:1 square centered on the mark. If it is much larger than 1024 pixels, shrink it with the resize tool so the final ICO stays under a few tens of kilobytes.

Step 2 — Generate the multi-size ICO

1. Open the PNG to ICO converter and drop in your square master.
2. Tick the sizes you want packed into the file. The recommended set is 16, 32, and 48; add 64 if you ship to high-resolution Windows desktops.
3. Click Convert to ICO. The tool writes a single favicon.ico containing every size you selected.
4. Download the file and keep it as favicon.ico.

Because the conversion happens on your device, you can repeat it as many times as you like while tuning the logo — no quota, no upload, no waiting on a queue. If your source is a JPG rather than a PNG, run it through the image converter first so transparency and compression artifacts are handled cleanly.

Step 3 — Export the PNG and touch-icon variants

The ICO covers legacy browsers, but modern tabs and iOS want separate PNGs. From the same master, export three PNGs at 16×16, 32×32, and 180×180. You can do this by re-running the resize tool to each target size and choosing PNG output, or by exporting from your design tool. Name them consistently — for example favicon-16x16.png, favicon-32x32.png, and apple-touch-icon.png — so the HTML below matches exactly. Once they are exported, run them through the image compressor to shave off any unused bytes; a favicon should weigh in at well under 50 KB.

Design rules so the icon reads at 16 pixels

Most "bad favicon" problems are not technical — they are design problems. A logo that looks great at 512 pixels turns into an unrecognizable grey blob at 16 pixels. Follow these rules when you prepare the master:

• One idea, one shape. A single glyph, letter, or simple symbol beats a detailed illustration. Drop the tagline, the URL, and any secondary icon.
• Fill most of the canvas, but leave breathing room. The mark should occupy roughly 70–80% of the square. Too small and it disappears on a busy tab strip; too big and the browser crops it into a corner.
• Use high-contrast colors. Two or three brand colors with strong contrast read at 16px; gradients and subtle shading turn to mush. A solid brand-color background with a white or dark glyph is the safest, most recognizable pattern.
• Avoid fine detail and thin strokes. Hairlines vanish at 16px. Stroke weights should be no thinner than about 10% of the canvas.
• Test at 16×16 before you export. Resize your master down to 16 pixels and stare at it. If you cannot tell what it is, simplify — do not ship it.

Making a transparent-background favicon

Most logos ship on a white or colored background. On a browser tab that background shows up as an ugly square behind your mark, especially in dark mode. The fix is to cut the background out of the master before you convert it to ICO.

Open your logo in PixlReady's background remover. It runs locally in your browser — your image is processed on your device and never uploaded — and produces a clean PNG with transparent pixels around the glyph. From there, feed the transparent PNG into the ICO converter exactly as in step 2 above. The ICO format preserves the alpha channel, so rounded corners and cut-out edges survive all the way down to 16×16.

Declaring the favicon in your HTML head

Once the files are ready, drop them in the root of your site and declare them in the <head> of every page. The block below is the modern, broadly supported setup. The example.com address is a reserved placeholder — replace it with your own domain, or simply use root-relative paths such as /favicon.ico, which work on any domain without editing:

<!-- Legacy: old browsers auto-request /favicon.ico anyway -->
<link rel="icon" href="https://example.com/favicon.ico" sizes="32x32">

<!-- Modern browsers: PNG at the sizes they actually render -->
<link rel="icon" type="image/png" sizes="32x32" href="https://example.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://example.com/favicon-16x16.png">

<!-- iOS home-screen tile -->
<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/apple-touch-icon.png">

<!-- Android / PWA manifest -->
<link rel="manifest" href="https://example.com/site.webmanifest">

Save the ICO at /favicon.ico in your web root — browsers request that path by default even without a tag, so it is the no-configuration fallback. The PNG files and the apple-touch-icon should live wherever your href points; keeping them in the root is the simplest convention and the easiest way to avoid a broken relative path.

For the PWA manifest, create a small site.webmanifest file in the same directory:

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    { "src": "https://example.com/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "https://example.com/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

If you already have an SVG logo, you can also declare it directly with <link rel="icon" type="image/svg+xml" href="https://example.com/favicon.svg">. Chromium and Firefox pick it up and it scales perfectly to any screen density; Safari still falls back to the PNG and ICO you listed, so keep the legacy tags regardless.

Why your favicon isn't showing (and how to fix it)

The favicon is the single most aggressively cached asset on the web. Before you assume the code is wrong, assume the cache. Work through these in order:

1. Hard-refresh. Press Ctrl+F5 on Windows or Cmd+Shift+R on Mac, or open the favicon URL directly in a new tab — https://yourdomain.com/favicon.ico — to force a fresh fetch.
2. Check the path. Open DevTools → Network, reload, and look for favicon.ico. A 404 means the file is not where your tag points. Relative paths are the usual culprit; prefer root-relative paths starting with /.
3. Check the file type. An ICO renamed from PNG works in some browsers and fails in others. If you exported from the converter, the file is a real ICO container. If you hand-renamed a PNG, re-run the conversion.
4. Clear site data. Browsers cache favicons aggressively, sometimes across restarts. In DevTools → Application → Clear storage, hit "Clear site data," then reload.
5. Try an incognito window. Incognito starts with an empty cache. If the favicon appears there but not in your normal profile, you know it is a caching issue, not a code issue.
6. Wait for external surfaces. Search engines and bookmark sync services re-read favicons on their own schedule; a brand-new favicon can take days to propagate into Google search results.

If the file loads correctly in a direct browser tab but still does not appear on your site, double-check that your <link> tags sit inside <head> and before any page content. A link tag accidentally placed in the footer is ignored by most browsers.

Make your favicon in one sitting

You now have the full pipeline: a square master, a multi-size ICO, transparent edges, the HTML declarations, and a troubleshooting checklist. The whole process — from a 1024 PNG to a live favicon — takes about five minutes, and because the conversion runs locally in your browser, you can iterate as often as you want without uploading anything to a server.

Build your favicon.ico now

Need to polish the master first? Start from a transparent logo with the background remover, square it up with the crop tool, and shrink oversized exports with the resizer before converting.