How To Make A Favicon

How To Make A Favicon For Your Website

Written by   (author of Obvious Conclusions)

In this article, I will illustrate to you how to make a Favicon for your website. We will look at what a Favicon is, how to create one, and how to implement it. In fact, I will show you how to put two Favicons on one website as I have done on this site.

What Is a Favicon

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

what is a favicon

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

site without favicon

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.

favicons in 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 Create A Favicon For Your Website

Creating a favicon for you website is actually not that difficult. I will walk you through the process of creating a favicon. 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 (http://www.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:

intel favicon

Microsoft 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 our logo and it 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 (if we have not changed it since the printing of this article).

Once you have decided what you want your favicon to be, and sometimes the only way to know this is through experimentation, it is now time to actually create your favicon.

Make Your Favicon

People make their Favicons in different ways because we all use different graphic programs. Independent of what graphics program that you use, your favicon will end up being a 16 x 16 pixel graphic, which is very small. Many people recommend first creating a 32 x 32 or 64 x 64 graphic so that it is easier to edit and then shrinking after it has been created.

The most popular graphics program on the market is Photoshop. There is a download available for Photoshop called the Windows Icon (ICO) file format Photoshop Plugin which allows you to export your graphics files directly to .ICO files. If you use Photoshop, you probably want to refer to this page called How To Create A Favicon.ico In Photoshop. This will tell you all that you need to know to create your favicon using Photoshop.

For those without Photoshop, creating your favicon is still pretty easy. Within your graphics program, create your favicon icon in the dimensions noted above. I like to create mine from scratch using the 16 x 16 format because my graphics program has a zoom feature which makes this small size easy to see and edit.

File Format for Your Favicon

After you have created the file, it is very important to save your favicon in the proper format. You do not want to save your favicon in the .jpg format.

Most of you probably do most of your web graphics in the common .jpg format. However, the .jpg format does not work for favicons because it is not transparent. Your web site favicons will end up looking very poor and conflicting with the background color (usually grey).

You need a favicon file format that is transparent. To accomplish this, you will want to save your icon file in the .gif or .png file formats. Almost any graphics package has the ability to save files in one or both of these formats as you see in the photo below:

save favicon as gif or png

In the example above, you can see that you use the “Save As” feature to find the file types available with your particular graphics package.

Create the Favicon.iso File

Now, you have your favicon saved as a .gif or .png file in dimensions of 16 x 16 or 32 x 32. Up to this point, it does not matter what your file name is because it is not yet in the .ICO format, which is the favicon format. Your goal not is to convert your file to a file called favicon.ico. Sorry, you cannot just rename…that will not work.

However, it is easy to convert your icon to the .ico format. There is a page called FavIcon Generator that allows us to do that easily. Visit the page now…it will open in a new window.

On this page, you can see that it is very easy to convert your file to the new favicon format. Here is a picture of their Favicon Generator Page.

favicon generator

On this page, you will want to do three things: browse to your file on your local computer, click the “create icon” button which will create your favicon.ico file, and then click the “download favicon”, which download the favicon.ico file to your system.

How to Test Your Favicon.ico File

There is a good way to test your favicon.ico file before you implement it on your website and chances are that you want to do this. Often, people like to play around with the artistic qualities of the .ico file before implementing a final version. After all, you never really know how it will be until you see it in your browser.

To test your favicon.ico file, simply find the version that you just downloaded, right click it, and choose “Open With”, and then choose your browser as you see in the photo below.

test your favicon

This will give you a good idea of what your favicon looks like in the browser.

Once you have your ideal favicon, you are ready to…

Put the Favicon.Ico file On Your Website

There is just one more step to implement your favicon–you need to implement it on your website. To do this, copy the favicon.ico file (make sure that it is named favicon.ico) to your websites home directory. You will know this is successful when you can access it directly. For example, on this site, you can visit http://www.thisishowyoudoit.com/favicon.ico and see the favicon.

In some cases, this may be all you need to do but you should take this final step to ensure that you favicon works all the time.

Most of you have a header type of file that creates the top portion of your website so that it is the same across all web pages. In the case of WordPress and most websites, this file is called header.php in about 99% of the cases.

Within this file, you simple need to add the following line as instructed on the Favicon Generator site:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

And, voila, you now have a favicon on your website.

I Don’t See My Favicon

After performing all of these steps, many people then go immediately to their browser to try to see their favicon and it is not there. After all that work, they are left saying, “It didn’t work. I don’t see my favicon.”

Do not fret–it is there. You are not seeing fresh copies of your web pages. You are seeing older cached versions. You have several options here. You can delete temp files, history and cookies and this will get rid of the cached version of these pages. However, I don’t recommend this because you will be probably end up deleting information that you need. Alternatively, you can login as a different user on the same system or login in on a different system to check out your new favicons. You can also check from another browswer that does not have cached copies of your web site (see best Web browsers) Or, just relax and wait till tomorrow at which time you will begin to see your favicons. If you followed the above instructions, you’ll be all good :)

