How to Create a Favicon for Your Website (And Why It Matters)

Q: What is "How to Create a Favicon for Your Website (And Why It Matters)"?

A favicon is the small icon shown in browser tabs, bookmarks, and search results. You need at least one .ico file (16x16 and 32x32) plus a 180x180 PNG for Apple touch icons. The HTML goes in the head: for the default, for iOS. The Uttir Favicon Generator creates all sizes from one source image, in your browser.

A favicon is the small icon next to your site name in the browser tab, the bookmark, and the search result. Most sites have one — most sites do not realize how much it matters for branding, recognition, and trust. This guide covers the exact files you need, the HTML to add them, and the right tool to generate them.

What is a favicon?

"Favicon" is short for "favorite icon", a term coined by Internet Explorer 5 in 1999. It is the small icon the browser shows for a site. It appears in five places:

Browser tab (the small icon next to the page title)
Bookmarks bar (the icon next to the saved name)
History list (the icon next to the URL)
Mobile home screen (when the user pins the site)
Search results (Google shows the favicon next to your listing in some cases)

A good favicon is recognizable at 16x16 pixels. Most logos are too detailed for that size — you need a simplified version, often just a letter or a single distinctive shape.

What file formats and sizes you need

Modern browsers are forgiving. You can get away with a single PNG, but for maximum compatibility you want:

For the browser

favicon.ico — the original, still required for some legacy browsers. Should contain 16x16 and 32x32. ICO is a special container format (not the same as PNG).
favicon-32x32.png — modern browsers use this for the tab icon.
favicon-16x16.png — older browsers, some systems.

For iOS (Safari "Add to Home Screen")

apple-touch-icon.png at 180x180. iOS does not apply rounded corners anymore (it used to); just a clean square works.

For Android (Chrome, PWA)

android-chrome-192x192.png — PWA manifest icon, large.
android-chrome-512x512.png — PWA splash screen, very large.
site.webmanifest — JSON file that tells the browser about the icons. Required for "install as app" behavior.

Optional but recommended

safari-pinned-tab.svg — monochrome SVG for Safari pinned tabs. Only the path data is used; the fill is set by the browser.
mstile-150x150.png — for Windows tiles (legacy, rarely needed now).

The HTML to add a favicon

Drop these into the <head> of your page. Order matters — browsers use the first one they understand.

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

The sizes="any" on the ICO link is a hint to modern browsers to use it for any size. The PNG links with explicit sizes help the browser pick the right one for the right use case (tab vs bookmark vs home screen).

The site.webmanifest file

The web manifest is a small JSON file. For most sites:

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

name and short_name are what the browser shows when the user installs the site as a PWA. theme_color is the color of the browser chrome on mobile. background_color is the splash screen color.

Designing a favicon that works at 16x16

This is the hard part. A logo that looks great at 200x200 is unreadable at 16x16. The rules:

Use a single letter or a single icon

The most recognizable favicons are one letter (G for Google, F for Facebook, T for Twitter) or one distinctive shape (the YouTube play button, the GitHub octocat, the Slack hashtag). At 16x16 you have ~250 pixels of canvas. Anything more than a single shape or letter is mud.

High contrast

The favicon shows on light and dark backgrounds. Black on white works. White on black works. Mid-grey does not work — it disappears. Use bold, high-contrast colors and avoid thin strokes.

Skip anti-aliasing for the smallest sizes

At 16x16, anti-aliased curves look blurry. The original favicon.ico format (and PNG) supports sharp pixel-level control. Design the 16x16 version at 16x16 in an image editor with pixel grid on, not as a 256x256 downscale.

Test on real browsers

Open your site in Chrome, Firefox, Safari, and Edge. Open it on a phone. Save it to the bookmarks bar. The favicon should be readable in every context.

How to generate every favicon size from one image

You start with a square source image — ideally 512x512 or larger. The generator creates every size you need, the .ico file, and the web manifest. The Uttir Favicon Generator does this in your browser:

Drop in a square image (PNG, JPG, or SVG).
The generator creates 16x16, 32x32, 180x180, 192x192, and 512x512.
Download the .ico file and the PNG set as a zip.
Drop the files into the root of your site and paste the HTML above.

Everything runs locally. Your image never leaves your device.

Common pitfalls

Favicon in a subdirectory but HTML pointing to the root

If your site is served from https://example.com/blog/ and the favicon is at https://example.com/favicon.ico, most browsers find it. But if the HTML uses a relative path like href="favicon.ico", it looks in the current directory. Use absolute paths starting with / to be safe.

Forgetting to clear browser cache

Browsers aggressively cache favicons. After you upload a new one, it may not show up for days. The fix: hard-refresh (Ctrl-Shift-R or Command-Shift-R), or use DevTools → Network → "Disable cache" while testing. The favicon URL is sometimes not even requested because the browser has a cached copy from a previous visit.

Using an SVG that includes text or filters

Modern browsers support SVG favicons, but only the path/shape data renders. Text and filter effects do not work. If you want an SVG favicon, design it as a single shape (the Slack hashtag, the YouTube play button).

Not testing on mobile

Desktop favicon (16x16) does not work for iOS home screen. The Apple touch icon is 180x180. If you only ship the 16x16, the iOS home screen shows a tiny thumbnail. Always include the 180x180 PNG.

Do favicons affect SEO?

Indirectly, yes. Google has confirmed that favicons are a small ranking signal — sites with clear favicons appear more credible in search results. Google also shows the favicon next to mobile search results on branded queries ("Uttir" or your brand name). A well-designed favicon improves brand recognition, which improves click-through rate, which improves rankings.

The effect is small, but the cost is also small — twenty minutes and one image. Worth doing right.

Bottom line

A favicon is one image, scaled to ~6 file formats, referenced from the <head>. The hard part is the design — at 16x16, less is more. The Uttir Favicon Generator handles every size, the .ico file, and the web manifest, all in your browser.