The Small Website Detail Developers Often Forget: Favicons

There's a particular moment in website development that feels familiar.

The layout is finished. The contact form works. The mobile design looks good. You've connected the domain and deployed everything.

Then you open the website in another browser tab.

And there it is.

A generic browser icon sitting next to your beautifully designed website's name.

You forgot the favicon.

It's a tiny detail, but it's one of those finishing touches that makes a website feel complete.

The interesting part is that creating a proper favicon setup involves a little more than just uploading one image.

What exactly is a favicon?

A favicon is the small icon associated with a website.

You'll commonly see it in browser tabs, bookmarks, browser history, and certain shortcut interfaces.

Its main purpose is recognition.

When someone has fifteen tabs open, a recognizable favicon can make it easier to find your website.

It also reinforces visual consistency between your website, logo, and overall brand.

The favicon may only occupy a few pixels, but those pixels are visible in places where your full logo isn't.

Why uploading a random logo isn't ideal

Suppose your company has a beautiful horizontal logo with a company name and an illustration.

You upload it as a favicon.

The browser reduces it to 16 × 16 pixels.

Suddenly, the text is unreadable, the illustration is blurry, and the whole thing becomes a tiny collection of shapes.

That's why favicons should be designed for small display sizes.

A good favicon often uses a simplified version of a logo.

For example, instead of using your entire brand name, consider using its symbol or an easily recognizable initial.

The goal isn't to fit everything inside a square.

It's to make the brand recognizable at a very small size.

Which favicon sizes do you actually need?

A useful basic favicon package includes:

File	Purpose
favicon.ico	Traditional browser compatibility
favicon-16x16.png	Small browser icons
favicon-32x32.png	Higher-resolution browser icons
apple-touch-icon.png	Apple home-screen bookmarks

The traditional ICO format can contain multiple image sizes inside one file.

A common combination is 16 × 16, 32 × 32, and 48 × 48 pixels.

For Apple touch icons, 180 × 180 pixels is a widely used size.

You don't necessarily need dozens of icon files for every project.

A small, well-organized set is usually enough for a basic website.

Adding favicon files to HTML

Once you've generated the files, place them somewhere publicly accessible on your website.

For a typical static website, that might look like this:

public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
└── apple-touch-icon.png

Then reference them inside the HTML <head>:

<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"
>

The browser can select an appropriate supported resource.

You can use the same approach in frameworks such as Astro, React-based static sites, and other projects that expose public assets.

The exact folder structure depends on the framework.

What about generating the favicon files?

You can manually resize a logo, export several PNG files, and create an ICO file using image-editing software.

But if you do this regularly for client websites, the repetitive export work becomes a little annoying.

That's why tools that create a favicon package from a single image are useful.

For example, ImgTask's Favicon Generator takes one image and generates a ZIP containing a multi-size favicon.ico, small PNG favicons, and an Apple touch icon.

The conversion runs in the browser, without uploading the logo to a server for processing.

It's a convenient option when you already have a square logo and just need the correct files for deployment.

Why isn't my new favicon showing up?

This is another common problem.

You replace the favicon, refresh the website, and the old icon is still there.

Sometimes the issue isn't your HTML.

Browsers can cache favicon files aggressively.

Before changing your entire favicon configuration, check a few things.

First, try opening the favicon file directly in the browser.

For example:

https://example.com/favicon.ico

Make sure it returns the icon you expect.

Then check the browser's developer tools to confirm the asset is loading successfully.

You can also try a fresh browser profile or a private browsing window.

If caching continues to cause problems, changing the asset filename or versioning its URL can help.

For example:

<link
  rel="icon"
  href="/favicon.ico?v=2"
>

Depending on your hosting or CDN configuration, you may also need to invalidate cached files.

A few design tips

When preparing your favicon, keep these things in mind:

• Start with a square image.
• Use a simple, recognizable symbol.
• Avoid tiny text and complicated illustrations.
• Check how the icon looks against light and dark browser themes.
• Test it at 16 × 16 pixels, not just at its original resolution.

That last point is important.

An icon that looks beautiful at 512 pixels can become unreadable when displayed at 16 pixels.

Always inspect the final result at the actual size your users will see.

Final thoughts

Favicons aren't the most exciting part of building a website.

Nobody is going to choose a website because its favicon is amazing.

But missing or poorly designed favicons can make an otherwise polished project feel unfinished.

And since creating a proper favicon set takes very little time, there's really no reason to skip it.

The next time you're preparing a website for launch, add the favicon check to your deployment checklist.

What's the most commonly forgotten small detail in your web development projects?