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

Advertisements

One response to “Add a Favicon to your web page!

  1. i find a website for animated favicons, its here http://www.favinator.de its cool 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s