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.

Please Share :


Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here.


Leave a Reply
  1. If you already have the code in your blog template and it is not working, you can try and change the name of the favicon from favicon.ico to to another name with the same extension eg myblogicon.ico

  2. Nice tutorials man, but am having a big problem uploading the generated favicon. that is whenever i open the folder where i paste the favicon, to upload it to photobucket i won't see anything there. just empty but when i open the folder normally, i would see my favicon. any help for that?

  3. Jide, afternoon pls I wish to know,where exactly in d code should the url be placed and also, the link you placed on your last comment isn't clickable ohhh
    Tnks a lot for your help

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

  • Do You Want To Work At Dubai ?Click Here
  • You Can Make Money Promoting Other People's ProductsRead More
  • Interested in starting data plans reselling business?Click Here
  • Want To Join A Forum Where You Can Discuss Blogging?Click Here
  • NetDivo ePin Manager Lets You Print Airtime Of All NetworksLearn More

Write For Ogbongeblog

How To Confirm Or Validate That Your Favicon Is Working