«
»

Creating a favicon for your website

Posted by Matthew on November 16th, 2009

What is a favicon?

A favicon (the name is short for “favourites icon”) is the 16×16 pixel square icon displayed in your web browsers’ address bar, browser tabs and next to your bookmarks, e.g…

URL address bar

favicon-browser

Bookmarks

favicon-favourites

Browser tab

favicon-tab

Why have a favicon?

A favicon isn’t a killer necessity for your website, however what it does do is ensure…
- You maintain consistent branding
- You portray a professional image to visitors (and by association you are trustworthy)
- Your site stand outs in bookmarks & tabs increasing likelihood of being re-visited
- You make life easier for people who are heavy multi-tab users

How to create a favicon

If you have a copy of the open source software ‘Gimp’ you can create and save an image as a ‘.ico’ file to use as a favicon. If like me you have zero design skills or want a quicker way of creating one there are countless free generators such as this free favicon generator from Dynamic Drive or http://favicon-generator.org/

Once you have your image, the easiest way to set up your favicon is to name it “favicon.ico”, upload it to your website’s root directory and let the browser (Firefox, IE, Safari etc) find it and they will then automatically display it. However, if you would prefer to add the necessary code you can use this in between your <head> tags…

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

This entry was posted on Monday, November 16th, 2009 at 12:15 pm and is filed under Promoting your site, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply