If you have ever been browsing the internet, whether you have been working from home or just trying to find the best deal on your next holiday, the chances are that you have had multiple tabs open in your browser at the same time. In my case, this is what my browser window tab area looked like today.
To the left of each of the tabs, you’ll notice a little icon. In the case of my own website, on the left-hand tab, that icon consists of three lychee, one of which is opened. It’s these icons that are known as favicons. In this blog, we will delve a little deeper into them, looking specifically what they are, why you should use them and how you can create one for your website.
The What
A favicon is a small browser icon, associated with a particular website or web page, that represents the brand of that website. You will most often see it to the left of the browser tab in which a particular website is open. You will also see them in a bookmark bar, search history and even in active search results, on larger and smaller devices alike. Take a look at the search results below, the image of which I took on my mobile phone, whilst searching for the best curry house in Bristol (of course).
You’ll notice that for the top two results and the bottom result, they all have icons, helping you to identify the brand. However, you’ll notice that the third one has instead a grey globe. That means the website creator has neglected to add a favicon to the website and in its place, Google Chrome has added the default globe icon.
The Why
Previously, I spoke about how search engine optimisation is very important for your website. A common misconception is that a favicon will directly help improve your website’s search engine performance. Sadly, that’s not the case. However, there’s no need to worry! Whilst including a favicon might not directly make you appear any higher in search results, it has some very important indirect benefits.
Including a favicon on your website will significantly improve the user experience for any of your visitors and will help to strengthen your brand identity, all the while making your website appear much more professional. The favicon really helps to visually emphasise what your website is all about, before your visitors even navigate to it. It is widely acknowledged that images can have a strong effect on branding.
This will in turn lead to more visitors to your website, for longer, which will help to improve your search rankings, hence the indirect effects. But don’t just take my word for it. Let’s see this logic in action, using the mobile search results above.
The Good
Let’s take the first search result: TripAdvisor. We know that TripAdvisor has a very established brand identity. Most of us will have visited their website at some point to find a great restaurant, holiday, or anything in between. When you look at that search result, you can see their favicon, the ‘iconic’ black owl eyes on a green background. A person’s attention is usually drawn to that first, before they look at the text. When you click through to the website, you’ll notice something.
Do you see it? The favicon is part of the company’s logo on the website. That is very important for strengthening the brand identity of the website, making it much more memorable. You’re more likely to revisit a website where that brand identity sticks in your mind.
The Bad
Now, let’s take a look at the third search result, the only one without a favicon. In its place, you’re seeing Google Chrome’s default globe icon. Instantly, you’re getting no idea of the website’s branding. More often than not, the perception is that websites without favicons are either built with free website builders, they’re old and forgotten about, they might be full of adverts, or even malware. It’s pretty much an instant traffic-killer for your website. When you click through to this website, you’ll notice something interesting.
What do you think? There’s no branded favicon, so you don’t get a great first impression. However, when you navigate to the website, you’re actually greeted with a fresh, modern, professional-looking website, into which the owner has clearly put a lot of effort. You can even see a nice personal touch, where ‘Mr Mashuk’s’ is written in a handwriting font. That is completely at odds with the message you’re given from the initial search results. As with anything, in an ever-competitive world, first impressions are very important. The likelihood is that this website is losing out on a lot of visitors, because it isn’t giving off the right first impression. That could be easily remedied by including a favicon that helps to provide a strong brand identity for the website.
The How
So, we have looked at what a favicon is and why you need to include one. Now, it’s time to look at how you can design and build a favicon that perfectly represents your website branding.
The Design
First and foremost, you need to make sure your favicon perfectly represents your organisation or website’s branding. It’s no good having a picture of an orange for a favicon, when you run a lemonade business, for example. Granted, that’s a silly example, but I’m sure you get the point.
Therefore, you need to make sure you sort out your branding and logo first, subsequently using those to develop your favicon. The TripAdvisor example above is exactly what I mean, since they developed their favicon from their logo.
You might not already have a logo and that’s okay. You just need to get started designing one. You can either do this through a designer (I do offer this service, so I’d love to hear from you if you are interested) or through online tools, such as Canva or Logo Maker. There are, of course, many more websites out there that offer similar features. Most of these offer a free tier of service, although you’ll have to pay to get more options when designing your logo.
Once you have your logo, you can then make your favicon. If you have a logo like TripAdvisor, or even my own, creating your favicon would be very simple, since you can just extract the image and use that. Often though, it might not be as simple. For example, your logo might be words only, so you would need to come up with something a bit different, since the words wouldn’t be in any way legible at the size of a favicon. A good example of this is one of my own clients’ websites – Bradley Stankler Planning. Here, the logo in the website header was text, so I had to design a variation that would work better as a favicon. Take a look below.
You can see that the logo, which has been very elegantly designed with text, giving quite an upmarket feel, would not have been in any way suitable for a favicon in that format. Therefore, I created a truncated version, that maintains the same aesthetic, whilst suiting a favicon much better. It’s that sort of thing you’ll have to bear in mind, although you could just as easily replace it with an illustration of some sort.
The Build
Now that you’ve got the design for your favicon, you need to build it. If you created an image during the design phase in a PNG format (that’s the best image format for an icon) then it is perfectly acceptable to simply use that. Most web builders will happily allow you to upload a PNG image. You would simply need to ensure that the image is square. Some of the most common sizes (in pixels) are:
- 32×32: standard for most desktop browsers
- 128×128: Chrome Web Store icon & small Windows 8 start screen icon
- 152×152: iPad touch icon
- 167×167: iPad Retina touch icon
- 180×180: iPhone Retina
- 192×192: Google Developer Web App manifest recommendation
- 196×196: Chrome for Android home screen icon
Now, you may be thinking, which one am I supposed to pick? Well, your confusion would certainly be warranted. Your website is going to be viewed on all sorts of devices, so there clearly isn’t one perfect PNG image size.
Don’t worry, there is a solution! This is where the humble ICO format comes in. It’s rather special. Where a PNG image is only ever going to include one size, which would be the uploaded one, each ICO file can actually contain one or more icon sizes. For example, it could include all of the above dimensions and when you upload that to your website, instead of the PNG file, the most appropriate size is displayed on any given device. That’s amazing, isn’t it?
There are many different online tools you could use to generate your favicon, such as favicon.io, favicon-generator.org and realfavicongenerator.net. Each of them is highly sophisticated and so whichever you use, you won’t go far wrong. These usually offer the choice of downloading as either a PNG or ICO file, but you would ideally want to use the ICO format, for the best overall suitability of your website favicon.
The Upshot
Favicons are an often overlooked, yet very important part of your website. Including one on your website will improve the experience for your users, it will significantly strengthen your brand identity and it will also make it appear much more professional and trustworthy. You should always make sure you include one, no matter whether you are using a free website builder, or a bespoke website from a designer, such as myself, especially as all it takes is an image file and a free service from one of the websites I mentioned above.
How will Digital Lychee Help You?
For all my clients, whether you are looking for a website to be built from scratch, or you simply need a refresh, or of course anything in between, I will work with you to design and install the perfect favicon, to add that perfect finishing touch to your website. If you are interested in my services, then please don’t hesitate to get in touch. I would love to hear from you.