A Favicon is the small icon image that appears just to the left of the name of the page that is being displayed.
These images are called a favicon (short for favorites icon) and they're used when you bookmark a page. To have your own image show up in someone's favourites list when they bookmark YOUR page, you need to upload your own favicon.ico.
Create Your own Favicon?
You can create very own unique favicon for your blog and website and attract visitors' focus or choose from the many free ones available. Let your blog unique with other bloggers. To do so, you can do this by using a personal photo of a, girlfriend, boyfriend, kids, dog, cat, car, flower etc. to create it. You upload the photo to ICONJ, and they will convert it to the format it needs and generate the HTML code for you, that's all.
How to Install your Favicon?
You (usually!!) don't need to add any code to your pages for this to work; browsers above IE5 will automatically look for an icon called favicon.ico when it adds a site to favorites. However, I've found some browsers won't automatically check, so have found it best to place some code into each page stating where the favicon is, so they WILL use it. You can use different icons for each page, but you need to state in your pages that it's a different image to the 'normal' favicon.ico.
The steps to putting a favicon.ico on your website are:
- Create a 16px X 16px, 16 color image with either a .bmp or .gif extension.
Your graphics editor should have a setting for 16 colors. It needs to be 16px X 16px, anything other than this will be ignored by browsers most times.
Another option is to download a free icon editor and make your own through that.
- Convert your image to the .ico format if it's .bmp or .ico.
You can't just rename the image extension - it HAS to be converted with a special program or it won't work. Use an icon converter, then save the converted file as favicon.ico. If you are creating several icons to use, call each one something different - but remember it needs to have the .ico extension.
- Upload your favicon.ico into the root directory of your website.
The root directory is where your main index.html page is. Browsers look for the favicon.ico here. If you're providing a link in your pages to the icon, then you can store them wherever you wish - in a folder just for icons, on another server, as long as you provide the path/url to where it is so browsers know where to look for it.
- Insert a link to it in all your pages that you wish to use the favicon.
If you have called your icon favicon.ico and you uploaded it into your root directory, you don't NEED to put any code in your pages. However, sometimes the favicon won't show for some browsers, so to put a link in might be a wise thing to do. You will also need to put a link in if you want to use something other than a file called favicon.ico or if your site is a subdomain or a free hosted site (ie: not your own domain name). This is because you need to tell the browser to look for THAT image for that page in THAT folder.
Put this piece of code somewhere between the <head></head> tags on your pages:
<LINK REL="SHORTCUT ICON" HREF="http://www.yourdomain.com/name_of_icon.ico">
If you have a 'secure' site, you will need to provide the path using https:
<LINK REL="SHORTCUT ICON" HREF="https://www.yourdomain.com/name_of_icon.ico">
That's about it. If you've gone through these steps, you can try bookmarking your page to see if the favicon shows up.
Of course, if you already HAVE the page bookmarked, it won't show - as your browser checks for the favicon at the time of bookmarking. You will find if you remove your site from favorites and add it again, it probably won't work still, as there will be traces of the bookmark left somewhere on your computer so it won't check. The best way to test it in this case is to get a friend to do it.