A favicon, or browser icon, is a small image that appears on the browser tab of a website. Most often, they are a tiny version of your brand logo. Because favicons are so tiny — 16 by 16 pixels — it can be a challenge to adapt a logo into a format that looks good.
Why do I need a favicon?
A favicon matters for the same reason branding matters – you want your website to stand out, to be easy to find and remember. It is becoming more and more common to have multiple tabs open while browsing the internet. Maybe we were checking our email, but a great newsletter caught our eye, and now we’re doing a little shopping. But whoops, we got a call and had to click away. That brand wants to close the sale, so making that tab easy to find will only help in that goal.
How do I make a favicon?
The ideal format for your favicon is a .ico file sized 50 pixels by 50 pixels. You don’t have to design your favicon as a square, but that is the shape of space you’re working with. The key to creating a favicon is to keep it as simple and high contrast as possible. These days, more and more people have their browsers in night mode. That means that you need to account for your favicon looking good on both light and dark backgrounds.
Is there a simple shape or a letter that you can claim as part of your brand identity? No matter what you choose, it should feel unique to your business. If you choose to go with a letter, make sure it is in a font that you can read clearly when you scale down to 16 x 16 pixels. You can also test the color contrast for light and dark modes by using a contrast checking tool.
Here are my favicon best practices from designing over a dozen websites:
- Keep it simple
- Make your design as an SVG
- Export 50 x 50, 32 x 32, and 16 x 16 pixel versions of your favicon
- Some implementation methods may require you to convert your SVG to an ICO format
- Check visual accessibility (test light and dark mode for your design)
How to implement your favicon:
How you will implement your favicon or browser icon will depend on how you are publishing your website. Below are tutorial guides for some of the most popular website building platforms. If one you use is missing, leave a comment so I can update this list with more complete information.
- Add a favicon to your website using HTML
- If you use WordPress, many themes support favicons in the “Appearance – Customize” menu. If your website’s theme doesn’t support favicons, you can use a plugin instead.
- Add a favicon to your website using SquareSpace
- Add a favicon to your website using Shopify
- Add a favicon to your website using Wix
Still want help setting up your website’s favicon? Get in touch!