Latest: NCERT Make it easy! | Series: WANNA FIND ME? | EDUCATION ONLINE!

How to Add/Change Blogger Blog Favicon?

08:45 | Posted by Pradeep Singh | 36 comments

What is favicon?

While using IE, Firefox or Opera you will see an icon on the tab when you visit a page.This is called favicon. Favicon is a small icon/picture (usually 16px x 16px in size) shown next to site URL in the address bar. In Blogger, by default orange colored blogger icon is shown as favicon which looks ugly and it is common also as lakhs of blogger blogs contain this. Also having your own favicon with a nice graphical reminder of your site beside is a good way to attract visitors attention.
As you all know, Blogger has a new feature which allows you to change your blog's favicon without HTML coding (you still can use the codes if you want though).

Add/Change Blogger Blog Favicon?

  • Log in to your Blogger's Dashboard
  • Go to the Layout
  • Click on the favicon Edit link usually present at the top left corner.


  • Now hit "Choose File" button.
  • Browse for your own image(should be less than 100 KB) and select it.
  • Blogger will automatically re-size it,and finally hit the "Save" button.
Now refresh your blog you will see your new favicon,If you can't then delete browsers cookies and caches then visit your blog.

Another Way To Change Blogger Blog Favicon

Here is another simple way to change your blog's favicon.

Go to Blogger Template>Edit Html
There find the title tag which looks like
<title><data:blog.pageTitle/></title>
and immediately after that add the following code after proper editing
<link rel="shortcut icon" href="URL of your icon file"/>

Remember to replace URL of your icon file file with your icon file's URL
Your new favicon should start appearing in some time.

Well, some blogger, have been facing some trouble with their favicons because Blogger wouldn't show them at all or wouldn't update them to the new one.

 If the favicon on your Blogger blog does not update, make sure you clear all history from web browser and then check for it. 
                                             OR
If you changed your favicon on the Layout section of your blog or used the HTML code and it doesn't work or doesn't show the right favicon, just do the following steps:

Step 1: On the address bar, type http://[your blog url]/favicon.ico and press Enter.
Step 2: Refresh the page.
Step 3: Go back to your blog.

Manual method to add Favicon to Blogger blog

To get started, first you need to backup your Blogger template: Click on ‘Layout’ > ‘Edit HTML’ and then click on ‘download full template’ to save it on your computer. Now perform following steps to a change favicon in your Blogger blog:




1. Click on ‘Layout’ > ‘Edit HTML’
2. Then add following code after <head>
<link href=’http://www.URL.com/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://www.URL.com/favicon.ico’ rel=’icon’/>
Above http://www.URL.com is the web address or location where your favicon is stored (hosted).
‘favicon.ico’ is the name of your favicon file. You can use any name like myfavicon.ico and so on. After adding above code, update the http://www.URL.com and favicon.ico in the code. Then click on save template button. Open your blog and your new favicon should be visible in the address bar.
  1. Go to Blogger Dashboard > Template
  2. Click Edit HTML
  3. Hit Proceed button
  4. Now find for below code in your template
<title><data:blog.pageTitle/></title>

add below code immediately after of above code

 <link rel="shortcut icon" href="URL OF YOUR ICON FILE"/>

Replace URL OF YOUR ICON FILE with your own icon.
Now save your template and you are done..
Shares

Posts that might interest you !

post-edit

