How to Change Your Website’s Favicon

Have you ever notice the little image that sits next to the title of your website in the browser tab? In some websites those logos are unique, for example, Facebook has its usual F, Google has its G. These, I learned from web-designer Beth, are called favicons.

Here are a few examples:



Why Do Favicons Matter?

In addition to being a branding device, favicons serve a practical purpose. Since so much web surfing is done using tabs, a unique favicon can help the user identify which site is which, just by looking at the tab.


Look at this bunch of tabs, and see how much easier it is to tell sites apart when they have unique favicons. This is especially useful when you cannot see the site’s title at all, and all you can see is the favicon.



How to Change Favicons

Changing favicons is actually quite simple.  As I showed you, Bluehost has its own favicon. Of course, I don’t want to brand Bluehost, so I wanted to change the favicon to something unique to me.

Unfortunately, I haven’t created a logo yet, so for the moment, Beth was kind enough to create something quick for me. That little gavel? That is currently my favicon. (Thank you Beth!)

Create your Favicon

Creating a favicon is like creating any other image. Get your image, whether you create it, download it, or hire someone to make it for you. Then shrink it to the appropriate size.  Size should be 16×16 or 32×32. Don’t try to get too fancy. Text won’t be readable. Stick to a simple image, for example one letter like Google and Facebook. I am thinking I should make my logo be a nice J. That would make my life easy, huh?

Anyway, simply save the image as favicon.jpg or favicon.png.

Convert your Favicon

Favicon stands for favorite icon. So the next step? Change your image to an icon. If you don’t have the software, you can simply use an online service such as Dynamic Drive FavIcon Generator.

Upload your Favicon

Now that you have your favicon all ready, you just need to upload it. This can actually be the hardest part.

A lot of hosts don’t want you to change their favicon to your favicon, so they hide it. You need to find where the favicon is currently located, and upload your new image to replace the old one. For example, in WordPress, the favicon, if there is one, normally sits in the specific theme you are using, under images.

If you cannot find where the favicon for your host is located, do a Google search for yourhostname favicon.  You will probably get the information you need.

Once you know where to upload your favicon, simply use your host’s ftp tool or your own (I like Filezilla) to upload the new image.

Normally you will have to empty the cache of your browser to see the new favicon.

That’s it.

Host Won’t Let You Change Your Favicon?

If you have emptied your cache and still are seeing a different favicon, you might need to take a different step. You can also use this method to put different favicons on different pages.

Follow the steps above to create your favicon. Upload it to the root of your website.  Then use the code supplied here.

Again, make sure you have emptied your browser’s cache before you are convinced the change didn’t work.

Subscribe to This Blog