Browse > Home / / Create your own favicon

Create your own favicon

Wednesday, April 29, 2009 Posted by One-4-All

Favicon for Blogger

Favicon” is short for “favourites icon”, and is a 16×16px square icon which is associated with a website (or blog). Browsers which support favicons will usually display a website’s favicon in the address bar (to the left of the URL), and next to the page’s name in a list of bookmarks. Browsers which support tabbed navigation (such as Firefox and IE8) will also display the favicon next to the page title on each tab. Original favicon for blogger is orange and white logo look like B letter.Here the shown of original favicon of blogger on browser.
For someone who want to be look like different, favicon can be one way to be it. we can customize it.
To change original blogger favicon, we need to do a couple things.
1. we must create own favicon.
2. Upload that favicon that was we made.
3. Edit the code in template source.

How to create our own favicon?

A favicon is a small image, measuring 16×16 pixels. Favicons are usually made with the .ico extension, though it’s also possible to use .GIF and .PNG files to reference a favicon.
Those who already use a recognised icon for their site/blog logo can easily generate a favicon using one of these free services:
* Favicon Generator (Blogger Buster)
* HTML-Kit favicon generator

How to upload?

A favicon which we made must be upload to web. It's can be to, ore another hosting. For someone that not use a third party (web hosting), it can be upload to blogger using a picassa. Just make a new post. And then insert an image to your post. Upload your favicon image that have been created. Click the Preview tab. Right click on the favicon picture, and then copy the image location. Save this to your clipboard or paste into a text file for easy reference.

How to edit template code?

This is the finally step. Go to layout, and then click EDIT HTML.
look for this code </head>
and then paste this code immediately before </head>, don't forget to change 'YOUR-FAVICON-URL' with the image location which have been saved in second step.

<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>

Now save your template, and your favicon was change.


Seti@wan Dirgant@Ra on April 30, 2009 at 3:35 PM said...

Nice post,.... muantav.

NieSah on May 5, 2009 at 8:20 PM said...

i cant do it...
the photobucket wont accept those with .ico

putri-kecil on May 5, 2009 at 9:12 PM said...

@NieSah>> if photobucket doesn't accept .ico file, just save as jpg, PNG, or GIF. It can be too. I have try it.

Post a Comment