Blog

Favicons: what they are, and how to make a good one

By Graeme Leslie

Graeme Leslie, Design Director, Designtastic

The icons that display on your browser to represent a web page are commonplace on the internet these days. In fact, they’re so commonplace that most people probably never even wonder what they’re called. 

Well, they’re called favicons, and they can be fairly fundamental to your business’s online identity. But does every organisation need a favicon? And how do you make a good one? 

In today’s blog, we’ll be discussing everything you might need to know about these icons, including the tenets of an effective favicon, and whether your icon should always be your logo.

What is a favicon? 

When you go to a website on your web browser, the name of the web page will be displayed in the tab at the top of the browser. Next to it will be an icon; this is the favicon (short for ‘favourite icon’).

The default favicon will vary depending on the browser. On Google Chrome, for example, the default is a grey globe (the icon generally synonymous with the internet). Every website will display this favicon, unless the owners of said website make their own. You can display just about anything as your icon, as long as it’s within the confines of a 1:1 aspect ratio, and is a minimum of 8x8px (Google recommends making your favicon larger than 48x48px so that it’s as compatible as possible with various devices). 

You have free reign over your favicon, unless Google deems it inappropriate, in which case they would change it back to the default icon. 

Does every website need to have one? 

It’s not mandatory to have a favicon, but if you’re serious about your organisation’s website and about building your online presence, we highly recommend creating one (and if you need a hand with this, or with any other aspect of your website, let us know!).

You’ve probably noticed that, aside from websites that were created very recently, it’s uncommon for a business’s website to not have its own favicon. Ultimately, if you want your website to be taken seriously, you should probably have a custom icon. Compared to the default icon, a custom favicon just looks more professional.

What makes a good favicon? 

Favicons are small. This means, obviously, that you can’t really have much detail in your icon. This is also generally true for your logo, as well, but even if your logo is fairly minimalist, you still might have to go one step further and make it less detailed for your favicon. It needs to be easily distinguishable at even the smallest size, and it also needs to scale well across all devices. Small and minimalist is, generally, the key to a good favicon. 

Does your favicon need to be your logo? 

In most cases, your favicon will be your logo. This is generally best practice when it comes to brand consistency. But not every logo fits in a 1:1 aspect ratio, or would look good at this size. You might want to use just one specific element of your logo instead (for example, Google’s favicon is just the ‘G’), or to design a more minimalist version of your logo specifically for the favicon. The most important thing is that the icon is synonymous with your brand identity. 

Conclusion 

If you’re serious about your organisation’s website, creating a favicon should be a priority; it looks more professional. In truth, your clients are unlikely to even acknowledge your favicon, because they’re so commonplace these days but they’ll probably notice if you don’t have one!