Favicons appear as a browser icon and in other locations. Read this post to learn more about best practices regarding favicon sizing.
Favicons are a piece of internet real estate every business owner should take advantage of. Look at the websites you use—is there an icon in the tab beside the name? That’s a favicon and it means a lot. While there are many companies that haven’t really paid attention to this, a favicon makes a statement about you and your brand.
To learn more about favicons, including why they’re important and favicon size best practices, continue reading.
A favicon is a browser icon representing your brand. Most people pay attention to the ones that show up in the tab next to the name of a business, but they are also in search results pages, toolbars, bookmark lists, address bars, and other areas across the web. They have become so crucial to brand identity and SEO that they are also in mobile search results.
Favicons are a great design element that had a very interesting start. They used to be buried in the root directory of a website way back when there was Internet Explorer 5. They also used to track the number of times a visitor came to a website.
If you have a website, you must have a favicon for your landing page. In fact, standalone landing pages need favicons too to increase brand awareness. It enhances the level of professionalism you’re presenting to the public, and when people see your favicon, they should remember it.
Here are just a few places where you’ll find favicons:
Wherever you have an online footprint, it's important to have a favicon at that touchpoint.
Although a favicon is just a small representation of your brand, it matters. One of the main goals of a business and brand is to gain trust and consumer loyalty. The more chances they get to see your imprint, the more they will begin recognizing and expecting to see you.
Every website builder should integrate a favicon into the site design, and if you’re using a drag and drop website builder, they should have a space where you can upload a favicon yourself. Here are additional reasons why favicons are an important piece of real estate for your brand:
A cohesive brand works wonders with your target audience. Users of your site or online store look at everything. A favicon works to your advantage by speaking with your brand voice without uttering a word or needing an ad. By default, the favicon is an extension of your brand.
The favicon helps users find your site easily in a sea of other tabs or applications. This makes it easy for them to come back again and again. On a mobile device, the favicon has a definitive, lasting impact. Favicons can help improve your SEO in subtle ways. When you have a favicon in the tabs of your browser, in the history archives, and in your bookmarks, users will continuously engage with your site. This increases the interactions, which can improve your overall SEO.
Your SEO is also improved because the favicon provides a competitive advantage when it shows up in bookmarks. If your website does not have a favicon, it may not be bookmarked on a browser like Chrome because it extracts certain search ranking signals from sites bookmarked on the web.
It’s been mentioned before, but the favicon shows you care about your brand, how your audience views your brand, and how professional your business is. It gives users a sense of confidence that they are with a brand they can trust.
Favicon dimensions vary based on where they will be used. The most common favicon size is 16x16 pixels. There are places, however, where the favicon size needs to be a little larger. Here’s a good breakdown of favicon dimensions and their uses in pixels:
It may seem strange that so many different favicon sizes are needed, but there are a lot of ways that the size of a favicon can change based on the platform and its user interface.
One of the most important things to remember about creating a favicon is that it must be visible and crisp. Using a high-quality version of your logo is important. It’s important to consider the size of a favicon to have the best representation of your brand.
So what goes into making a favicon? Think about how you want your favicon to look. Many brands have a single logo that is used for certain things. Creating a special favicon that aligns with your brand is a great idea. While people may think a favicon is just a smaller version of your main logo, it can be much more than that. Making this part of your creative brand efforts keeps things cohesive while making an impact.
One of the most important things to consider when creating a favicon for your website and use across the web is the size of favicon real estate you must work with. Depending on where your favicon will live, the format matters. These file types are used to create lasting favicons that are bright and crisp:
When creating a favicon, there are some rules you should follow to get the best results from your efforts. You may also want to look into using a favicon generator. These tools will convert your image into the right format for download. Here are some popular favicon generators to consider:
Here are additional tips to keep in mind when determining the design and size of a favicon:
When creating a favicon, it is good to consider it as a kind of extension of your logo. It must mirror your brand image. That means you must consider space. You want to make sure it is bright and attractive. If you have a word-based logo for your brand and want to stay totally authentic to that, it’s best to create a favicon with the first letter of the word. It’s also important to keep the core elements intact for the same look, feel, and cohesiveness.
If you have a brand mark logo, spacing is also an issue. These are the best representations, as you may not have to do much. An iconic logo has both a brand mark and a wordmark. In these cases, just the brand mark is usually used for the favicon. Browser compatibility is also a factor as they all have different requirements. Always remember to keep in mind the favicon’s size.
This is a representation of your brand and should be cohesively aligned with your colors and strategy. This visual should continue as part of the website using your brand voice and visual language. The color scheme should effortlessly blend into the design. Your favicon may be displayed on different backgrounds that may vary from what you are used to. Testing the favicon on black, gray, and white backgrounds is important before you finalize the design. This will avoid having to do additional work.
Text should be avoided at all costs. With the favicon being so small, it will be very difficult to read what the favicon says. Utilizing the first letter of the brand name in a word logo is smart and can be designed to add an additional flair to the brand. If text must be used, it should be one to three characters only. If you can use initials to get the same effect, this is also a good idea. The goal is to strengthen—not diminish—the brand.
Now you should understand why favicons are such an important part of your brand and how they can help position your brand for longevity with a professional appearance. Be mindful of where favicons appear, and how size can affect how they look. The overall design of the favicon should consider simplicity and brand representation.
You can create a website, online store, and more using Mailchimp’s content studio. Check out the many features offered by Mailchimp that work together to enhance your brand while projecting a cohesive and professional look and feel across all your web real estate.