FileNaut
Guides
Images10 min readUpdated 2026-08-10

How to Make a Favicon for Your Website

Tools mentioned in this guide
Favicon GeneratorResize ImageConvert Image

A favicon is the small icon that sits in the browser tab, in your bookmarks, in the history dropdown, and next to your site in Google's search results. It is roughly sixteen pixels wide and it is the single most-seen piece of branding your site owns — every visitor looks at it every time they switch tabs.

Making one is easy. Making one that shows up everywhere is where people get stuck, because most advice online is a decade out of date — you will find "favicon packages" offering twenty-two files for Windows tiles and BlackBerry devices that no longer exist. You do not need them.

This guide covers the five files modern browsers and phones actually use, the exact HTML to paste into your <head>, how to check you got a genuine .ico instead of a renamed PNG, how to design something legible at sixteen pixels, and the real reason your favicon is not updating. Build the icon as you read with FileNaut's free Favicon Generator — it runs entirely in your browser, so your logo is never uploaded anywhere.

What a favicon is, and how browsers find it

A favicon is an image file the browser requests separately from your page. There are two ways it finds one:

  1. Automatically. Every browser requests /favicon.ico from the root of your domain whether you asked it to or not. Drop a file at that exact path and it works with zero HTML.
  2. Explicitly. A <link rel="icon"> tag in your <head> points at whatever file you like, at whatever path. This overrides the automatic lookup and is how you serve modern formats and phone-sized icons.

You want both. The root favicon.ico is the safety net that catches every browser, crawler and RSS reader ever written; the link tags are how you serve something sharper to everything made this decade.

Because the icon is a separate request, it is also cached separately — which is why changing it feels like it never took effect. More on that below.

The only favicon sizes that still matter

Ignore the twenty-file icon packs. Five files cover every browser, phone and platform in real use:

File Size What uses it
favicon.ico 16 + 32 (48 optional) Tabs, bookmarks, history, search results, every legacy client. The one non-negotiable file.
icon.svg Vector, any size Modern desktop browsers. Stays crisp at any zoom and can change colour in dark mode.
apple-touch-icon.png 180 × 180 iPhone and iPad "Add to Home Screen".
icon-192.png 192 × 192 Android home screen, via your web app manifest.
icon-512.png 512 × 512 Progressive web app splash screen and install prompts.

If you only ever ship one file, ship favicon.ico at your site root. It covers the tab, the bookmark and the Google result — ninety per cent of the value.

Why .ico at all, in this century? Because ICO is a container. One .ico holds 16×16, 32×32 and 48×48 side by side, and the browser picks whichever fits the slot it is filling — including the larger versions high-density displays ask for. One file, several resolutions, no extra requests.

How to make a favicon (step by step)

Start from the highest-resolution square version of your logo you have — ideally 512 × 512 or larger. Everything downstream is a downscale.

  1. Open the FileNaut Favicon Generator.
  2. Drag your image onto the drop zone, or click Browse Files. PNG, JPG, WebP and GIF all work. A PNG with a transparent background gives the cleanest result.
  3. Check the preview. It shows your image beside a scaled-down version so you can see what actually survives at icon size. If it turns to mush here, go back and simplify the artwork — see the design rules below.
  4. Click Download Favicon (.ico). The file is generated in your browser and saved straight to your downloads folder — nothing is uploaded.
  5. Rename it to exactly favicon.ico if your browser added a suffix like favicon(1).ico, and upload it to the root of your site so it is reachable at https://yoursite.com/favicon.ico.

Square your artwork first. Icons are square, and a wide logo gets squashed to fit rather than letterboxed — a 64 × 24 banner becomes a stretched 32 × 32. Crop or pad to 1:1 with the Image Resizer before generating, or better, use just the symbol from your logo rather than the full lockup.

For the PNG sizes in the table above, run your source through the Image Resizer at 180, 192 and 512 pixels. If your source is a JPG, convert it to PNG first with the Image Converter so you keep transparency.

Check what you actually downloaded

Here is a trap that catches people using almost every free favicon tool online, including some very popular ones: a file named favicon.ico is not necessarily an ICO file.

The reason is a quirk of how browsers export images. Web tools generate icons on an HTML canvas, and when code asks the canvas for an ICO the browser quietly ignores the request and hands back a PNG — same filename, different format, no error. Nobody usually notices, because browsers inspect a file's contents rather than trusting its extension, and will happily render a PNG sitting at /favicon.ico.

