The What, Why, & How of Making a Favicon for Your Website

When you have dozens of sites open, favicons can help you keep track of different web pages.

Favicons are icons that appear on the tab for a page along with the page’s title. Not only can they help boost visibility in your customers’ browsers, but they can also help strengthen your brand’s identity.

Read further to discover what favicons are, how they affect SEO, how to make a favicon with a generator, and how to add it to your website using HTML.

(Psst: If you consider yourself a visual learner, this video has you covered.) 

Table of Contents

• What is a favicon?
• Where can you see the favicon?
• Why do favicons matter?
• What size is a favicon?
• How do favicons affect SEO?
• How to Design a Favicon
• How to Create a Favicon
• How to Add a Favicon in HTML

Google has one of the most recognized favicons. You can see the multi-colored G in the address bar of my browser below.

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.

Where can you see the favicon?

Look at the Hubspot tab in your browser. You will notice the icon below next to the title of this article.

This is known as the favicon and most websites will have one, allowing you to keep track of your tabs even when you can’t see the title of the page.

Favicons are also located on:

• The search bar.
• Search history.
• Toolbar apps.
• Bookmarks.
• Recommendations for your search bar.
• The drop-down menu of your bookmarks.

These favicons can help web users easily identify pages they’ve visited, and you can ensure that your website is easily identifiable by using one.

Why do favicons matter?

Favicons not only impact user experience and brand awareness, but they 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.

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.

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.

How do favicons affect SEO?

While favicons don’t directly influence your search engine ranking, they do influence how much time on page those who interact with your website spend.

Think about it this way, if your customers can’t quickly identify which tab is yours by a favicon, they are unlikely to revisit that page.

Brand Authority and Image

Having a unique logo and using it as your favicon will put your brand image at the forefront of customers’ minds.

When choosing your favicon, make sure that there aren’t other brands with similar logos. You can test this out by reverse image searching your logo to see what other brands come up.

Make sure your favicon is unique enough in both color and look so consumers can easily identify your brand.

User Experience

Favicons increase the likelihood that your visitors will save your page as a bookmark. This has tons of benefits in search. Google boosts your site and improves your SEO ranking if users bookmark your page. Not having a favicon is sure to negatively impact your ranking because bookmarks without favicons are not user-friendly.

Further, if customers want to look back at an article or product page on your website, they will go to their history. Favicons show up in web search history, improving the user experience by helping customers quickly identify past searches.

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 Design a Favicon

You want to make your favicon recognizable and consistent with your brand identity. Instead of starting from scratch, you should base it on your company logo.

Consider hiring a graphic designer on Fiverr or Upwork to create your logo, or use tools like Logo Crisp to design your own logo.

Once you have your logo, it’s time to make your favicon.

Remember: Your favicon should match elements of your logo, but it doesn’t have to be an exact match. Favicons often need to be more simple than a brand logo because of their small dimensions.

Companies like Google and Facebook use the first letter of their business in their favicon and the same color scheme as their logo. Some businesses use the inverted color scheme of their logo for their favicon, adding more negative space.

If you don’t have a graphic design or art background, creating a logo may feel outside your wheelhouse. If you choose to hire a graphic designer, be sure to ask for their input on color scheme, font type, and overall image.

Check out this blog on 2022 trends for brand logos.

How to Create a Favicon

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.

The easiest way to make a custom favicon is to use HubSpot's free favicon generator. Otherwise, you might need to use dedicated icon editing software like IconEdit2. With most icon editing software, you can add multiple sizes to a single icon file. With our generator, the sizes are optimized for you.

Once you’re satisfied with your favicon image and sizes, you can save the file in PNG or JPG format and 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.

Favicon Generators

Below are some of the best favicon generators on the web. With these tools, you simply upload your favicon image. The software then converts the image into proper favicon formats and makes 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.

Favikon

Creating your favicon in Favikon is easy. You simply upload an image, crop it, and then download the resulting icon in an ICO or PNG format. Below I’ve uploaded the llama icon from The Noun Project.

The downside is that Favikon only supports one size: 16x16 pixels. For more size options, check out the tools below.

Favicon.io

With Favicon.io, you can generate a favicon from scratch or from an image, logo, or emoji. You can preview it in three different sizes before downloading.

You can download the result in ICO and PNG formats and in multiple sizes. The options are listed below:

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• favicon-16x16.png
• favicon-32x32.png
• Favicon.ico

Favicon.ico & App Icon Generator

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:

• apple-icon-57x57.png
• apple-icon-60x60.png
• apple-icon-72x72.pnf
• apple-icon-76x76.png
• apple-icon-114x114.png
• apple-icon-120x120.png
• apple-icon-144x144.png
• apple-icon-152x152.png
• apple-icon-180x180.png
• android-icon-192x192.png
• favicon-32x32.png
• favicon-96x96.png
• favicon-16x16.png

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 <rel="noopener" target="_blank" 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:

Using Your Favicon

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.

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.