A favicon is the small icon in your browser tab. It is not a ranking factor, and anybody telling you it boosts your SEO is stretching. What it does do is appear next to your listing in Google mobile search results, which makes it worth getting right for a completely different reason.
Key Takeaways
- It is not a ranking factor. It will not move you up the results, whatever you have read.
- Google shows it in mobile search. That is the real reason to care, since it sits beside your listing.
- It must be recognisable at 16 pixels. Your full logo shrunk down will turn to mush.
- Supply a large square source. Google wants a multiple of 48 pixels and resizes from there.
- Do not overthink it. This is thirty minutes of work, not a project.
While the dimensions of these are typically just 16×16 pixels, its impact on your online presence is anything but small. So what is a favicon? This article dives into the world of favicons, exploring their importance, their influence on SEO, and the process of creating and implementing them.
What is a favicon?
Traditionally, a favicon is a minuscule 16×16 pixel icon that serves as the visual identity for your website on the web and in search results. Its primary function is to aid visitors in locating your page more easily when they have multiple tabs open.
Due to their diminutive size, these image files perform best as simple images or one-to-three characters of text. They are not to be confused with logos, although sometimes they can be the same. Given its small size and resolution, they may need to be an even smaller size or part of a company’s original logo.
Where does a favicon appear?
Favicons are located alongside anything that identifies your website. This includes bookmarks, tabs, toolbar apps, history results, and search bars. Below are a few places where one can spot one:
- Bookmarks drop-down menu
- Browser tabs
- Toolbar Apps
- History drop-down menu
- Browser history
- Search bar
- Search bar recommendations
Why do favicons matter?
Creating a favicon is a small but critical step in setting up a business website. It lends credibility to your site and aids in boosting your online branding and trust from potential consumers. They are an immediate visual marker for the website, offering easy and quick identification for web users while unifying all the browser components into a well-branded browsing experience.
Does a favicon help your SEO?
No, not in the way people mean. It is not a ranking factor, and the usual argument, that a favicon improves user experience which somehow improves rankings, is a chain of reasoning long enough to justify almost anything. Be suspicious of it.
There is a real reason to care, though, and it is more concrete. Google displays favicons next to results in mobile search. So while your icon will not lift your position, it does sit beside your listing at the moment somebody chooses which result to tap. A crisp, recognisable mark helps you look like a real business. A blurry blob or the default globe does not.
Google publishes requirements for this, and they are worth following.
- Use a square image whose dimensions are a multiple of 48 pixels. Google resizes it, so give it something large to work from.
- Keep the file at a stable URL. Google caches it, and moving it around delays the update.
- Make sure Google can crawl it. A favicon blocked in robots.txt will not appear.
- It should represent your brand. Google will ignore an icon it considers inappropriate or generic.
The design constraint matters more than the technical one. At sixteen pixels there is room for a letter, a simple shape, or a single strong mark, and nothing else. If your logo has fine detail or lettering, it will not survive the shrink, and you need a simplified version rather than a resized one.
How do you design a good one?
Crafting and designing a favicon for your website requires careful consideration. While the favicon is small and simple, it can (and should) have a significant impact. It’s crucial to produce the best favicon possible, as this is what users will identify your brand with. Here are some factors to keep in mind when creating your favicon:
Use Space Wisely
A favicon can’t always be a smaller version of your company logo. You should consider your overall size of yours, sticking to 16px since this is acceptable by all browsers.
Embrace Simplicity
Though the favicon is the visual face of your brand, you want to keep your design as simple as possible. The best versions are the simplest. Too much detail will only make the icon look cluttered and messy.
Reflect Brand Identity
Your favicon is the visual icon for your brand, so it should visually tell users what your business represents.
Consider Abbreviating
Finding the perfect visual may not be practical for what your business does. A common solution to this is to use the first letter of your business name or acronyms.
Color Coordination
Color choice should come into play as well. Contrasting colors make it easy for the eye to recognize shapes and the focal point of your favicon. Due to the small nature of these images, you need to clearly represent your company to the user, and color use can be crucial.
What size should a favicon be?
While the generally recommended size for a favicon is 16px, as it can be used across all browsers, you might want to create a version for every possible use. In that case, follow the guide below:
- 16px: For general use in all browsers, could be displayed in the address bar, tabs, or bookmarks views
- 16 pixels. The classic size, shown in browser tabs, the address bar, and bookmarks. Your icon must still be legible here, and this is the constraint that matters.
- 32 pixels. Used on higher resolution displays and in some taskbar contexts.
- 48 pixels and multiples of it. What Google asks for when it pulls your favicon into mobile search results. Supply a large square and let it resize.
- 180 pixels. The Apple touch icon, used when somebody saves your site to an iPhone home screen.
- PNG. The sensible default. Small, sharp, supports transparency, and universally supported by browsers people actually use.
- SVG. Scales perfectly to any size and is now widely supported. A good choice if your mark is a simple vector shape.
- ICO. Still works, and still what some platforms expect at the root of the domain. Its ability to bundle several sizes in one file is genuinely useful, but it is no longer required.
Which file format should you use?
PNG, in almost every case. Older guides steer you towards ICO because Internet Explorer would not accept anything else, and that advice has outlived the browser it was written for. Microsoft retired Internet Explorer in 2022, so it should no longer shape your decision.
In practice most content management systems handle this for you. On WordPress you upload a square image in the site identity settings and it generates what it needs, which is the whole job for most people.
How do you add one to your site?
After creating your favicon, the next step is to add it to your website. The process of doing this differs based on the platform your website is built on. Here’s a step-by-step guide on how to add one to some of the most popular website platforms: WordPress, Wix, and Shopify.
Adding a Favicon to Your WordPress Website
To add a favicon to your WordPress site, go to Appearance > Customize. Next, go to the menu located on the left sidebar; find and click on Site Identity. The Site Icon section is where you can select your image and add the one you want to be displayed.
If your theme does not allow you to upload your favicon on the theme customize settings, you can use a real favicon generator and upload to the Insert Header & Footer plugin.
You will need to click Select your Favicon picture and upload your favicon on WordPress Media so you can generate a URL. You will select the second option and paste your URL in the box. Click Generate your Favicons and HTML code.
Real favicon will generate an HTML code, and you can copy the whole code. Go to the Insert Headers and Footers plugin under Settings and paste your HTML favicon code in the section. Click Save.
Adding a Favicon to Your Wix Website
You can add your favicon on your Wix site by going to Manage Website >Favicon. Click the Upload Favicon button, and you select or upload your image. There is no save button, but rest assured yours will be saved automatically by the system.
Adding a Favicon to Your Shopify Website
To add your favicon on your Shopify site, you’ll need to go to your Online Store. Click on Customize, then click on Theme Settings > Favicon. You can select an image from your media library or upload a new image.
Conclusion
Favicons may seem small and insignificant, but they are powerful tools that can significantly enhance your brand’s online identity and the user experience on your website. By understanding what a favicon is, its importance, and how to create and implement one on your website, you can take a small but critical step in setting up a successful online presence.
Whether you are a startup, a small business, or a large corporation, having a favicon is an essential part of your branding and marketing strategy. So, if you haven’t already, start creating yours today. If you need help with this or any other aspect of your website development, remember that we understand the importance of favicons when we build websites. Let us take it from here and help with your next project.
