How to customize your website’s favicon {and examples for inspiration}
When the news of Google adding favicons to search engine results came out last month, there seemed to be a renewed interest in how to create these little guys and if, in fact they really do matter. Yes! They do matter!
Past studies have revealed that websites with favicons are trusted more than those without them. If your site doesn't have a favicon a web browser will display the default, blank document, on a browser tab. Worse still, if this is displayed next to a competitor site then you are going to lose credibility and trust. (Source: Woorank.com)
Favicons also show up when someone bookmarks a website so when they go back to find the link later on, they are more likely to recognize your site by its favicon. Plus, one can infer that if you are taking the time to create a favicon for your website then you probably also have concern for those viewing your site, a.k.a. you’re trying to give them the content they came looking for.
So let’s back up a minute:
What is a favicon? A favicon is that little photo/icon that appears just to the left of the site or page title tab in your browser. And, it now appears next to your website in google search results as well. If you don’t set a favicon, your website content host will determine one for you. I know for Squarespace users, the default is an ugly black box. Hard pass.
How do you create a favicon? Favicons are just image files and can be created in a number of ways. Some common photo editing programs to create them are Canva or any of the Adobe suite products (Adobe Illustrator is my fave).
Are there technical requirements or best practices? Yes. You’ll want to be careful because favicons should be very small but also very good resolution. This can be tricky to get just right. Favicon images work best across all browsers when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px. I recommend using an .ico or a .png file as the favicon image and that you can keep your file size smaller than 100 KB.
For Squarespace users, you’ll add your favicon under the Design/Logo & Site Title section. WordPress users will set their site favicon under the Admin Panel in the Site Identity section. For other platforms, seek out help from your website designer.
Some people struggle with favicons because their logos don’t quite fit the dimensions you’ll need for a favicon. I had that exact problem. To see how I fixed that little problem and adjusted my logo/branding to fit my favicon, take a look:
I chose to carry over one simple brand element to my favicon. If I had forced my logo in that space by shrinking it down to fit, it would have been unreadable anyway.
Here’s another example that I just used for a client…
Anytime we can take our branding up a notch and pay attention to the small details, it matters. Take a look at your own favicon and see if it can be improved!
Until next time, keep making a great first impression!