Web development · 12 Oct 2021 · 2 min read

Importance of a favicon (and how to create one)

A favicon is easy to overlook when building a website, but it’s one of those small details that adds up. It’s the tiny square image — usually a scaled-down version of a logo — that shows up next to a page’s title in a browser tab, in bookmarks, and in browsing history.

What a favicon does

The name is short for “favourite icon,” a feature dating back to Internet Explorer in 1999: when someone bookmarked a page, the icon appeared next to it in their favourites list. Every major browser has carried the idea forward since. A visible, well-designed favicon makes a page easy to pick out among a crowded set of browser tabs or bookmarks — a small piece of visual branding that shows up everywhere the page does.

Does it affect SEO?

A favicon isn’t a direct ranking factor, but it supports the things that are. A recognisable icon makes a site easier to find again in a bookmarks list or browser history, which increases the chance of a return visit — and return visits, along with the extra time spent on a familiar site, are exactly the engagement signals search engines reward. It also reinforces brand recognition: the more visible and identifiable a site is, the more likely people are to click on it and remember it.

How to create one

Step 1: Design the image

Use any image editor — Photoshop, GIMP, or similar — and work at 64x64 pixels for easier editing, then scale down to the 16x16 pixels a favicon actually displays at. Save it as PNG, JPG, BMP, GIF, or TIFF.

Step 2: Convert it to .ico format

The .ico format is supported by almost every browser. Several free online converters can do this from your saved image.

Step 3: Upload it to your website

Place the finished favicon.ico file in your website’s root directory, so it’s reachable at yoursite.com/favicon.ico.

Step 4: Add the HTML reference

Modern browsers usually find a root-level favicon automatically, but adding the link tag to your page’s header ensures older browsers pick it up too.

Conclusion

A favicon takes very little effort to create and add to a site, and the payoff — a more credible, recognisable, branded browsing experience — is disproportionate to that effort. It’s one of the easiest finishing touches to get right.