How to Create a Favicon for Your Website

So much depends on a little icon resting on a browser tab.

A white horse in a herd of roan horses stands out from the crowd.
•••

Kubilayhan Burcu / EyeEm / Getty Images

If you have a business website, then you need a favicon.

A favicon or website icon is a small symbol that is displayed in web browsers like Google Chrome on the tab of the website or in bookmark and favorites lists. A good favicon can help people to find your website when they have multiple tabs open and reinforce your brand. A bad favicon is forgettable and the worst ones are offensive, so it’s important to understand how and why to create a solid website icon.

In this screenshot of a typical webpage, the favicon is circled.
© The Balance 2019

Tech Requirements

A favicon is a traditionally a 16 by 16 pixel image that uploaded and hosted on a website. You can currently make the file bigger depending on the web design program you use as long as they have the same aspect ratio—like 48 x 48 or 144 x 144 pixels,. No matter how big the file is, it will still display as 16 x 16 pixels in most circumstances.   

Most website builders like WordPress and Wix want the file to be in a JPEG or PNG format. If your file has a transparent background, be sure to save it in PNG format because that will pass on the transparency.

Why’s it called a “favicon” anyway? According to one of the early Internet Explorer engineers present at its invention, “favicon” is short for “Favorite Icon” and it was meant to make it easier to find websites in long lists of bookmarks (or “Favorites” as they were known in Internet Explorer).

What Works in Favicon Design

Because favicons are small, you want them to be both simple and impactful. Anything that is too complicated or appears blurry isn’t going to be as effective in this format.  

You also don’t always need an image. You can also use letters as a favicon. For instance, if your website name is MangoBicycles.com then you can use “MB” in a nice font as your favicon. It’s much better to have a letter based favicon than none at all.

How to Get a Website Favicon Designed

If you have a graphic artist that you contract with or who is on staff, then you can easily ask them to design your website favicon. Otherwise you can get a favicon made at Fiverr.com or use Favicon.io to make one for free. Favicon.io has several options for creating a website icon including making one out of letters.

How to Install a Favicon

If you have a person building your website, they can do it for you. Otherwise, most website builders have a simple place to upload the favicon, you just need to know where to look. In WordPress you use the appearance section of the admin area to upload your favicon file. In WIX you can upload a favicon in settings. 

Where and Why Favicons are Used

Favicons are used in very specific places online and can be leveraged for branding. 

Favicons Show on Website Tabs

The most common place to see a favicon is on a website tab. They display when the website is open in the browser and help people to navigate to your site quickly if they have many browser tabs open. Most website builders will show a generic symbol in the tab if you don’t have a favicon.

Favicons Show in Google Mobile Search and in Some Search Engines

Favicons show up as part of the website listings in mobile search as well as on desktop searches. If you don’t have one, then your listing won’t stand out as much as competing websites that do.

Google will not show favicons in their search results that they deem inappropriate. This can include hate symbols or adult content.

Favicons Are Good for Branding

Website icons that go with your website logo can help people remember your brand. People are visual, and a good favicon that matches your website design can help you develop a cohesive brand image.

The Bottom Line on Using a Website Icon for Your Business

All businesses should have a favicon, because they show up in web searches and in the tabs on your browser. A good website icon will also help you to develop a strong brand image. The good news is they are easy to make and install, so you can implement one on your website quickly.

Article Sources

  1. Word Press: "Creating a Favicon," Accessed Nov. 6, 2019.

  2. WixBlog: "What Is a Favicon and How to Make One for Your Website," Accessed Nov. 6, 2019.