How to Have Two Favicons on One Website

If you have a reason to have more than one favicon on a website, this is also doable.

For example, on this site we have our How To portion and then we have the fun blog called Live Your Way, which you should really check out by the way!

Well, ideally, each of these portions of the website would have their own favicon. And, it is possible to achieve that idea.

How do you have multiple favicons on one site? It’s really fairly easy. You create the second favicon just as we did above but give it the name favicon2.ico instead of just favicon.ico. Then, upload the icon file to the root directory of that subsite. Finally, just change the header.php file to say favicon2.ico instead of favicon.ico as you see below:

<link rel="shortcut icon" type="image/x-icon" href="/favicon2.ico">

And, that’s how you have mulitple favicons on one site! Pretty easy, huh?

How To Create a Favicon Videos

If you prefer to watch videos about how to create a favicon, there are many out there on the Internet. Frankly, the quality of many is not that great and everybody does it slightly differently. It may simply confuse you after watching people do it so many different ways.

Here are the 3 best videos and a bonus video that you may want to visit if you would like more information on creating favicons:

Creating a Favicon For Your Website

This four minute video illustrates how to create a favicon as we did above, using the Favicon Generator website. This video also illustrates how to edit the header.php in WordPress to implement the favicon on your WordPress blog.

How To Create A Favicon For Your Site

This 8 minute video is detailed and well-done though the volume is very low. This video also illustrates the use of the favicon generator AND shows you how to delete your cache so that you can see you favicon immediately after implementing it.

Create A Favicon Using Paint

Not every can use Photoshop to create a Favicon. After all, Photoshop is expensive! This quick video show you how to use the built in Microsoft Paint software to create a favicon. The volume is a little low on this video but it will help you get started.

Create a Favicon With Photoshop

Here is the video that you want to watch if you are creating a favicon using Photoshop. It is 3 minutes and details not only how to make a favicon with Photoshop but how to install the plugin required to create .ico files within Photoshop directly.

Bonsu Video: Create An Animated Favicon

Want to get brave and daring? This 4 minute video teaches you how to make an animated favicon so that your favicon can look really lively! It’s worth checking out to see if you want to get animated with 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.

Get Social

Richard Cummings

Richard Cummings is writer, traveler, and web content developer. He creates fun, informative how to articles for this site and exercises his creative writing prerogative at ARichIdea.com.

Get your copy of his latest book entitled Obvious Conclusions, stories of a Midwestern emigrant influenced and corrupted by many years living in San Francisco and abroad. It just received its first outstanding review "...reminiscent of David Sedaris or Augusten Burroughs" on Amazon UK.
Get Social
Richard CummingsHow To Make A Favicon For Your Website

Leave a Reply

Your email address will not be published. Required fields are marked *