What Is a Favicon and Why Do I Need One

A favicon is the small square image that you see represents a website in web browsers.

If you take a look at the address bar of your browser right now, I’m sure you’ll see several favicons including one for Digital Chicks. Typically, favicons feature a logo, the first letter of the company name or simply an image that reflects the website it represents.

Favicons help us quickly visually match every browser tab with a certain website – or website content. And if you are like me and tend to keep dozens of tabs open simultaneously – ultimately being unable to read their names – favicons are your best friends that make finding the website you need much easier.

Where Are Favicons Found?

Favicons can be found next to anything that identifies your website. This includes bookmarks, tabs, toolbar apps, history results, and search bars. Take a look at the examples below:

Why Are Favicons Important?

People often forget or minimize the importance of a favicon in their companies branding. Other than making your website easier to location in a sea or browser tabs, a favicon adds legitimacy to your site and helps boost your online branding as well as trust from potential clients and unifies all of branding components.

What Makes a Good Favicon?

A lot of things need to be taken into consideration when creating and designing a favicon for your website. While small and simple, it can (and should) have a big impact. It’s important to make sure you produce the best favicon possible as this is what users will identify your brand with. Here are some things to keep in mind when creating your favicon:

What Are Common Favicon File Formats?

The most common favicon formats are ICO, PNG, and SVG, but there are additional formats for specific browsers or devices.

ICO – favicon.ico

The ICO file format was developed by Microsoft and is the original file format for the favicon. The format is unique because it allows for multiple small images within the same file. This is advantageous because the small icons required for a favicon in ICO format (16×16, 32×32, and 48×48 pixels) can be scaled and optimized independently. At small dimensions you can’t rely on the browser to automatically resize your icon in an optimal way. The ICO format is supported by all browsers and it’s the only format that IE5 through IE10 supports.

PNG – favicon.png

The PNG format is a nice format because it’s a format that most people are used to and doesn’t require any special tools to create. With modern screens being high resolution the original problem of small icon dimensions for small resolutions no longer exists. For browsers that support the PNG favicon format oftentimes the quality of the favicon displayed within the browser tab or bookmarks bar will be higher than the ICO format. The disadvantage of the PNG format is that it’s not compatible with IE5 through IE10.

SVG – favicon.svg

The SVG format has benefits over the PNG and ICO formats, but doesn’t have great browser support yet. SVG files are very lightweight and they are infinitely scalable. This means that image quality is superb without sacrificing load times for heavy images. Only Chrome, Firefox, and Opera support SVG format favicons.

What Are Common Favicon Sizes?

The most important factors, is that your favicon needs to be square.

  • For ICO format the recommended sizes are 16×16, 32×32, and 48×48 pixels.
  • For PNG format the recommended sizes are 16×16 and 32×32, but browsers will accept any square PNG image.

When Did Favicons Become a Thing?

Way back in 1999, the favicon was introduced in Internet Explorer as a way of helping searchers tell bookmarked web pages apart from others. And since bookmarked pages were (and probably still are) called “Favorites” in Internet Explorer, the words ‘favorite’ and ‘icon’ were blended together to create a new term – favicon.

How Do You Pronounce Favicon?

And probably more important than anything else… how the heck do you pronounce it? The consensus seems to be /fav-ih-con/, although I have also heard it pronounced /fav-eye-con/. As long as people understand you, does it matter?

This post may contain affiliate links. This means we may receive a percentage of the sale in commission.

We only recommend products we use ourselves and believe in. Thank you for supporting us!