How To Add Your Own Favicon To Blogger

If you are like me, you will have a blog on Blogger. You may want to put some effort in to what is an entirely creative process in it's own right. You may want to make your baby undeniably yours.

You may have added widgets and moved page elements about, but how do you make your blog unique? How do you make your blog stand out?

One thing may be to add a personalised Favicon, as I mentioned in my last post. Some people have expressed an interest in adding their own Favicon, so I have put together a tutorial, of sorts.

A Favicon, a contraction of "favourites icon", is an image that appears in the URL bar of your search engine and on the page tab. For example, Blogger has a well designed "B", in white, on an orange background.

A Favicon helps to brand a site or page, and becomes synonymous with that site and it's message. It's a way of having a logo. Just think of McDonalds and their golden arches, or the Nike swoosh.

I don't for one minute think that my simple "V" will be world famous, but I would like to think readers of my blog will become familiar with it and so all things that "Views Of A Star Child" is, can eventually be summed up in that simple image.


So, would you like one for your own blog?

If you do, here are the steps. These steps are for blogger blogs. I also have to add, I am in no way an expert, and have fumbled and fiddled my way around to get this far. Take what I say, and do your own research too.

We will be going into the HTML of your blog template. Save your template as it is, because once you start making changes it is easy to get lost in all that code, and I wouldn't want you to lose your blog. You may have your own way of backing up your template. I simply copy and paste into a simple Notepad application and save it.

Okay, so first thing is first (there are three main steps).

1.

You need an image for your Favicon. You can use an already existing image, but be careful of infringing copyright.

I used Paint.net, it is free and easy to use. You can use Gimp, or any other image editing software. What you must do, though, is resize your image. I resized before I started, to save any trouble later, with distortion etc.

In Paint.net, I opened a new project. I clicked image, and resize. Here, I changed the size to 16 pixels by 16 pixels. 16x16 pixels is the standard size for a Favicon. I then used Paint.net to magnify my "canvas", so I could see clearly what I was doing.

For mine, I used basic colour and text, but if you are more talented, creative or adventurous, just go for it.

Once you are happy with what you have created, save it as a PNG file.

You can stop and take a breath. Have a rest.

Ready?

Okay, the next step is easy as well.

2.

You have to upload your PNG file to a free image host. I used Photobucket, but there are many out there.

Sign into to your image host, upload your PNG file and you will see different link codes associated with your uploaded image. You may have to scroll down to see it, in Photobucket.

You are interested in the direct link, and this is a URL address. How it works is your image host keeps the image for you in cyberspace. When you are later changing code in your blog template, you will tell your template the location of the image you want to use. Sounds complicated, but it is easy.

So, have you uploaded your image?

Do you see your image direct link URL address?

Then you should be ready to look at your blog template code.

In your blogger dashboard, go to "Layout" and then to "Edit HTML"

The portion of code we need to find will probably be in or near the footer code at the bottom of all that HTML you see. This may depend on what template you are using and what modifications you may have already done to it. You will probably be quicker if you scroll all the way to the bottom, and start your search from there upwards.

Look for -
< /head >


Insert -

< href=" your link'' rel =">
< href=" your link" rel="">

(There should only be one apostrophe on either side of Your Link, and only one apostrophe at either side of Icon and Shortcut Icon, but blogger won't allow me to publish the correct code)

immediately before the HEAD code , substituting your direct link URL for your image in the appropriate place.

Now, before you do anything else, click Preview below the box with all that HTML. A new page should open, with your blog. Is your Favicon in the page tab?

If it isn't, you may have placed the code in the wrong place. However, if you are using an old browser, you may not see your image, even if you did everything correctly. I am using Firefox, and it works. So, if your efforts appear not to be getting the results you want, try downloading an up to date browser.

Even if your Favicon is there (WELL DONE!) please still glance over your blog and ensure nothing else has changed, gone missing, or in any way different.

If it all looks good, and you are happy with your Favicon, click Save, for your HTML code.

That is you finished.

I hope this has been clear. Clearer than mud, anyway. If you have questions, I will try and answer them.

Let me know if you try this and how it turns out. Thank you.