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

Posted by on

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.



Comments

  1. jidetheblogger1/15/2009

    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

    ReplyDelete
  2. williemeikle1/15/2009

    Great tip... and it worked first time :)

    ReplyDelete
  3. jidetheblogger4/22/2010

    Am glad it worked for you..cheers!

    ReplyDelete
  4. Unknown11/07/2011

    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?

    ReplyDelete
  5. jidetheblogger11/15/2011

    Just read: http://www.ogbongeblog.com/2011/07/new-and-simplest-way-of-creating.html

    ReplyDelete
  6. ebere12/12/2013

    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

    ReplyDelete

Post a Comment

We Love To Hear From You But Don't Spam Us With Links!

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post or you're trying to ask question about an old post, please drop it at our discussion platform here.

THANKS.