Tip & How-To about Google Chrome

How to add a Favicon.ico to your Blogger powered Website

If you have created a website that is powered by googles blogger interface and you have moved it from the blogspot domain to a custom domain you might want to remove the blogger favicon from the search tab.

Here are several tutorials showing the easiest way to do it.

First you might want to backup your existing template either do this using the export or copy and paste it to notepad, this also gives you a great way of searching the template for the correct place to add the new HTML.

Upload favicon to an external web host, such as your Picasa album (which is automatically created for you when you upload pictures to your Blogspot). you will only be able to upload the animated GIF file not the ICO file.

If you've uploaded your favicon to Picasa, then click on the uploaded image. Click on "Link to this photo" (currently on the right side of the screen). Under "Embed Image", check "Image Only (no link"). Copy the embedded image URL. This is the location (URL) of your favicon.

Visit your Blogger dashboard or Blogspot account. Click on "Layout", then "Edit HTML". You should now be presented with a screen allowing you to edit the HTML of your blog template.

Within the HTML, near the top, you should see:

[title][data:blog.pageTitle/][/title]

Immediately beneath that line of code, paste the following line



  • OR you can just use this line of code if the template wont save due to an XML error.





  • Replace this asterisk (URL) with the link for your favicon image on Picasa, you must make sure that the image sharing is set to public

    Save your Blogger template, then click on "View Blog". If the favicon does not appear in your address bar, then try refreshing your browser. If you still do not see it, clear your browser's cache file and restart the browser. Renavigate to your blog.

    Favicon Creator: Free from HTML Kit



    Secondly you CAN host the favicon to a hosting website that will allow favicons, NOTE: neither of the main sites PenguinPic, Photobucket nor Imageshack do this one of the easiest ways to host it and get the HTML code is to use

    http://www.iconj.com

    They have an simple to use upload service that will generate the HTML code that you need to add to your blogger template

    Finally you need to copy and paste the code that the website generated to the blogger template. The best place to add the code is directly after the code shown belows if you are using firefox you can use the CRTL + F to search it when found it will be highlighted green



    or use the notepad copy and paste the entire code and search as normal

    ]]>


    then paste the code surrounded by the comments that will allow you to find it more easily





    EXAMPLE



    When you save the template you will see that the favicon has changed from the default blogger for the one you created.

    If you are using the old Blogger template instead of the New Blogger xml template,and paste the favicon codes immediately after this line of code:

    <$BlogMetaData$>




    If you are using your own Webserver

    Is another cool site that will allow you to resize and create your favicon.jpg is http://www.genfavicon.com there you can then upload the resulting JPG to another hosting site if you choose to or your own web server root folder then insert this HTML to the head of your webpage







  • Posted by on

  • Google Chrome Logo

    Related Topics:

    Related Questions:

    1 Answer

    How to appear in Google search my blog or website page title without Blog or website Title


    googles webcrawlers will have to find and log your site. i dont think you can just add your own

    May 17, 2017 | blogger.com Computers & Internet

    0 Answers

    If you have created a website that is powered by googles blogger interface and you have moved it from the blogspot domain to a custom domain you might want to remove the blogger favicon from the search tab. Here are several tutorials showing the easiest way to do it. First you might want to backup your existing template either do this using the export or copy and paste it to notepad, this also gives you a great way of searching the template for the correct place to add the new HTML. HOST FAVICON ONLINE: Upload favicon to an external web host, such as your Picasa album (which is automatically created for you when you upload pictures to your Blogspot). If you've uploaded your favicon to Picasa, then click on the uploaded image. Click on "Link to this photo" (currently on the right side of the screen). Under "Embed Image", check "Image Only (no link"). Copy the embedded image URL. This is the location (URL) of your favicon. ADD FAVICON TO BLOGGER: Visit your Blogger dashboard or Blogspot account. Click on "Layout", then "Edit HTML". You should now be presented with a screen allowing you to edit the HTML of your blog template. Within the HTML, near the top, you should see: [title][data:blog.pageTitle/][/title] Immediately beneath that line of code, paste the following: <*> Replace the asterisk (*) with the following: link href='*' rel='shortcut icon' type='image/x-icon'/ Replace this asterisk (*) with the URL for your favicon image. SAVE YOUR TEMPLATE & TEST: Save your Blogger template, then click on "View Blog". If the favicon does not appear in your address bar, then try refreshing your browser. If you still do not see it, clear your browser's cache file and restart the browser. Renavigate to your blog. Favicon Creator: Free from HTML Kit Secondly you CAN host the favicon to a hosting website that will allow favicons, NOTE: neither of the main sites PenguinPic, Photobucket nor Imageshack do this one of the easiest ways to host it and get the HTML code is to use http://www.iconj.com They have an simple to use upload service that will generate the HTML code that you need to add to your blogger template Finally you need to copy and paste the code that the website generated to the blogger template. The best place to add the code is directly after the code shown belows if you are using firefox you can use the CRTL + F to search it when found it will be highlighted green or use the notepad copy and paste the entire code and search as normal ]]> then paste the code surrounded by the comments that will allow you to find it more easily EXAMPLE When you save the template you will see that the favicon has changed from the default blogger for the one you created. If you are using the old Blogger template instead of the New Blogger xml template,and paste the favicon codes immediately after this line of code: <$BlogMetaData$> If you are using your own Webserver Is another cool site that will allow you to resize and create your favicon.jpg is http://www.genfavicon.com there you can then upload the resulting JPG to another hosting site if you choose to or your own web server root folder then insert this HTML to the head of your webpage

    Aug 02, 2010 | Cycling

    1 Answer

    How to add google apps to your website / domain powered by GoDaddy.com


    I am interested to add Google application to my website. Surely I will follow your way. Thanks for sharing. register website domain

    Jul 15, 2010 | Google Chrome

    5 Answers

    how to create a website?


    You can create a website through blogger;

    www.blogspot.com

    hope this helps.

    Dec 18, 2010 | Computers & Internet

    Not finding what you are looking for?

    2,443 people viewed this tip

    Ask a Question

    Usually answered in minutes!

    Top Google Computers & Internet Experts

    kakima

    Level 3 Expert

    102366 Answers

    Robet
    Robet

    Level 2 Expert

    29 Answers

    Sunil Pratap Singh
    Sunil Pratap Singh

    Level 2 Expert

    243 Answers

    Are you a Google Computer and Internet Expert? Answer questions, earn points and help others

    Answer questions

    Loading...