How to create and display a Favicon on your website


Hi everyone, and welcome to Tubetorial. I’m Lorraine Nepomuceno.

In this episode, I’m going to show you how to create a display a Favicon on your website or blog. You can think of a favicon as a small icon or image, which is associated with a certain website. The Favicon shows up in the browser’s address bar, and also next to the website’s name in a list of bookmarks. Almost all modern browsers support Favicons- and it’s a good way to add additional branding to your website or blog.

There are quite a few online tools that can help you create a Favicon- today we’ll be using my favorite one, which is really easy to use, at

As you can see, you have the option here to import an existing image to convert into a Favicon- and that’s probably what you want to do if you have an existing logo or graphic. Today, though, I’m going to create one from scratch, right here- for my gaming blog

So let’s get started.

While I create the Favicon in the editing box, I get a live preview of how the Favicon will look- here, below. This is great, because you want to make sure that your Favicon, especially if it contains text elements, will be readable at a small size.

Now, all I have to do is download the Favicon to my desktop. It saves as favicon.ico – which is the standard format for Favicons.

Once I have it on my computer, I use FTP to upload it into the ROOT directory of my website. This can be called public_html or www- it might be different for you, but it’s generally where the main pages of your website are located.

Now that it’s uploaded, I want to reload my blog in my browser… and there’s my new Favicon.

For more information on creating and using Favicons, visit this how-to page at the W3C, or the Favicon entry on Wikipedia.



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