How to Create, Upload and Install Custom Favicon in Blogger Blog

A favicon is a square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.

Blogger users can easily install a favicon of their choice replacing that orange blogger favicon.
You need to create a favicon first, for that you can use any image editing tool like photoshop or you can use any online favicon generator like this one here.

Creating a Favicon

1. Open HTML-KIT Favicon Generator.

2. Upload your favicon that you’ve already created and click “Generate Favicon” button.

Or you can visit the gallery to get an inspiration before you begin creating your favicon.

3. After uploading your favicon picture you’ll be taken to next page, you’ll see two favicon created for you – one static favicon and other animated. You can do number of things to your favicon before downloading it to your system.

Like;
– You can customize it, change it size or background color.
– Instatntly preview your favicon in current browser window before downloading.
– Validate your favicon after installing to your site.
– Or if you want to you can add your newly created favicon to HTML-KIT’s favicon gallery.

4. Click the “Download only favicon.ico” if you want to download static favicon.

A favicon.ico file will be downloaded to your system.

Uploading Favicon on a Server

Now comes the uploading part in which you’ve to upload your favicon anywhere on internet. If you do not have your own hosting server, you can choose any free hosting service to upload your favicon. I’d recommend Google Sites to blogger users, as it is not only free but also fast, reliable and offers unlimited bandwidth.

1. Open Google Sites and login with your Google account.

2. Create a new site with any name (if you don’t have any).

3. Create a new page with any name and Go to insert and choose image.

4. Browser your favicon.ico from your system and upload.

5. After uploading right click the favicon image and choose ” Copy Link Location” and save the location on a text file or something temporarily.

Installing Favicon to your Blogger Blog

1. Login to your Blogger account and Go to Layout>Edit HTML

2. Find </head> and just ABOVE it paste this code :


<link href="YOUR-LINK-TO-FAVICON.ICO" rel="icon"></link>
<link href="YOUR-LINK-TO-FAVICON.ICO" rel="shortcut icon" type="image/x-icon"></link>


Just replace YOUR-LINK-TO-FAVICON.ICO with the link you saved in the text file.

3. Save the template and view your blog with a new custom favicon. 🙂