What's A Favicon And Why You Need One

If you have a website, you should definitely have a favicon. It's like the "cherry on top" that really complete the overall web experience. But, what is a favicon, you may ask? Essentially, a favicon is a small square graphic that displays next to the page title in a browser tab. Adding this graphic to your site can help people to immediately recognize it in a browser full of tabs – and it helps your site stand to stand out! You know, when you have 50 tabs open in your browser?! It’s a small graphic - a visual recognition that helps that makes it easy to find your site amongst a sea of tabs! Keep in mind, some sites default to your site, but I recommend creating a custom one that is unique to your brand. 

If you are wondering what to use as your image. Some great ideas are

  • To use your logo or a small portion of your logo. The image is displayed very very VERY small, so using a portion or one letter or the initial name of your brand will translate better at a small size. 

  • I also recommend using the accent color from your color palette. For example like I have a color block as my favicon (see tab in browswer).

Depending on the platform your are using, favicons can either be a .png or .ico format. If you need to create a favicon in the .ico format, just take your .png image and upload it to a favicon converter like http://www.favicon-generator.org/.

Favicon images work best across all browsers when sized between 100px × 100px or 300px × 300px, even though they are displayed at 16px × 16px.

If you are using Squarespace, here is a great tutorial on how to add your favicon image to your site.