Favicon Size Best Practices

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 not neglect using. 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.

What Is a Favicon?

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 that people visit, 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.

Where Do Favicons Appear

Here are just a few places where you’ll find favicons:

  • Browser tabs
  • Browser history
  • Search bar
  • Toolbar apps
  • Browser history dropdown
  • Search bar recommendations
  • Bookmarks dropdown menu

Wherever you have an online footprint, it's important to have a favicon at that touchpoint.

Why Are Favicons Important?

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:

Strengthen Brand Identity

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.

Improve User Experience

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.

Adds an Element of Credibility and Professionalism

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.

What Is the Best Favicon Size?

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:

  • Browser favicons - 16x16
  • Taskbar shortcut icons – 32x32
  • Desktop shortcut icons – 96x96
  • Apple touch icons – 180x180
  • WordPress sizing – 512x512

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.

How to Make a Favicon for Your Webpage

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.

Favicon File Types

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:

  • SVG: SVG used to be an afterthought but has become very popular in the creative space. It was not widely supported on browsers, but things are moving in a positive direction. Browsers can also display GIFs as favicons, but they are hard to see. SVG files are known to deliver high-quality images without compromising the look, speed, or performance of the site.
  • PNG: PNG files are very popular for creating favicons, as it’s a widely used file format used by creators. They are lightweight and load quickly. When using designs with transparent backgrounds, this is the format to use.
  • JPG: JPG files are not usually used for favicons, as they don’t have the same high-level quality as a PNG.
  • Windows ICO: This was the original file type and is still used by designers. This file type can have multiple bit depths and resolutions.

Tips for How to Make a Favicon

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:

  • Favicon.ico & App Icon Generator: A PNG or JPG can be uploaded to be returned in ICO or PNG in multiple sizes. This is a simple and easy way to generate favicons for a range of different platforms.
  • Favikon: This generator is very easy to use. Upload your image, crop it, and download it into a PNG or ICO format for use. Unfortunately, this generator only produces 16x16 pixel sizes. If you need something larger, it won’t work.
  • Favicon.io: This tool can assist in creating an entirely new favicon from scratch, or one from an emoji, logo, or image. Users can preview the favicon in three different sizes for download.

Here are additional tips to keep in mind when determining the design and size of a favicon:

Keep It Simple

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.

Represent Your Brand

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.

Avoid Text

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.

Final Notes

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.

Share This Article