Why is a favicon important for your brand?Favicons attract user attention and boost brand awareness. If users visit a website with a memorable favicon a couple of times, they will then easily distinguish it from others in the future. Think about a famous brand you interact with daily—like Facebook or Instagram—you should be able to easily picture its favicon with your eyes closed. Again, If you‘re like me and tend to keep dozens of tabs open simultaneously—ultimately being unable to read their names—favicons are your best friends that make finding the website you need much easier. The favicons for Facebook and Twitter have look exactly like their respective logos. So, does it mean that all you need is to minimize your logo image and upload it onto your website? Let’s dive deep into all the technical details and talk about what it takes to create a favicon.
What type of image is a favicon?Although most modern browsers will recognize PNG, GIF, and JPG formats for favicons, Internet Explorer currently does not. It is recommended to use the Microsoft ICO format, which works in all browsers.
What size should your favicon be?Another good reason to use the ICO format is that it can contain multiple favicons of different sizes in one ICO file. It is best to have, at minimum, a 16×16 pixel version. I usually include 32×32 and 48×48 versions as well. That way, if users drag the bookmark to their desktop they will see a nicely scaled version of the icon instead of the 16×16 version stretched out. Google recommends going with the largest possible resolution of 192×192. At the moment, Google simply stretches existing low-resolution favicons when a bigger size is required. As a result, all of the images look blurry and take away from the user experience.
General tips to considerSo, if you don’t want to lose out on clicks, consider “upgrading” your site’s favicon. And here are some general guidelines you should stick to:
- Use a square icon.
- A favicon should represent only your brand and not contain inappropriate symbols (like swastikas) — otherwise, Google will not show it and will use the generic symbol instead.
- Favicon file should be accessible to Google crawlers.