Tag Archives: browser bar

Add a Favicon to your web page!

I am currently redesigning the Sunforged.com website. As a fun feature I decided to create my own favicon.

A favicon is the image that appears next to the URL bar in your Browser – some very recognizable ones would be the Google “G” the Gmail – envelope and the Craigslist Peace symbol.

In addition to appearing in the URL bar it can be associated with favorites and bookmarks to quickly find the URL from a big list from its recognizable icon.

The process is actually very easy. One selects an image editing program creates a canvas that is 16 X 16 pixels and gets to designing, this is very small, so a limited palette is suggested.

Once a suitable design is completed save the design as “favicon.ico” and upload to your index files via your ftp client, Now, the browser will display your image when someone is viewing your page. Pretty cool!

The icon can also be associated with any bookmarks or favorites that your viewers make by using a little bit of code and placing between the head tags of your page..

This is the code:

<link rel=”shortcut icon” href=”favicon.ico” >

Of course if you are not capable of creating your own favicon from scratch here is an auto generator its very cool and easy to use. I experimented with 20 or so images before deciding to just create my image from scratch.

Favicon Generator and Validator

View the favicon in action notice its in the URL bar and in the tab. The Sunforged Site