Q+A: How do I Create a Favicon for my website?

Kate asks, “How do I create a Favicon and add it to my website?”

A favicon is an icon that you use in the top left corner of your website. It sits in the left corner of the area your domain is located.

It is one of those small details that can really set you apart from other websites. You know what they say, the devil is in the detail! If you have a creative business where you want people to notice you because of your style, then I firmly believe it is these tiny things and attention to detail that sets you apart. It shows you go that extra mile. 

Surely the main reason to have a favicon is the obvious improvement in user experience. A website without one will show a generic browser symbol and if you care about your user experience, you must care about favicons.

#1 Create a beautiful design

The key here is simplicity. Because it is such a small size, you don’t want to try stuff your entire logo in there! It is better to use a little icon if one was developed as part of your branding. If not, try using the First letter of the brand in a coloured circle. Ask your designer to include a favicon icon when they create your branding package.

#2 Turn it into a Favicon

They are usually needed in PNG format. There are some great online resources to help you create the correct format. Favicon images work best across all browsers when sized between 100px × 100px and 300px × 300px, though they display at 16px × 16px. These are the standard favicon dimensions, and while some browsers support larger favicon files, all will support that size.

#3 Upload to your website!

If you are using WordPress Simply go to Appearance » Customize and click on the ‘Site Identity’ tab. If you are using squarespace, follow this tutorial.

As always, just comment below if you have any questions you would like to be featured in our next Q+A series!