How to customize your Favicon in Blogger

Feb

11th

How to customize your Favicon in Blogger

Author: luq | Files under Blogging, software, the internet, tutorials

A Favicon is a custom icon for your blog displayed next to the URL’s of your sites and next to the page title in open tabs.

By default in blogger blogs, all the icons are set to Blogger’s favicon:

By performing the following steps you can replace the Favicon with your own.

Select an icon of your own, you can get quite a bit of professional free favicons at Favicons R Us or you can create your own Favicon at favicon.cc. (Refer below for type of icon.)

Next you’ll need to host the icon on a website. If your blog is on a custom domain you can upload your icon there or you can upload it on a free service, preferably on Google’s free web hosting service. Once you’ve uploaded the icon you can move to step 3. [Lets call the URL of the icon you have uploaded ‘FaviconURL’]

Now log in to your Blogger control panel, go to the layout panel of the blog you want to customize. Select ‘Edit HTML’.

Look for the “<head>” code (it’s somewhere on the top, if you can’t find it select ‘Ctrl + F’ and search for it.)

Once you’ve found the location right after the “<head>” code paste the following code:

<link href=”FaviconURL” rel=”shortcut icon”>
<link href=”FaviconURL” rel=”icon”>

Icon Details

The icon should be preferably square – 16×16, 32×32, or 64×64, bigger sizes are supported but you wouldn’t want most of your webpage’s file size to be because of your Favicon. It would be best if you limit the file size of the Favicon to less than 15k.

You can get a more detailed description of how to change your Favicon here.

Popularity: 69% [?]

I've written the post, i'll let you do the bookmarking: These icons link to social bookmarking sites where readers can share and discover new web pages.