What is a Favicon and Why You Need One

I’m often asked what a favicon is (weird word huh!)

You have probably seen many favicons before, even if you didn’t realise what they were. A favicon (pronounced “fave-icon”) is a small, square image that represents your brand which is used by web browsers to show a graphical representation of the site being visited.

It is a visual reminder of the Web site identity in the address bar or in tabs and helps your website brand stand out on open browser tabs. See below:

Do I really need a favicon?

A website without a personally-identifiable favicon will display the generic symbol of the browser being used, which means that it really is a must-have for your business if you care about your web branding. Most search engines will also show website favicons on both the search engine browser and results page. Google started to do it in 2019.

It’s a good idea when developing your brand and logo to ask your graphic designer to create a favicon at the same time. It might be a submark with a letter or two from your brand name, or it might be a visual icon representing your brand. For example, the favicon for my website is a stiletto shoe which is a visual representation of Savvy in Stilettos. Check it out below:

If you can afford it, having a graphic designer create a custom favicon to suit your brand would preferable. The second option if this is not in your budget, is to search through some databases with free (or some cheap to buy) icons such as Iconfinder or Flaticon. Unfortunately, you won’t find a unique image for your website (as they’re free and used by people worldwide), but it’s a great starting place if funds are tight.

Aternatively, you can generate a favicon from your logo file. Here are some of my favourite favicon generator tools:

• Favicon.io
• Favicon.ico
• Icoconvert

What size should a favicon be?

Short answer. A favicon in the ICO format should be sized at either 16×16, 32×32 or 48×48 pixels. Non-square pictures are not supported. Ideally the favicon file should be either an ICO, PNG or SVG format with a transparent background.

How do I get my favicon to show in the title bar of a web browser?

Depending on what theme you are using, it may vary slightly from these instructions. If using the Flatsome theme, you can add it by going to Flatsome>Theme Options>Header>Logo & Site Identity> scroll down to Site Icon and click ‘select site icon’ which will open the Media Library. Upload the icon and select it, then click Publish.

For other theme settings you should be able to add it via Appearance>Customize and you want to locate the header section where you add your logo.

If you are familiar working with WordPress PHP files, you can insert the code in the head area of the “header.php” file:

<link rel=”shortcut icon” type=”image/x-icon” href=”<?php bloginfo(‘url’) ?>/favicon.ico”>

That is it! You will be surprised by how easy it really is.