Ever wanted to have your own Favourite icon for your site?
The icon you see on the left side of the address bar is called the Bookmark icon or Favourite Icon.
Want to increase your site's 'IMPRESSION?'
Think of Blogger and you recall the orange B icon, think Twitter with their blue t icon and Google with its colorful google icon and so on. So that tiny icon called Favicon.ico does make passerby recognise your site. Plus, it looks professional.
Here's how! First thing first, we have to create, upload and finally, configure.
1. Create a 16x16 pixels image icon
What image editor should i use to create my favicon?
-using photoshop, paint or any image editor you like!
- Iconedit32 is a great tool, simple to use, download here
- It doesn't have to be 16x16 pixels when drawing but do keep in mind how tiny an ico is.
- Or make one online using this online favicon generator at www.favicon.cc - you draw and instantly see it appears on your addressbar. it also converts your image into an ico file for you to download right there and then.
How do i convert my image into a .ico file?
- converticon.com using this [amazingly mac desktop looking] site. Upload your image & save as a 16x16 ico !
2. Upload your icon
How do i host my .ico favicon if i'm using Blogger, Wordpress, Livejournal or any other non-file hosting site?
Help! My photobucket, imageshack, tinypic, flickr doesn't allow me to upload .ico file!
- ripway.com - they offer free file & website hosting. easy sign up, no questions asks besides your name, email address. did i mention 'FREE'?
- hostanyimage.com - they offer FREE image hosting for all types of image files, including .ico files.
3. Edit your website's HTML
How do i edit my page to show my new favicon? (non-blogger site)
- Add this code to your page, right under the <HEAD> code, like below:
<head>
<link href='http://www.myhost.com/favicon.ico' rel='shortcut icon'/>
<link href='http://www.myhost.com/favicon.ico' rel='icon'/>
Change the address in green to your own file location and presto, its done!
How do i add it in Blogger templates / How do i add it to Blogspot?
- If you're using blogger, make sure you're not using classic template. If you are click 'upgrade template')
- then go to Layout > Edit HTML >
Look for this
]]></b:skin>
</head>
- Add the below code between them, like below:
]]></b:skin>
<link href='http://www.myhost.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://www.myhost.com/favicon.ico' rel='icon'/>
</head>
Change the address in green to your own file location and presto, its done!
FAQ:
Why isn't it showing?
I've refreshed my site, its not showing.
How long does it take to show?
I've tried everything mentioned here it doesn't work, you suck?
- It could take a few hours for the icon to show, but not more than a day.
- Make sure you've cleared/emptied/deleted your internet history before viewing.
- If you've a previous bookmark made for your site, delete it. the saved icon could override and that's why its not showing.
- if its still not showing, you might want to check your code.
- still not showing? drop us a message at http://twitter.com/jazzieeaa with your site address, quoting its for favicon and we'll see what we can do!
FYI, isn't my piggy icon cute? totally irrelevant..what a silly thing of the moment.
]]>
