in

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 :

Receive Alerts In Your Email Inbox

Enter Your Email Address Below To Receive Latest Updates via Inbox, Free of Charge!

What do you think?

93 Points
Upvote Downvote

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 or join my Telegram Group here.

Comments are closed.

6 Comments

  1. 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?

Write For Ogbongeblog

How To Confirm Or Validate That Your Favicon Is Working