Member Avatar for Ritesh_4

Hello
Anyone knows what is the best size to use when creating a favicon so that it appears nice in both Firefox and IE tabs?

  • 6 Contributors
  • 5 Replies
  • 489 Views
  • 12 Years Discussion Span
  • Latest Post Latest Post by redplanetpk

Dani AI

Generated

Short answer: there isn’t one “best” single pixel size. The thread’s early replies from and point to the old, simple answer (small square icons), and and correctly call out the tab/bookmark/home‑screen uses — but modern practice is to supply a small browser icon plus a set of larger files and a manifest so each platform picks the right asset. See the browser link/icon guidance on MDN for how browsers select icons. (developer.mozilla.org)

Practical rules to follow: keep a multi‑size ICO at your site root for legacy fallback, publish PNG (and optionally SVG) icons for modern browsers, include an Apple touch icon for iOS, and add a Web App Manifest with larger icons for Android/PWA usage. The manifest spec explains how multiple icons are declared and used. Generators like RealFaviconGenerator automate correct outputs and markup. (w3.org)

Example head snippet (paste into <head> — adjust filenames and paths to match your build):

<link rel="icon" href="/favicon.ico">
<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="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

After adding files, common gotchas: browser caching (use a versioned filename or query string), missing files/404s (browsers fall back unpredictably if a declared file 404s), incorrect MIME types (serve ICO as image/x-icon, PNG as image/png), and Content Security Policy rules blocking icon loads. Use a checker or the generator’s installer to validate your package and test on real devices/browsers. (faviconhelper.com)

If the goal is only “nice in tabs” and minimal work is desired, provide the small PNG/ICO for tabs plus a simple manifest later. For full compatibility (bookmarks, home screens, PWAs, pinned tabs) use a generated favicon package and the link set above. (realfavicongenerator.net)

Recommended Answers

All 5 Replies

Member Avatar for Reliable

I've always made mine 16 square pixels. That seems to be a good fit and that's what I read in tutorials when I first learned.

commented: thx +1
Member Avatar for becketharper585

A favicon is a tab icon that indicates a particular website on a tab. It is a logo that helps users to recognize a website among the many open Tabs. The actual size of the favicon that appears on the browser tabs is said to be 16x16 pixels. Favicons also appear on the bookmarks lists and address bars on the left side of the Tab of a particular website.

Member Avatar for Dani

I have never heard favicons be referred to as tab icons before.

Member Avatar for sarahcuneiform

The best size for a favicon is generally 16x16 pixels or 32x32 pixels. These sizes are commonly supported by most browsers and platforms. However, it's also a good practice to include a larger version, such as 192x192 pixels, for high-resolution displays or when the favicon is displayed on larger surfaces, like browser tabs or bookmarks.

Member Avatar for redplanetpk

Well there should be a standard size for favicon that would be 16*16 pixels ..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.