Skip to content

Favicons, explained

A favicon is the small icon browsers show for a site in tabs, bookmarks, history, search results, shortcuts, and sometimes install prompts. It is tiny, but it is one of the first brand assets users see repeatedly.

The confusing part is that "favicon" no longer means one 16 by 16 icon file. Modern sites may ship several icon sizes and formats for different browsers, devices, pinned shortcuts, mobile home screens, and web app manifests.

You do not need a giant icon system for every small site. You do need a clean set of shared site icons that browsers and devices can pick from. For Ultim8Soft tools, that also means the favicon is a shared brand asset, not a separate icon per individual tool page.

What a favicon is

The original favicon was often a small .ico file placed at the site root. Browsers looked for it and used it in the tab or bookmarks list.

Today, the idea has expanded. A site icon might appear in:

  • browser tabs
  • bookmarks
  • address bar suggestions
  • mobile home screen shortcuts
  • Android web app install surfaces
  • pinned browser shortcuts
  • search result decorations

Those contexts have different size needs. A 16 by 16 icon can work in a tab, but it will look poor as a large mobile shortcut. A high-resolution PNG can look great on a phone, but old browser paths may still expect .ico.

That is why a favicon set usually includes multiple files.

Common formats

ICO

.ico is the classic favicon format. It can contain multiple sizes in one file, such as 16 by 16, 32 by 32, and 48 by 48. It remains useful because browsers still support it well.

PNG

PNG is common for modern icons because it supports transparency and predictable image quality. You will often see PNG files at sizes like 32 by 32, 180 by 180, 192 by 192, and 512 by 512.

SVG

SVG can scale cleanly because it is vector-based. It can be a good fit for simple logos, but browser support and rendering details have varied over time, so many sites still ship PNG and ICO fallbacks.

Sizes that matter

There is no single magic size that covers every device.

A practical small-site set often includes:

  • favicon.ico for classic browser fallback
  • favicon-16x16.png for small tab use
  • favicon-32x32.png for higher-density browser UI
  • apple-touch-icon.png at 180 by 180 for iOS home screen icons
  • android-chrome-192x192.png for Android and web app surfaces
  • android-chrome-512x512.png for larger install and manifest contexts

You may not need every variant for a simple landing page, but shipping a small set prevents blurry icons and missing shortcut images.

Browser and device expectations

Browsers do not all ask for icons in the same order. Some look at explicit <link> tags in the page. Some still request /favicon.ico. Mobile platforms may look for Apple touch icons or manifest icons.

That means your HTML head, site root, and manifest can all play a role.

A common setup includes: 

/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest

The key is consistency. All of those files should represent the same site identity. They should not vary per tool page unless you are deliberately building separate products with separate brands.

manifest.json and web app icons

A web app manifest tells browsers about the site when it behaves like an installable app. It can include the app name, theme colors, display mode, start URL, and icon list.

For icons, the manifest often points to 192 by 192 and 512 by 512 PNG files. Those larger sizes help Android and install surfaces show a clean icon instead of stretching a tiny tab image.

Even if your site is not a full progressive web app, a small manifest can still help browsers present shortcuts nicely.

Apple touch icons

Apple touch icons are used when someone adds a site to an iPhone or iPad home screen. The common size is 180 by 180 PNG.

The important design detail is that the icon may be displayed with rounded corners or other platform styling. Do not put critical detail too close to the edges. Simple shapes and enough padding usually work better than tiny text.

Cache gotchas

Favicons are famous for getting stuck in cache.

You replace the file, refresh the page, and the old icon still appears. The browser may have cached it. The operating system may have cached it. A CDN may have cached it. Search results may update later.

Some ways to reduce pain:

  • change the icon file path when shipping a major icon update
  • use cache headers deliberately
  • test in a private window or another browser
  • give search surfaces time to recrawl
  • do not panic when one tab updates before another

Favicon updates often lag behind normal page changes.

A worked example: icon files for a small site

For a small site like ultim8soft.com, a sensible favicon package might include: 

/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.png
/android-chrome-192x192.png
/android-chrome-512x512.png
/site.webmanifest

The same icon set would be used across the apex site and the tool pages as a shared brand asset. A Base64 tool page, a JSON formatter page, and a guide page should not each invent their own favicon. The favicon identifies the site family, not the specific utility inside it.

The source artwork should start larger than the final outputs. A simple square logo with padding is easier to scale down than a detailed image full of small text.

Try it in your browser

Our Favicon Generator runs locally in your browser. Start from a source image, generate common favicon sizes, and prepare the files a small site needs without uploading the source asset to a server.

That is useful when the source artwork is not public yet or when you are testing a brand refresh before publishing it.

Common mistakes

Using one tiny icon for every context. A 16 by 16 image will not look good as a mobile shortcut.

Putting text inside a tiny favicon. Small icons need simple shapes. Text usually turns into noise.

Forgetting /favicon.ico. Many modern pages link PNG files, but old fallback requests still happen.

Changing icons and expecting instant updates. Browser, OS, CDN, and search caches can all lag.

Creating per-tool favicons by accident. Favicons should be shared site assets unless the product identity truly changes.

FAQ

It is still a useful fallback. Many sites ship it alongside PNG and manifest icons.

A common choice is 180 by 180 PNG, with enough padding so the icon still looks good with rounded corners.

It may work in many modern browsers, but PNG and ICO fallbacks are still safer for broad coverage.

Caching. Favicons can stick around in browser, OS, CDN, and search caches longer than normal page assets.

Not for this project convention. The favicon should represent the shared Ultim8Soft brand, not each individual utility.

Related guides