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.

Favicons displayed in browser tabs

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.

Free Intro Guide to HTML & CSS [Download Now]

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 displayed in 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.

favicons displayed in mobile search results

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.

Easy to grow bulbs' website logo, which inspired its 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.

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.

Favicon Generators

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.

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.

llama icon uploaded in favikon, a popular favicon generator

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.

llama icon uploaded in favicon.io, a popular favicon generator

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.

llama icon uploaded in favicon.ico & app icon generator, a popular favicon generatorThe 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:

 

 

   <link rel="icon"  type="image/png" href="/favicon.png">

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:

 

 

   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png"  sizes="48x48" href="/favicon-48x48.png">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Creating 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.

New Call-to-action

 css introduction

Originally published May 22, 2020 7:00:00 AM, updated May 22 2020

Topics:

Bootstrap CSS