Favicon from pictures: How to create a favicon for your Blog

Love to see your own favorite icon been displayed on the browser address bar and browser tabs when visitors view your web pages?…..read on…


Many followers of my blog ( Secret infos-Ogbongeblog ) have been asking me how i manage to use a picture of mine instead of the blogger icon which is the default for blogger blogs. If you use Mozilla Firefox as your browser, you can just take a look of the favicon next to the web address of my blog in the URL bar of the browser. You might not see it if you browse with Internet Explorer 6 but seems Internet Explorer 7 and above supports it.

Having a favicon for your blog have loads of advantages and you can bet that it also adds to the beauty of blogs and websites. Follow the following steps to set up a lovely favicon for your blog…

1. Right click on http://tools.dynamicdrive.com/favicon/ and open it in another tab or another window

2. At the web page, you can generate a favicon from any picture on your pc. Just upload the picture and CLICK on CREATE ICON.

3. Download the generated icon to your PC and RENAME IT. DON’T NAME IT just FAVICON ( researches as indicated that naming it favicon will not make the favicon to be displayed on Blogger blogs but will be fine on other web sites).

4. Upload the picture to a free host and get the url of the uploaded file. ( You can set up an account with photobucket.com and if you already have an account with googlepages, you can also upload it there too)

5. Example of such url of the uploaded file will be like this http://jideogunsanya.googlepages.com/NAMEOFUPLOADEDFILE.ico

6. Copy the URL of your own icon from the free host website you uploaded it to and insert it into the codes below <link href=’http://SITENAME.googlepages.com/FILENAME.ico’ rel=’shortcut icon’/> <link href=’http://SITENAME.googlepages.com/FILENAME.ico’ rel=’icon’/>

7. Log in to the dashboard of your Blogger blog, Go to LAYOUTS and click on EDIT HTML. Remember to BACK UP YOUR BLOG TEMPLATE .

8. In the Html , try to look in the HEAD section for a place where you will see this line of code <b:skin><![CDATA[/* and paste the code you set up in Step 6 above JUST ABOVE IT

9. SAVE your changes and VIEW YOUR BLOG That’s it! Note that your favicon may not appear immediately after you’ve completed the above steps. In fact, it may take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug. ……ENJOY.

You can validate Favicon to see if it is working or not.