Make FavIcon and add to Google Blog - First Step

by ~ANT

My question was simple, I want to stick a graphic next to the website address, in the address bar, and on each tab just like other websites... how do you do this? What questions do I need to be asking to get the right code? What's this thing called?



I didn't know where to start. I sent an email to my brother who does a lot of website work figuring he would know where to start. He did and now I'm going to walk you through the process.

Question: First off... what is the graphic called that sits next URL in the address bar of every browser and on each tab?
Answer: It's called a FavIcon

Question: How do you make them?
Answer: Start here: http://www.htmlkit.com/services/favicon/

This site helps you take any logo, graphic, or picture and turn them into your FavIcon including the code needed for you website. Use the graphic below as your guide to getting started:




Once your image is uploaded you will be taken to a new page where you have options to test in your browser, download the files, and the code needed to get your FavIcon up and running quickly.

Suggestions: If your image is too complicated you might get what you want. Pick a logo/icon that is simple. The Favicon website gives you the option if you want the icon to be 16 pixels square or double the size 32 pixels square. It's small so be careful.

I tried the logo below without the website text (see graphic below) and the graphic was too complicated. It came out mushy:

So I chose something much more simple... see the new Favicon by going to AndThenSomeWorks.com.

According to the "README" directions you are supposed add the code of your FavIcon to your web page by uploading favicon.ico to your website and inserting the following HTML tag inside the ... section of your web page.

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

Above is the code they give you and it works great as long as you put your icon where you are supposed to - the main root of your website directory... however, I didn't put my FavIcon in this folder above. Instead I changed the above code to suit my needs and added a backslash to stop the code from running beyond where it was supposed to go:

<link rel="shortcut icon" href="images/icons/favicon.ico" />

Don't forget... download the files first from the FavIcon website and insert into your website according to their "README" directions. You can also validate your FavIcon and make sure it works... all through their website... NICE!

Depending on your website editing software you may have slightly edit the code. I found this to be simple as long as you follow the instructions... and have time to play around a little bit to make sure you get this right. Overall, if you want an icon next to your website name in either the address bar or a tab, FavIcon makes it easy.

Let me know what you find out...