How to make blog Favicon

Want to Make Your Own Blogger Icon {Favicon :Icon Appear  on the browser URL bar, on the bookmark lists and, for certain browsers, on the navigation tabs }

Then These Post Help You!! 

Many Blogger users choose to display their own favicon instead of Blogger s, in order to “brand” their blog with memorable icons in keeping with their blog ’s design. It is actually quite easy to add our own favicon to our Blogger blogs, and instantly adds a sense of professionalism to your overall design.

n order to add a custom favicon to be displayed in the browser of sites accessing a Blogger powered blog, we need to:

1. Create our own favicon
2. Upload this to an image host
3. Edit the Blogger template to reference this alternative favicon

Let’s go through these steps in order.

How to create your own favicon for Blogger

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.

If you are a budding ‘Photo-shopper’, you can create your own favicon from scratch. Don’t forget to use a canvas measuring 16 pixels square (or create a square image which can be reduced to this size) and save as a .GIF or .PNG image.

1. Visit the Favicon from Pics website. Alternatively, you can make a favicon from text .

Those who already use a recognised icon for their site/blog logo can easily generate a favicon using one of these free services:

• FaviconGenerator.com (right click image and choose “Save image as”)
• HTML-Kit favicon generator (download as favicon package) – Enables you to create a static or animated favicon; you can even create a favicon quickly using your Twitter username!

Alternatively you can download a “ready made” favicon from these sites:

• Favicons R Us
• FreeFavicon.com

• Iconlet.com (use the 16 px square version of your favourite icon)

Uploading the favicon.ico file

Once you are done with the favicon.ico file you should upload it to your site. Just make sure you place it in the root directory, which is the directory where the index file is located.

Or

While Blogger does not offer hosting for files we use in our blogs (eg: JavaScript, documents and HTML files), we can upload images for use in our blog posts which are hosted by Picasa.

After uploading an image to our blog post (even if this post is not published) we can extract the URL of the image and reference this in our Blogger template code. Surprisingly, we can upload .ico files to our blog posts with Blogger (as well as any .PNG or .GIF favicons you may have created too).

To upload your favicon to Picasa through your blog, simply create a new blog post and choose to insert an image in your post. Choose the favicon you have created/generated/downloaded and upload this to your post.

Then either preview your post or view in the rich text editor so your favicon image can be seen on the screen. Right click this favicon and choose to copy the location of the image. Save this to your clipboard or paste into a text file for easy reference.

If you prefer to use a different host for your favicon, here are a few free hosts which support .ico files:

• MerryPic
• HostAnyImage
• ImageBoo

As before, copy the location of your icon file to your clipboard or paste in a text file for easy reference.

 Changing your header

The final step is to change your header, which is the code that goes between the and tags. All you need to do is to add the following line:

<br /> <link href="<span style="background-color: rgb(255, 255, 0);">URL OF ICON FILE</span>" rel="shortcut icon" type="image/vnd.microsoft.icom"></link><br /> <link href="%3Cspan%20style=%22color:%20rgb%28204,%200,%200%29;%20background-color:%20rgb%28255,%20255,%200%29;%22%3ELink%20Of%20Your%20Icon%20File%3C/span%3E" rel="shortcut icon" type="image/vnd.microsoft.icom"></link><br />




before these

Notice that this code will only work if the favicon.ico is located in the root directory.

Or

To do this, go to Layout>Edit HTML in your Blogger template. You do not need to check the “Expand widget templates” box.

Search for the closing tag in your template using your browser’s search function.

Immediately before this line, paste the following section of code, substituting YOUR-FAVICON-URL for the URL where your favicon is hosted:

Then save your template. Now when you view your blog in your browser, you should see your favicon appear beside the web address and in the bookmarks folder (if you have bookmarked your site).

Note: it is very important that you paste the favicon tags just before the closing tag, not earlier in the template code. This is because Blogger generates favicon tags when your blog pages are generated which would otherwise override your custom favicon references.

Note

If you use Internet Explorer 6 or older, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.

Also, any services which automatically extract the favicon for a site (such as Blogger’s “Feed” and “Blog List” gadgets) will still reference the Blogger favicon rather than our own custom favicons. This is because such auto-discovery scripts reference the favicon hosted on the same server as the website, rather than the favicon which is referenced in the HTML code of the page. As yet, there is no way to present our custom favicons to services which automatically discover the favicon for a site.