Monday, July 27, 2009

How to Add a custom favicon to your Blogger blog

While browsing the net I came across a very informative blog post. I thought it would be a handy resource for the bloggers. The following is the excerpt from the blog post written by Amanda fazani from Blogger Buster:

When you publish a blog with Blogger, the default favicon which appears in your browser navigation bar is Blogger’s favicon (the unmistakable orange and white logo).

Many Blogger users choose to display their own favicon instead of Bloggers, 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 professionality to your overall design.

In this post, I’ll explain how easy it is to add a favicon to your Blogger blog, along with resources for designing your own favicon and where you can host this for free.

What is a favicon?

The word “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.

Favicons are usually found on the root of a domain, and use the .ico extension. For example, the favicon for Blogging Tips can be found here:

Blogger users do not have access to the root of their blog hosting. This means that unless an alternate favicon is specified, Blogger’s favicon will display in browsers accessing Blogger powered sites.

In 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 ‘Photoshopper’, 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.

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

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

Upload your favicon to the web

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:

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

Add the reference for your favicon to your Blogger template

The final step to creating a custom favicon for Blogger is referencing the favicon in your Blogger template code.

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:


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

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.

Important information when using custom favicons for Blogger blogs

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.

Source: (Written by Amanda Fazani from Blogger Buster )

Saturday, July 18, 2009

Add Stylish Signature to your blog or E-mail

Using signatures is a simple and effective way to make e-mail messages, blogs and websites more stylish, underline their individuality and get the author's energy across. So, what can you say about animated signatures that give the real impression that the author is signing right in front the reader's eyes?

MyLiveSignature offers you everything necessary to create both static and animated signatures and add them to your email messages, to blogs, to your posts on forums and on websites.

There are three ways to get your signature on the site.

1. Imitate your signature yourself using step-by-step signature creation wizard.

2. Imitate your signature yourself using the on screen signature draw widget.

3. Write your signature with a pencil, pen or a felt-tip pen on a sheet of paper, scan the sheet and let the designers create the signature by sending the scanned image via a special form.

Tuesday, July 14, 2009

Outbrain – Rating & Recommendation Widget

The outbrain widget is a simple yet powerful ratings & recommendations tool that blends seamlessly into any blog design, inheriting your own look and feel. The widget includes an interactive 5-star rater, and personalized recommended links from your blog as well as others.

User ratings are one of the best ways to get instant feedback from your readers. A simple click of the mouse and Voila! - their opinion is counted. The widget also displays the average rating and number of users who rated the post.

The widget works with a personalization algorithm, which tries to compute a unique Personalized Relevancy Score for each reader, and for every item that is viewed. If the widget has enough data, the reader will see a message indicating how relevant this post may be. The algorithm is mostly based on a reader's rating history so... the more ratings that are cast, the more content can be personalized for each reader.

Installation takes minimal effort and does not require any registration. A few clicks and you are done. The widget supports TypePad, Blogger, Wordpress (installed), Drupal, and custom Javascript for your site.

Widget features -

  • Blends into your blog design - It's your blog, and your content ratings, and there is no reason for it to look any different. All outbrain blog widgets inherit the hosting site's styling properties.
    Here are two examples:
  • No marketing crap - You won't see an outbrain logo or marketing language such as "Powered by outbrain" on the widget itself.