At any given time in the day, I have about 20 tabs open in Chrome. What helps me keep track of which tabs are which are the little icons shown below.
I know my Google Docs are the tabs with the blue notepad. My Trello board is the tab with a mini Trello board. The HubSpot blogs I’m referencing are the tabs with sprockets, and so on.
These icons are known as favicons. Not only can they help boost your visibility in a browser full of open tabs — they can also help strengthen your brand’s identity.
Let’s take a closer look at what favicons are below. Then we’ll look at how you can make one with a favicon generator and add it to your site using HTML.
What is a favicon?
A favicon is a browser icon that represents a brand or website. Most often seen next to a web page’s title in browser tabs, favicons can also be found in address bars, bookmark lists, search results pages, toolbars, browser history, and other places across the web.
Google has one of the most recognized favicons. You can see the multi-colored G in the address bar of my browser below.
You can also see the favicons for Gmail, Google Sheets, HubSpot’s Wiki, Hemingway Editor, and more in my bookmarks list.
Favicons even appear in mobile search results on Google now. You can see the results for my last search — “how often should succulents be watered” — below.
Why do favicons matter?
Favicons not only impact user experience and brand awareness — they can also make your website look more professional.
Notice in the mobile SERP that the websites for Joy Us Garden and Easy to Grow Bulbs have flower icons, but the site for The Succulent Source has a gray globe. That doesn’t make much sense for a website about succulents, does it? That’s because the globe is the default favicon Google Chrome sets for websites that don’t have a custom favicon.
If I’m quickly scanning the page of results, I’ll probably decide to explore Joy Us Garden and Easy to Grow Bulbs over The Succulent Source for a few reasons. Not only do they appear first in the SERP, but also their favicons, URLs, page titles, and meta descriptions all point to them being websites dedicated to everything plants and having an answer to my question.
Now picture these three websites in browser tabs on a desktop. It’d be much easier to remember the custom favicons of Joy Us Garden and Easy to Grow Bulbs than the default favicon of The Succulent Source. In a sea of open tabs, I’m more likely to click back to the tabs with custom favicons and spend more time on those sites.
Finally, let’s say I click on each of these sites. When visiting Joy Us Garden and Easy to Grow Bulbs, I immediately notice that the custom favicons are based on the website’s logos. The latter’s colorful logo is shown below. You’ll recognize the tulip as their favicon.
This helps to strengthen their brand identity and make their site more memorable. When visiting The Succulent Source, on the other hand, I’ll be seeing their logo for the first time. They could improve their brand consistency by matching their logo and favicon.
What size is a favicon?
The optimal size for favicons is 16x16 pixels. That’s how they appear in browser tabs, address bars, and bookmark lists. Ideally however, you’ll create your favicon in multiple sizes. That way you’ll see properly scaled versions on larger screens rather than the 16x16 version stretched out.
Below are some of the most common sizes for favicons and their unique purposes.
16x16: The size of browser favicons.
32x32: The size of taskbar shortcut icons.
96x96: The size of desktop shortcut icons.
180x180: The size of Apple touch icons.
300x300: The size required by Squarespace.
512x512:The size required by WordPress.
Now that we understand what a favicon is, its purpose, and its different sizing, let’s take a look at how to make one.
How to Make a Favicon
You want to make your favicon recognizable and consistent with your brand identity. So instead of starting from scratch, you should base it on your company logo.
If you don’t have a logo, then start there. You can hire a designer to create one for you, or you can use tools like Logo Crisp to design a high-quality logo for a fraction of the cost.
Once you’re happy with your logo, you can start making your favicon. Unfortunately, it’s not as simple as compressing your logo into a 16x16 square and calling it a day. Your logo might have text, for example, which won’t be legible when shrunken down.
That’s why you want to take the most recognizable part of your logo and make it your favicon. Easy to Grow Bulbs did exactly that by taking the tulip from their logo and making it their favicon.
To make changes like these, you might need to use icon editing software like IconEdit2. With most icon editing software, you can add multiple sizes to a single icon file. Once you’re satisfied with your favicon image and sizes, you can save the file in PNG or JPG format and then upload it to a favicon generator.
However, for smaller changes like cropping an image, you can complete the entire process using a favicon generator. Let’s take a closer look at these online tools below.
Below are some of the best favicon generators on the web. With these tools, you simply upload your favicon image and it will convert the image into proper favicon formats and make it available to download. This process will only take a few minutes.
The standard formats for favicons are ICO and PNG. ICO is compatible with all browsers, including Internet Explorer. PNG is another common format. The only disadvantage is that Internet Explorer will not support a PNG file. Ideally, the generator you choose will allow you to download your favicon in both formats.
With this free tool, you can upload a PNG or JPG image and convert it to ICO and PNG formats in even more sizes.
The download options are listed below:
Once you’ve generated your favicon in your desired format, you’ll save it in the root directory of your site. You can then link to the file in HTML to implement the favicon on your site.
Before we walk through that process below, it's important to note this applies to site owners who built their site from scratch or with a development framework like Bootstrap CSS. If you used a website builder or CMS, like WordPress or WordPress alternatives, then the process will vary slightly.
How to Add a Favicon in HTML
Once you’ve created your favicon, you have to tell browsers and other web apps where to find it. To do so, you have to add a line of code in the <head> section of your HTML file.
Let’s say you saved your PNG file as “favicon.ico.” Then you’d add the following code snippet anywhere between your <head></head> tags:
Please note: Your favicon does not have to be placed in the root directory of your site — it just usually is. If you saved it in another location, just make sure the href attribute is accurate. So if you saved it to a subfolder named “images” then you’d type in <href="images/favicon.png">.
Now let’s say you created multiple favicon sizes. You can load them all on your site by adding a line of code for each size to the <head> section of your HTML file. If you created a 16x16, 32x32, 48x48, and 180x180 version, for example, then you’d add the following snippet of code:
Favicons are an important element of web design. They can improve the visitor experience, strengthen your brand identity, and make your site seem more credible. Don’t make the mistake of overlooking them — particularly when they’re easy to create and add to your site. You just need a free favicon generator and some familiarity with HTML.
Originally published May 22, 2020 7:00:00 AM, updated May 22 2020