How to add a Favicon to Blogger blogs, tutorial

What is a favicon? Look up at the address bar, do you see the little eye beside the url? Now look at the tab, do you see a little eye there? That is my favicon. It is a way of promoting the blog 'brand'. It also shows up on bookmarks lists!

If you want to know how to get your own favicon on your blogger blog read on. I have tested this on this blog which has a custom domain and a custom template. I have also tested in on a blog which has a blogspot domain with custom template and another blogspot domain with standard blogger template. It worked on all of them. Favicons will show in IE and Firefox on both the address bars and the tabs, but will only show on the tabs in Google Chrome. If you are on a Wordpress blog you do not need this tutorial, just search 'plugins' for a plugin that will do the work for you!

1. Select the image you wish to use and save it to your desktop. Go to this site to generate your .ico file, the file format required to use a favicon. Upload your photo and hit the 'generate favicon.ico' button. You can then preview your favicon in the tab and address bars. Whe you are happy with your image download the zip file to your desktop and extract it. You will get two images, a static one and a moving one. I have only used the static one.

double click to enlarge in new window

2. Now go to google sites and log in at the top right with your google logins. This is where you will host your image. I have used google sites because you already have google logins if you use Blogger. On the left, under the heading Google Sites, you will see 'creat new site' please do so but don't call it favicon, call it anything else! I have called mine 'tutorialsitejen'.

When you have that done you will reach this page:

double click to enlarge in new window

3. See that I have circled create page. Click this and name your page, selecting the 'put page under home' options, see below:

double click on image to enlarge in new window

4. You page should now look like the one below. See the 'attachments' that I have circled, select this and upload your favicon.ico file.

double click to enlarge in new window

5. Your page should now look like the one below. Do not click on the image attachment on your google site, just take the url from the address bar (as circled below) and copy and paste it to a wordpad/notepad document for now. E.g. my url here is https://sites.google.com/site/tutorialsitejen/home/testing . I am going to add /favicon.ico at the end, like so

https://sites.google.com/site/tutorialsitejen/home/testing/favicon.ico  

to complete the url I will need a little bit later on. Save the new url to your document.

double click to enlarge in new window

6. While you still have your wordpad/notepad document open copy and paste this line of html from the photo below into it please. Follow the instuctions in this photo below to complete the line of code you need.

double click to enlarge in new window

7. Copy and paste that entire last line of html, the one that includes your image url, into your wordpad/notepad document and save it. This is the code you will be inserting into your template.


8. Go to your dashboard, select the design tab and click on 'edit html'.

double click to enlarge in new window

9. You should now see a screen like below. DOWNLOAD AND SAVE YOUR TEMPLATE before making ANY changes. I have circled the option in the next picture so no excuses. Then find the line of html I have circled, it will be in the first section so you should not have to search for too long. I have circled it in the picture below. You shouldn;t have to scroll down to find this, it should be visible when you open up the template. If you are having difficulty use ctrl and F to open up a search option at the bottom of your browser window.

Press enter or return to create a new line then copy and paste the line of code we created earlier just under the title data blog title title >.

double click to enlarge in new window

The html code AFTER the title data bog title title will differ on each template so don't worry about what comes after it, just put the code in and save your template. Then go and admire your new favicon!

A big thank you to Nickie at Typecast who tested the instructions and now has a lovely favicon.


If you have any questions or problems leave a comment and I will address it. If you have any requests for future tutorials please leave a comment and I will do it.