It stops being harmless the moment something validates the format: CMS and hosting control panels reject the upload, icon-checking services report it invalid, and you lose the multi-size behaviour entirely, because a single PNG only has one resolution.

How to check in five seconds. On macOS or Linux, ask the operating system what the file really is:

file favicon.ico

A genuine multi-size icon reports itself clearly:

favicon.ico: MS Windows icon resource - 3 icons, 16x16, 32x32, 48x48

A PNG wearing an .ico extension gives itself away just as clearly:

favicon.ico: PNG image data, 32 x 32, 8-bit/color RGBA, non-interlaced

On Windows, open the file in any hex viewer and read the first four bytes. A real ICO starts with 00 00 01 00; a PNG starts with 89 50 4E 47 — those last three bytes are literally the letters "PNG".

FileNaut's generator packs 16, 32 and 48 pixel versions into one genuine ICO container, so file reports all three. If a tool fails this check, keep the PNG and reference it directly with a link tag rather than pretending it is an ICO.

Where the files go, and the HTML to paste

Upload all five files to the root directory of your site — the same folder your homepage is served from. Then paste this into the <head> of every page, ideally in your shared template or layout file:

<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="/manifest.webmanifest">

That is the whole thing. Browsers pick the best format they understand and ignore the rest, which is why a modern SVG and a legacy ICO can sit side by side with no fallback script.

The manifest is a small piece of JSON telling Android and PWA installers which icons to use:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Use leading slashes. Write /favicon.ico, not favicon.ico. Without the slash the path resolves relative to the current page, so an icon that works on your homepage silently 404s on /blog/some-post/ — the most common favicon bug there is, and invisible until someone lands on a deep page.

Designing something readable at 16 pixels

Sixteen pixels is about the width of a lowercase letter in this paragraph. Almost nothing survives at that size unless it was designed to. Five rules do most of the work:

  1. Use one shape, not your logo. Take the mark, the monogram, or a single distinctive element. A full logo lockup with a wordmark next to a symbol becomes an unreadable smudge.
  2. Delete the text. Words are illegible below roughly 48 pixels. A single letter can work; a company name cannot.
  3. Push the contrast. Your icon has to read against a light tab bar and a dark one. Mid-grey on mid-blue disappears in both. Test it on both themes before you commit.
  4. Trim the padding. Whitespace that looks elegant on a business card wastes a third of your sixteen pixels. Let the shape fill the square.
  5. Judge it at actual size. Everything looks good zoomed to 400%. Shrink the preview to real size, sit back, and see whether you can still tell what it is. If not, simplify and try again — that loop takes two minutes in a browser-based generator.

Why your favicon is not showing up

You uploaded the file, you refreshed, nothing changed. This is the most common favicon complaint and it is almost always one of six things — in rough order of likelihood:

  1. It is cached, and a normal refresh will not clear it. Browsers cache favicons separately from pages and hold them for a long time. Visit the icon's URL directly — type yoursite.com/favicon.ico into the address bar — and hard-refresh that. You are refreshing the icon, not the page. Failing that, use a private window, which starts with an empty icon cache.
  2. The path is relative. Worth repeating because it is so common: use /favicon.ico, with the leading slash.
  3. The file is not actually at the root. Visit the URL directly. Your 404 page instead of an image means the upload went somewhere else — common when a deploy pipeline only publishes public/ or dist/.
  4. Your server returns HTML with a 200 status. Some hosts serve a styled "not found" page with a success code, so the browser gets HTML where it expected an image and gives up silently.
  5. A CDN is holding the old file. Purge at the CDN, not just in your browser. Otherwise add a version query to the link tag — /favicon.ico?v=2 — which most caches treat as a new file. This only works for the explicit link tag, not the automatic root lookup.
  6. You are testing over file://. Favicons behave inconsistently when a page is opened straight from disk. Use a local dev server.

One thing you cannot rush: the icon beside your site in Google results. Google refreshes that on its own crawl schedule, which can take weeks. If the file is reachable and the page is indexed, the rest is patience.

