Tint-Network

Where business & the Internet meet and have tea

How to add a favicon to your website

Favicon.ico example in Google Chrome Favicons are the tiny images that you often see in web browser tabs and address bars. If you bookmark a web page then the favicon is included with the page title.

The reason sites have them is part of branding, helps people remember the site and keeps consistency. It’s an easy thing to do and takes minutes to get done.

Convert an existing image

The favicon is in a picture format called ICO, the full filename is ‘favicon.ico’. You can use animated GIF’s but not every browser supports it (yes Internet Explorer is the odd one out). Instead of creating a new image and converting it to the correct format, there is a website that helps you by taking an existing image, like a PNG file

htmlkit.com has a converter for images to ICO format. You then download a ZIP file that contains the file you need.

By converting an existing file you don’t have to spend time creating something new and you keep the branding the same.

Using the favicon file

How you use the favicon.ico file depends on the site you have.

Your site starts in the root directory (not in a sub directory)

For non blog sites, upload the file in to your root directory and add the following lines between <head>…</head> tags.

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

This HTML snippet instructs the browser where to get the images from.

Your site starts in a sub directory

For non blogs with an automated redirect, there is not much you can do. Upload the .ICO file to your root directory as many browsers will attempt to locate the file and if found, it will use it.

If you have a page that will take you to your main site then  you can modify it with the HTML snippet.

For Blog sites (sub directory or not)

If your blog start in the root directory (your blog is the primary site) then upload the .ICO file in to the root directory. As above, browsers should detect the file and use it.

However to ensure that it is found, your really need to add the HML snippet (see above) but WordPress makes that difficult for those who prefer not to mess around with code.

You can use a plugin like AmberPanther Favicon for WordPress. You can download it direct from WordPress or from the plugins section on your blog. It will add the required HTML code to the WordPress header.

If your blog is in a sub directory (e.g. site.com/blog) then the only thing you can do is add the plugin and upload the .ICO file to the site root and the blog root.

I use a redirect to take people to the blog (tint-network.co.uk/blog) from the root directory (tint-network.co.uk). The only way I could get the .ICO file to be used by the browser was to upload it to the root directory. Currently Chrome, Firefox and Opera all detect and show the favicon.

 

 

About the author, Bob Toovey - I have been active on the Internet since 1998, a blogger/writer since 2006 and started dabbling with programming when I got my first Sinclair ZX81. I love to blog about social media, marketing and food. You can find me on Google+, LinkedIn and Twitter

2 Responses to 'How to add a favicon to your website'

  1. Darren says:

    Just change it from a relative path href=”favicon.ico”
    to an absolute path href=”http://yourwebsite.com/favicon.ico”
    Then it doesn’t matter if you’re in a sub directory, the browser has an absolute path to the file from every page :)

  2. Bob Toovey says:

    Thanks for the extra info Darren. Much appreciated!