How To Make A Favicon For Your Website [2020 Edition]

Richard Cummings

5 years ago

In this article, I will illustrate to you how to make a Favicon for your website.

First, we will look at the simple steps of how to make a favicon for your website followed by a short how-to video so that you can follow along.

Following that, we’ll go into more detail about what a favicon is and how to choose your website Favicon: Should it be your company name, logo, or another graphic?

Now, let’s delve right into how to quickly create the best favicon for your site.

Create Your Website Favicon in Four Simple Steps

A favicon for your website can be generated in 4 simple steps. I have outlined these steps below and each is articulated in the short how-to video below.

Visit the website favicon.io: This site is the best website for favicon generation and it’s free.
Generate your logo from text or image: Many will choose to use their company logo as their favicon, or if that’s too large, others will choose one or two letters as their favicon.
Download the favicons to your computer: Favicon.io will generate your favicons in many differents sizes.
Upload to website and add code in the <head> section of your pages: You will want to add a reference to your favicon location in the head section of your website. If you use WordPress, your theme probably will have an easy way for you to do this.

Video: How To Create A Favicon For Your Website

In this video, I will illustrate how to make a Favicon for your website in 4 simple steps.

What Is a Favicon

Simply put, a Favicon (also called a website icon, among many other nicknames) is that little icon that you see up in the browser bar next to your website name. Here is a picture of the favicon on this site right now:

If you do not implement a favicon, your website will use the default Favicon which looks something like this:

A favicon is not required on your website, but it is good to have because it makes your website standout from sites that do not have favicons.

People take subtle notice of it in the browser bar, but, more importantly, people see this icon in their bookmarks which makes your site stand out more.

Take a look at the photo below to see how favicons make your site standout among other bookmarks and favorites.

Thus, while a favicon will not bring your website massive amounts of traffic, it will benefit you with small amounts of return traffic over the long haul. Plus, it simply makes your site stand out just a little bit more when people visit it.

How to Choose A Favicon For Your Website

Creating a favicon for you website is actually not that difficult as you saw in the steps and video above.

The difficult part is determining what you want your favicon to be.

Should your favicon be your company name, your company logo, or some derivative of one or the other?

Though this may seem like it is an easy choice, it is not due to the size limitations of the favicon.

If you have a long company name, such as we do (https://thisishowyoudoit.com), you can not use the whole name because it will not fit. The size of that little icon is very small.

Let’s take a look at the favicons of two prominent tech companies: Intel and Microsoft.

Whose whole company name do you think would fit in the icon? You probably guessed right. Take a look at their respective favicons below:

Intel Favicon:

Microsoft Favicon:

As you can see, the Intel logo works nicely as a favicon for Intel because the name is not too long. In Microsoft’s case, they simply chose the letter M as a favicon because their name and logo are too large to make it into a favicon.

In this case of ThisIsHowYouDoIt.com, our name is far too long to be a favicon. However, just using the first letter of “T” did not really represent what we are about. We narrowed it down to two choices “DoIt” or “How”. We ended up choosing “How” simply because it was very simple and also the word “DoIt” (which is great because it represents what we are all about) does not come across very well in a small icon.

You can see the term “how” in our favicon above in your browser tab. The larger version looks like this:

Once you have decided what you want your favicon to be — and sometimes the only way to know this is through experimentation — you are now ready to use the instructions above to create your favicon.

How to Make a Favicon: Conclusion

On this page, we have brought you detailed textual and video instructions on how to make a favicon.

Favicons distinguish your site by adding an icon next to your website name and they give your site a more professional look and feel.

If you do not have a favicon, it’s time you put one on your site. It doesn’t take that long and its well worth the effort.

So get out there and make a favicon for your website!

PS: Those who enjoyed this page also found the page How To Resize Pictures page very useful.