Favicon best practices regarding size and format?

Question

I'm busy on a WordPress site and have come to the stage to add the finishing touch, being the favicon. I'm primarily a developer so graphics and icons aren't my strongest point. What are the best practices when creating a favicon (in terms of sizes etc, I already have the design)? I'd like to accommodate for every possible device, be it mobile, tablets, retina displays etc. Also I don't want it ending up blurry so I need to know what pixel density to use and everything.If there are some Mac apps or online tools that will do this for you (and do it properly) that would be great as well. Otherwise I know how to find my way around Illustrator and Photoshop.

Answer 1

Hi,

That's a great question! The favicon has become even more important recently since Google decided to display a website's favicon in the mobile search results.

For Sizing

You should use 16 X 16 or 32 X 32 px in 8-bit or 24-bit colors.

File Type

File extension should be .png, .gif, or .io

How Can I Make My Favicon Look Authoritative?

If you look at the many favicons out there, some are very easy to read and others, not so much. Here are our tips on creating an authoritative favicon for your website.

1. Stick to 2 colors maximum. The favicon is small and thereby, you won’t see multiple colors if you decide to use them.
2. Use Contrasting Colors in Your Favicon. The best way to read text or images for that matter is to have a strong contrast between the two colors. As you may see, I am typing in black font on a white background which makes it easy to see.

You can find out more in this article: https://www.digitalmarketingceo.com/blog/how-to-make-a-favicon-look-authoritative-in-search/

I hope that helps!