You've seen it thousands of times — the tiny icon sitting in the browser tab next to a website's title. That's a favicon. Small as it is, it's one of those details that separates a professional site from an unfinished one. And thanks to modern browsers and mobile devices, a single favicon is no longer enough. Here's what you need and how to get it, for free, in minutes.

What Is a Favicon?

A favicon (short for "favourite icon") is a small image that represents your website in browser tabs, bookmarks, browser history, and address bars. Modern websites need a whole family of sizes to cover every context:

  • favicon.ico — the classic multi-size ICO file (16x16, 32x32, 48x48) for legacy browser support
  • favicon-16x16.png and favicon-32x32.png — PNG versions for modern browsers
  • apple-touch-icon.png (180x180) — shown when a user saves your site to their iPhone home screen
  • android-chrome-192x192.png and android-chrome-512x512.png — for Android and PWA support
  • site.webmanifest — the JSON file that ties it all together

Why Favicons Matter More Than You Think

Brand Recognition in Crowded Browser Sessions

The average user has 10–20 tabs open at once. Your favicon is often the only visible identifier for your site when the tab title is truncated. A distinctive icon makes it effortless for users to switch back to your site — without a favicon, you're just another blank tab they might close by accident.

Bookmarks and Home Screen Shortcuts

When someone bookmarks your site or adds it to their phone home screen, your favicon becomes the app icon. A polished, properly-sized icon makes your site feel like a native app. A missing or low-resolution icon immediately signals that the site wasn't finished with care.

Trust and Professionalism

A site without a favicon — showing the browser's default grey globe — sends a subtle signal that something is incomplete. A sharp, branded icon reinforces professionalism before the user has read a single word.

How to Create a Favicon in 3 Steps

You don't need Photoshop, Figma, or any design experience. CachePlex Favicon Generator is completely free — no account needed.

Option 1: Upload a PNG Image

Have a logo or icon already? Upload any square PNG and the generator automatically resizes it to all required dimensions and packages everything into a ready-to-deploy ZIP — including the site.webmanifest file.

Option 2: Text Favicon

No logo yet? Type one or two characters — your brand initials — pick a background colour, text colour, and font. The tool renders it on a canvas and generates the full favicon package. This is how most startups handle their early branding.

Option 3: Emoji Favicon

The fastest option. Pick an emoji that represents your site and the generator renders it as a full favicon package. Simple, effective, and instantly recognisable.

Try the free CachePlex Favicon Generator →

How to Install Your Favicon

Once you've downloaded your ZIP from CachePlex, upload all files to your website root and add these tags to your HTML <head>:

<link rel="icon" type="image/x-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="manifest" href="/site.webmanifest">

These tags are included in the README.txt inside your downloaded ZIP for easy reference.

Favicon Design Tips

Keep It Simple

A favicon is tiny — even at 32x32 pixels. Intricate illustrations and small text become unrecognisable at that size. The most effective favicons are single, bold shapes — a letter, a simple icon, a distinctive mark — that reads clearly at 16 pixels.

Test on Dark Backgrounds

Many browsers offer dark mode, and browser tabs inherit the OS setting. A pure white favicon will disappear on a dark tab bar. Either add a coloured background to your icon or ensure it has enough contrast on both light and dark surfaces.

Match Your Brand Colours

Your favicon is part of your visual identity. Use your brand's primary colour as the background and ensure the icon element matches your overall colour palette. Consistency in these small details adds up to a professional, cohesive brand experience.

Create Your Favicon Now

A complete favicon package — ICO, all PNG sizes, and the webmanifest — takes less than 60 seconds with CachePlex Favicon Generator. No account, no payment, no watermarks — download and deploy in under a minute.