36 comments:

  1. Unknown15 July 2013 at 22:37

    Hey would you mind stating which blog platform you're working with? I'm going to start my own blog soon but I'm having a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something completely unique. P.S Sorry for being off-topic but I had to ask! Feel free to surf to my web-site ... how to make money for kids on 2 day free trial for Commodity Trading Tips - Premium Calls
    blogger templates

    ReplyDelete
  2. Rahul Solanki17 July 2013 at 02:18

    This comment has been removed by a blog administrator.

    ReplyDelete
  3. Anonymous24 September 2013 at 21:28

    I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.
    website design

    ReplyDelete
  4. Unknown28 October 2013 at 17:59

    My blog is hosted at godaddy for a fee, so it is only fair I have a fav icon of my own. Will give this a try when I get back to my laptop.

    ReplyDelete
  5. Unknown5 November 2013 at 22:16

    This comment has been removed by a blog administrator.

    ReplyDelete
  6. Ari Budijanto13 December 2013 at 05:14

    This comment has been removed by a blog administrator.

    ReplyDelete
  7. SMT26 December 2013 at 10:20

    You have clearly mention in your both methods of favicon use. keep it up.

    Regards
    Divya @smtutorial

    ReplyDelete
  8. Anonymous30 March 2014 at 10:10

    for me the blog havent changed the icon

    ReplyDelete
  9. Ranjan Singh7 June 2014 at 10:24

    Thankx Dude...

    ReplyDelete
  10. Unknown28 July 2014 at 08:13

    This comment has been removed by a blog administrator.

    ReplyDelete
  11. Nidhi Singh27 November 2014 at 01:46

    Post this code to CSS, it will help you to invite friends directly with the code, as we do on our company'sEpic research blog.

    ReplyDelete
  12. Anonymous17 December 2014 at 08:03

    This comment has been removed by a blog administrator.

    ReplyDelete
  13. Satish Prajapati22 December 2014 at 22:09

    This comment has been removed by the author.

    ReplyDelete
  14. Kunal Shah28 December 2014 at 10:07

    Hello Admin

    its nice information great job

    Thanks 4 sharing.

    Regards

    TechyPapa

    ReplyDelete
  15. Nidhi Singh29 December 2014 at 05:02

    Favicon is an icon that represent company or brand, we can change it in HTML coding or from other tools also as shown by you in the post, Epic research do have their favicon in their blogs.

    ReplyDelete
  16. Anonymous29 March 2015 at 06:36

    nice information How To Change Favicon On Blogger Blog

    ReplyDelete
  17. Unknown27 May 2015 at 08:53

    Really nice information, thanks for sharing that to me.
    Latest Website Trends

    ReplyDelete
  18. Hasnat Asgher23 June 2015 at 19:53

    really nice information, thanks for sharing and don't forgot to visit my blog .
    Online Solutions
    thanks

    ReplyDelete
  19. Unknown28 July 2015 at 05:02

    This is very useful information, I am happy to read this post. Thanks for sharing this kind of stuff.hni tips provider

    ReplyDelete
  20. My Blogger Tools28 August 2015 at 16:46

    This comment has been removed by a blog administrator.

    ReplyDelete
  21. Packers And Movers Pune Charges19 September 2015 at 03:33

    This comment has been removed by a blog administrator.

    ReplyDelete
  22. Packers Movers Ahmedabad5 October 2015 at 02:14

    This comment has been removed by a blog administrator.

    ReplyDelete
  23. Unknown9 October 2015 at 23:51

    Hii You are post a new information for me, i will follow your informative post. i am work on
    Shared Web Hosting, so i follow your post.
    Thanks ..
    http://www.multicrafthosting.com

    ReplyDelete
  24. Local Packers and Movers bangalore14 October 2015 at 01:15

    I appreciate this post and its seems looking so informative Thanks for sharing with us..
    http://packersmoversbangalore.in/
    Thanks....!!

    ReplyDelete
  25. Kevin Hakney16 October 2015 at 04:53

    You got a really useful blog I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me.

    Paddington Furniture Removals & Darlinghurst Furniture Removals

    ReplyDelete
  26. Packers And Movers Delhi20 October 2015 at 22:35

    This comment has been removed by a blog administrator.

    ReplyDelete
  27. Giwa Innocent24 October 2015 at 16:48

    wow! nice post. i all change mine quickly. Thanks

    http://www.innoglo.blogspot.com.ng/

    ReplyDelete
  28. Anonymous3 November 2015 at 04:03

    This comment has been removed by a blog administrator.

    ReplyDelete
  29. Ramesh Kumar9 November 2015 at 03:54

    This comment has been removed by a blog administrator.

    ReplyDelete
  30. Ramesh Kumar9 November 2015 at 03:55

    This comment has been removed by a blog administrator.

    ReplyDelete
  31. elliavram123411 November 2015 at 22:15

    This comment has been removed by a blog administrator.

    ReplyDelete
  32. Unknown19 November 2015 at 05:21

    Thank you for sharing the valuable information..Am learned some information in your article...Thank you for giving the best information...Keep sharing...Web Design Agency Bangalore | Web Development Agency Bangalore

    ReplyDelete
  33. Vinay Singh13 December 2015 at 23:33

    This comment has been removed by a blog administrator.

    ReplyDelete
  34. justchillswh14 December 2015 at 03:42

    This comment has been removed by a blog administrator.

    ReplyDelete
  35. Abhi K15 December 2015 at 03:53

    This comment has been removed by a blog administrator.

    ReplyDelete
  36. Unknown17 December 2015 at 02:56

    This comment has been removed by a blog administrator.

    ReplyDelete

Comments are moderated by Administrater
1. No Unnecessary Advertisements
2. Comments should be under the niche of posts

Subscribe to: Post Comments (Atom)