Why Have a Website Favicon?  Let’s dig into that.

A favicon, as you probably know, is the little image on the left side of your browser tab.  It looks like this:

what is a favicon

 

How could this teeny little icon, which is extremely small in file size, help your website?  In order to think through that, let me ask you two questions:

Which is easier to identify with?

Sites with Favicons:favicons

Sites without Favicons?

If it were me, I would use a favicon as a form of Brand Recognition if for no other reason. It’s a competitive world out there.

What happens when someone tries to access a web page that doesn’t exist?

404 Error

The site returns a “404 Error”. This essentially means “hey I looked around but, really, there’s nothing there”.  Now, since every action in life (or webville) takes time, when your browser goes to load the favicon and can’t find it, it extends load time for that page.  It hits you with a double whammy, too, because if it did find a favicon it would have cached it and saved you the load time when you grabbed a page from that site later.

It shows up faster because it didn’t need to spend time trying to find a file that didn’t exist, plus it didn’t have to fetch the file that did exist.  It’s a time saver!

You could argue that we’re talking about minuscule amounts of time here, but each request or action in the page-load waterfall adds up.  Here’s what that waterfall chart of load time for one of my pages looks like:
load time waterfall
Source – free test at https://www.webpagetest.org/

The lack of a favicon actually adds length to load time.

How impatient are your readers? Would you lose them?

Anything you can do to keep them on-site is worth doing!

how do you add a favicon?

In many themes it’s a simple matter of going to your “Customize” feature in WordPress.  Go to Administration Screen > Appearance > Customize and then click on “Site Identity” or whatever your theme calls it. On my theme, it’s called “Site Icon”

WordPress Site Identity

 

Upload the file you want to use and that’s it. The image I used here is a .png I created. According to codex.wordpress.org, WordPress Version 4.3 began implementing the Site Icon feature to enable favicons. They recommend you use the Site Icon feature, instead of preparing a the favicon.ico file (favicons are traditionally an .ico file format).

Older WordPress themes: If your theme doesn’t have the Site Icon feature, the following sites claim to be useful in creating favicons in .ico format and they provide steps to get them into your sites. Use at your discretion, I haven’t tested them out.

http://www.chami.com/html-kit/services/favicon/

https://www.favicon.cc/

https://www.favicongenerator.com/

convertico.com/

realfavicongenerator.net

http://tools.dynamicdrive.com/favicon/

What if you don’t have an image to use for a favicon?

  • Here’s a tip if you have PowerPoint. You can design the image, save it as a .jpg or .png and use that as the file in the steps above. Canva you say? Sure, you can do that, too. Remember that favicons are small images and you can’t crowd too much detail into them and still be able to see detail in the browser tab. If you’ve ever designed a desktop or smartphone icon, you know how careful you have to be with detail. Favicons are even smaller.

Summary

Why have a website favicon?

  • Favicons improve page load speed
  • Favicons reflect your brand and stand out in people’s browser tabs

 

What experiences have you had with designing and adding favicons? Share you tips below and please subscribe for more useful tips as I find them. Oh yeah – I’d love ❤ to have you visit my Facebook Page!

– Mike



Please share and like this site, thanks!:

Leave a Reply

Your email address will not be published. Required fields are marked *