What’s a favicon & how do you create one?

• What is a favicon?
• Why is it important to have a favicon?
• How do I create a favicon?
  • Proper sizing
  • Proper format
  • Tips for creating a successful favicon
• How do I add a favicon to my site?
  • Adding a favicon in WordPress
  • Adding a favicon in Weebly
  • Adding a favicon, the classic way

What is a favicon?

A favicon is a small icon of 16x16 pixels with a mission to represent your website. It's the small image you can see on each web browser tab that allows you to find your way more easily when you have multiple tabs open.

And, if you're anything like us, you always have way too many of them open! Case in point:

While favicons are most often displayed in open tabs, they're used in many other areas, including your bookmarks bar, browser history, and the results of a Google search on mobile.

Why is it important to have a favicon?

They might be tiny, but don't overlook the importance of a favicon for a website. In fact, they are essential to improve the User Experience (UX), an aspect that's definitely worth your attention knowing that a strategic user experience has the potential to increase the conversion rate by up to 400%. As we have seen above, when a visitor has several tabs open, having a favicon makes it easier for them to find the tab corresponding to your website.

Not only that, a favicon is also part of your visual identity, since it visually represents your site, your brand and/or your business. You will increase credibility towards your target audience by creating a more professional website. Adding a favicon gives you a significant edge over websites that don't use one.

How do I create a favicon?

If you think your logo or part of your logo will work as a favicon, you simply need to resize it and tada: you got yourself a favicon! Like in the case of our WHC logo (we use the ‘globe’ portion of our logo, which works beautifully as it’s easily recognizable). If your existing logo is too detailed, or just doesn’t look right as a favicon, here are three easy ways to create one:

1. Find a professional graphic designer to design one for you, through a platform like Fiverr for example
2. Use a license-free favicon which you can find on Flaticon or Shutterstock
3. Or, alternatively, design a favicon yourself using online tools such as favicon.io, Canva or your favorite design software

Proper sizing

The standard size used by web browsers is 16x16 pixels. However, on hi-res screens, your favicon could appear pixelated so it is preferable to at least double its size to 32x32 pixels. Note that some platforms have specific requirements for sizing, for example WordPress requires a minimum size of 512x512 pixels.

Proper format

Originally introduced by Microsoft's Internet Explorer browser, a favicon had to be in the Windows ICO format and had to be named favicon.ico. Now, several formats can be used, but here are the main ones:

• Windows ICO: the ICO format is the original format but requires the use of an image converter to create it
• PNG: the PNG format has the greatest advantage of supporting transparency and having the smallest possible file size
• JPG: this is certainly the best-known image format, but unfortunately it has a lower resolution quality than PNG, and does not allow you to have a transparent favicon (your favicon must therefore be a solid square)

Tips for creating a successful favicon

As small as a favicon is, it's worth considering a few things before you start creating yours, to make the most of it:

• Keep it simple
  A favicon should be kept simple because of its small size. You should therefore avoid a complex design full of details as they will make your icon difficult to read and remember.

     Do this         Not this

• Use your visual identity
  Your favicon represents your brand, and as such, it should reflect your company's identity. You can use your whole logo or a part of it, if it fits. For example, Google's favicon represents a G with its 4 characteristic colors, which can be found on the majority of its products and services. As for YouTube, it uses only the red play button present in the logo which is easily recognizable by almost everyone on Earth.

        

• Consider dark mode
  More and more browsers and operating systems support the use of dark mode, making the tab bar dark rather than the traditional light gray. This is a detail you should take into account when designing your favicon, because if you want to display a black W on a transparent background, for example, users will have trouble seeing your favicon in dark mode. If you must have a black letter or icon, consider adding a white background, just like Wikipedia does.

     Do this        Not this

How do I add a favicon to my site?

The way to add a favicon will be different depending on the platform you use to manage your website. Let's have a look at the 3 main possibilities:

Adding a favicon in WordPress

Since WordPress 4.3, you have the possibility to add your favicon from the WordPress administration interface.

1. Connect to your WordPress Dashboard
2. Click on Appearance » Customize and choose Site Identity in the left sidebar
3. In the SiteIcon section you will be able to select your favicon image. Don't forget to click on the blue ‘Publish’ button at the top to apply your changes!

Adding a favicon in Weebly

Our Weebly Starter, Pro and Enterprise plans allow you to customize your favicon.

1. Connect to your Weebly Site Builder
2. Click on Settings and General
3. Under the Favicon section you will have the possibility to select the image of your favicon by clicking on the Upload button. As always, don't forget to publish your changes!

Adding a favicon the classic way

If you know how to connect via FTP to the files on your site, or if you are comfortable using cPanel's File Manager, it’s very easy to add a favicon to your site using either of these 2 methods:

1. Using favicon.ico
   Most web browsers automatically recognize the favicon.ico file placed at the root of your website, without the need to specify anything in your files. Just make sure your image is a square and is correctly named, then upload the file to the root of your website (the folder is usually named public_html).
2. Modifying the HTML code
   This method requires a good understanding of HTML, but can be done easily if you follow this procedure:
   1. Create a favicon and save it in the desired format, for example PNG, and name it favicon.png
   2. Upload your PNG file to your website, preferably to the root of your website
   3. Add the following code on all pages of your website between the <head></head> tags:
      <link rel="icon" type="image/png" href="favicon.png">

Now, your turn!

And voilà! Next time you try to find a page among the 54 open tabs on your browser, you can call this tiny element by its name: a favicon. 

Now you understand why all websites should have their own tiny (yet mighty!) favicon. The impact that this mini addition can have on your website is significant, not to mention improving the experience of your visitors AND enhancing your brand image. et's face it, creating one is more than easy, so there’s just no excuse for not having one. It could take just a few minutes if you already have your logo to a few hours if you're starting from scratch. But, in our humble opinion, this is time well spent. 

So, why wait any longer? Start creating your favicon right away! Your visitors are waiting…