Have you ever noticed that some of the most popular sites around display a small image in the address bar of your web browser when you pay a visit?

It’s called a Favicon. You can see them in the address bar of Internet Explorer, on browser tabs and the favourites bar in chrome, and in the home screen of the Safari browser on iPhone. In short, they’re pretty much everywhere you go online.

In this article, we’ll explain why favicons are important, and walk you through the basics of adding one to your site. We’ll also link to resources that will help you add every kind of favicon you could possibly need.

So why install a Favicon on your site?

Favicons are an excellent way to help embed your logo in the minds of existing and potential customers.

Clearly, it’s not something you need to have on your site, but Favicons are so quick and easy to install it makes sense to use them to help boost your brand.

It won’t increase your sales overnight, but it will help your company stick in people’s minds.

What kind of image can I use as a Favicon?

We recommend using your logo for reasons of brand recognition. If you use something else, you probably won’t get the branding-related benefits of having a Favicon on your site. If you don’t have a logo for your business yet, you can learn how to get one in this guide.

So what about the technical requirements of the image? What size should it be? What file format should it be?

The short answer is “it depends”. The slightly longer answer is that different browsers and devices have different requirements for file size and format. Fortunately, there’s a handy guide to the different Favicon requirements, which can be found here.

You can also use the favicon generator on that site to convert a high-res logo image into any favicon file you could possibly need, and it will also generate any code you need. It really does take a lot of work out of implementing favicons.

Alternatively, if you just need the images you can use this Favicon generator.

Here’s an example of some Favicons, courtesy of Frank West. 

How do I get a Favicon on my site?

Now if you’ve looked through that list of different requirements for favicons, it may seem confusing and intimidating. But getting one on your website is actually easier than you think. Here are some ways of adding a Favicon, based on the way in which you created your website. But before we start, please make sure you have one image that’s 32×32 pixels and is called favicon.ico. You can either create it yourself using Photoshop or a free alternative such as GIMP. This is the image you’ll be adding to the site.

Using the 123 Reg Website Builder

If you’ve used the 123 Reg Website Builder, you can add a Favicon with just a few clicks. If you’re using the newest version of Website Builder, just log in, head to the menu and select “site settings”.

From there click “general” and you’ll see the favicon section. Click add image and you’ll be able to upload your image.

Click save and that’s it.

If you’re using an older version of Website Builder, you can find the appropriate instructions here.

Using WordPress

If you’re using a WordPress site, you can use the method detailed below in the “self-hosted website section”. But you can also make use of one of WordPress’s best functions – plugins. Just head over to the WordPress Plugin Directory, search for “favicons” and find the one that best suits your needs.

If you need to know more about installing and using WordPress plugins, take a look at this guide.

For a self-hosted website

If you’ve got a self-hosted website that hasn’t been created using WordPress or a similar content management system, then you’ll need to upload the Favicon yourself and do a little bit of coding.

First, download an FTP tool like Filezilla. You’ll need that to upload the image to your site.

Once you’re up and running with Filezilla, upload the image to the root directory of your website. When you’ve done that, you need to add a bit of code that tells web browsers where to look for the file. Here it is:

So how will you need to change this code to make it work for your site?

Well, if you’ve used a .gif or a .ico image, then you’ll need to change “image/png” to “image/gif” or “image/ico” as appropriate.

You’ll also need to change “http://example.com/myicon.png” to the correct path for your uploaded image. This should just be the name of your website followed by a slash and then the name of your favicon file followed by a dot and its file extension.

If all this sounds a bit intimidating, you can always just a favicon generator and then send the code and images to a web designer and have them do it for you.

Once you’ve added your first Favicon using this method, you’ll find it easy to install others based on the code created by this favicon generator.

Summing up

So there you have it. Adding a favicon is a great way to boost your brand, and it’s quicker and easier than you might think.

Any questions? Ask them on Twitter or Facebook and we’ll get back to you.