Platform quirks worth knowing

  • iOS turns transparency black. Apple composites apple-touch-icon.png onto a solid background, so a transparent logo arrives floating on black. Give that file an explicit background colour. iOS also adds its own rounded corners — do not round them yourself, or you get a double-rounded edge.
  • SVG favicons can follow dark mode. An SVG carries its own stylesheet, so a prefers-color-scheme rule inside the file flips the icon's colour with the user's theme. That is the one genuine advantage of shipping one.
  • Safari does not use SVG favicons. It falls back to the ICO — which is why the block above lists both, and why "just ship an SVG" is wrong on its own.
  • Animated GIF favicons work in Firefox. They are also read as spam. Do not.

Tips

  • Start from a square source of at least 512 × 512, and keep that master file. Every other size is a downscale of it, and you will redo this when the brand changes.
  • Verify the format with file favicon.ico before you upload, not after someone reports it broken.
  • Put the link tags in your shared layout, not one page. A favicon that only works on the homepage mostly does not work.
  • Check the result in a private window. Your own browser has the old icon cached and will lie to you.
  • Do not ship the framework default. A Next.js, Vite or WordPress starter icon in a live tab reads as an unfinished site.

FAQs

What size should a favicon be? ▼
Your favicon.ico should contain 16 × 16, 32 × 32 and 48 × 48 versions inside the one file. Separately, ship a 180 × 180 PNG for iOS home screens and 192 × 192 plus 512 × 512 PNGs for Android and progressive web apps. Start from a square source of 512 pixels or more and scale down.
Do I still need a favicon.ico file? ▼
Yes. Every browser automatically requests /favicon.ico from your site root even with no HTML pointing at it, and Safari does not use SVG favicons at all. The ICO is also the only format that holds several resolutions in one file. Modern formats are an addition to it, not a replacement.
Why is my favicon not updating? ▼
Favicons are cached separately from pages and held aggressively, so refreshing the page does nothing. Visit the icon URL directly — yoursite.com/favicon.ico — and hard-refresh there, or open your site in a private window to confirm the new file is live. If you use a CDN, purge it too. The icon shown next to your site in Google results updates on Google's own crawl schedule and can lag by days or weeks.
Can I convert a PNG to an ICO for free? ▼
Yes — the FileNaut Favicon Generator converts PNG, JPG, WebP or GIF into a multi-size ICO entirely in your browser, with no signup and no upload. Worth verifying the output afterwards with file favicon.ico, because many free converters hand back a PNG that has simply been renamed.
Where do I put the favicon file? ▼
In the root directory of your site, so it loads at https://yoursite.com/favicon.ico. On most frameworks that means the public/ or static/ folder, which gets published to the root at build time. Confirm by visiting the URL directly — if you see your 404 page instead of the icon, it is in the wrong place.
Does a favicon affect SEO? ▼
Not as a ranking factor. It affects click-through rate, which is a different and arguably more useful thing: Google shows your favicon beside your result on mobile search, so a distinctive icon makes your listing easier to spot in a list of ten. A missing one leaves a generic placeholder. Treat it as presentation, not ranking.
Can a favicon have a transparent background? ▼
Yes, and for the browser tab it is usually the right choice — the icon then sits cleanly on both light and dark tab bars. The exception is apple-touch-icon.png: iOS composites transparency onto black, so give that file a solid background colour of its own.
Why does my logo look squashed as a favicon? ▼
Because icons are square and a wide logo gets stretched to fit rather than padded with empty space. Crop or pad your artwork to a 1:1 square before generating — the Image Resizer does this — or better, use only the symbol from your logo rather than the full lockup. Wordmarks are unreadable at 16 pixels regardless.
Is my image uploaded anywhere when I make a favicon? ▼
Not with FileNaut. The Favicon Generator does the whole conversion in your browser using the canvas API — your logo never leaves your machine and no server ever receives it. That matters for unreleased branding. Many other free favicon sites upload your file to process it server-side.
How many favicon files do I really need? ▼
Five: a multi-size favicon.ico, an SVG, a 180 × 180 Apple touch icon, and 192 × 192 plus 512 × 512 PNGs in a web app manifest. The twenty-plus file "favicon packages" still circulating target Windows tiles and BlackBerry — platforms that no longer read them. In a hurry, the ICO alone gets you most of the benefit.

Ready to try it?

Use the tool right now — free, no signup, no upload.

Favicon GeneratorResize ImageConvert Image