Tutorial Time! How to Upload a Favicon

What is a favicon you ask? It is the small icon located at the very left of your URL. If you look at mine - you should see a black and pink icon. We are always trying to improve our web traffic, and I know this little icon can make a pretty big improvement. Considering how much work is involved in making one, it would be silly not to make one.

Benefits being:
1) Having that little extra branding might get you more links, thus putting you higher on the search engines.
2) You would be surprised how many more people will bookmark your site if you have a favicon. as a wise man once told me "if you make a favicon, they will bookmark you"
3) If you use browsers like firefox, safari or internet explorer, then you will have tabbed browsing. This icon helps distinguish your site over others in the tabs.

First - you have to make the icon. The actual icon is 16 x 16px You can use either illustrator (recommended) or photoshop and make a document that is 64 x 64px. This is the canvas you want to work in - so if you have a logo - open it (or in illustrator place it) here or just make a small design that reflects the colors of your site. You will shrink it to 16 x 16px later.

Now if you like the image you made at 64 x 64px then see if it holds up at 16 x 16px. And by that I mean does it look good? can you make a distinguishable shape out of it? To resize it go to Image > Image size and resize it to 16 x 16px. (Or if your in illustrator scale it down to 16 x 16px) If it looks good being zoomed out at 100%, then its ready for the web. Go to file>save for web and devices and save it as a PNG-8.

(I only made this graphic for demonstrating purposes. It's not the one on there now)

Now - for this particular tutorial I'm just going to put it in my blogger. wordpress is a little more complex. But If you want to know feel free to ask me or send a message. so we take out our .png file and upload it to something like picasa or photobucket. now it is uploaded to the web.

The last step is to direct that image on the web to show up as our favicon. Login to your blogger and go to the design tab and click edit html. Paste the following line of code immediately before the </head> tag (use the find function to find it: ctrl+f usually)

<link href='FAVICON-URL' rel='shortcut icon'/>

<link href='FAVICON-URL' rel='shortcut icon'/>

post the actual url of the hosted image were the red text is. now refresh your browser a few 
times to clear the cache out. Viola! you should see the image next to your URL! I hope you 
enjoyed - message me for any questions!