How to Create a Favicon for Blogger

by Don James

Copyright 2012, Google, Inc.

Have you ever asked 'what is that little icon in the address bar?' or 'what is the little image next to the url called?' I would hazard to guess that asking someone who has worked online probably never bothered to learn what the word 'favicon' means (though, guessing that it meant 'favorite icon' wouldn't be too tough to figure out). First released in 1999 in Internet Explorer 5, the World Wide Web Consortium adopted it soon after.

Creating favicons for Blogger is pretty easy these days and can be done in literally minutes. The hard part is trying to map your logo or symbol into such small dimensions. And, to add to that, the expansion of icons of larger sizes has exploded over the last few years with mobility and the evolution of browsers.

Overall, however, it is a simple task at hand with only the need of a paint program (with a supplement - possibly) and a great online tool called Iconifier. These will allow you to create favicons and icons for almost all browsers and devices. If you're really interested in the history and aspects of the favicon you can jump over to Jonathan T. Neal's very comprehensive article calledUnderstand the Favicon.

Here we'll just be concerned for favicons for Blogger. I'll walk you through some of the key considerations when designing your own with an emphasis on using simplicity as your guide (more creative folks who have deeper digital artistic skills can go much deeper).

Step 1: Draw Your Favicon Template

The example I'm going to use here is to attempt to simulate (only as a sample, Google team - don't sue me!) the Google search favicon. It's a very simple design of a blue, rounded rectangle with a Times lower case 'g' in the middle as you can see at the beginning of my post.

Our goal will be to create a similar graphic that mimics this icon that we'll then convert into a favicon. Your first step is to open a paint program and set your canvas to 144 by 144 pixels with a clear or white background. As a Windows user you can simply use Paint to set the Image/Attributes (or if using Windows 7 and above set the Home/Resize) to pixel settings of 144x144.

Why 144x144? If you read Jonathan's article you'll see that IE 10 will need this size in the future.

Next let's just draw a reddish, rounded rectangle without a border like this (be sure to save your file in PNG format for now):

Pretty simple at this point - your background is ready. Next, let's draw a large Times New Roman lower case letter in this background using nearly white (set your color to as close to white as possible but not fully white - RGB value of #FEFEFE or 254, 254, 254).  I'll use the letter 'y' as my example.

I set the text size to about 110 pixels and then drew the y on the background like so:

Perfect! Our first icon logo is just about ready for IE 10 Metro!

Step 2: Setting the Border Transparency for the Favicon Template

The next step is to make a small adjustment on your icon. Now, if you have a paint program that can set the white border (which you can't see here) around the red template to a transparency, then go ahead and jump to Step 3. For all others we'll use the online tool called LunaPic I found in my earlier articles to set the transparency.

By having no transparency I mean that the white border still shows if you paste it onto another color like so:

You can still see the white border - if that had been set to be transparent you would not have seen that border when pasted and the black would have shown through as if the border was transparent. So, your next step is to upload your image into LunaPic. Simply choose the 'Upload' menu item and find the 'Browse' button down in the lower left of the screen from your LunaPic home page to get your image ready for Editing:

Now, just press the 'Upload Now!' button to load your image onto the screen. To set the favicon transparency just choose the 'Edit' menu item - 'Transparent' command like this:

Carefully use your mouse to click on any part of the white border to set it to be Transparent. You should see a faint checkered border now in LunaPic as I've shown with the red arrow here:

If you don't see it then try it again until you're sure the transparency is set. The letter 'y' in the middle should not show the checkered pattern since we set its color to be slightly off-white.

You're now ready to save your modified image back to your system by selecting 'File' / 'Save Image' in LunaPic like this:

Be sure to select the 'Save as PNG' option when you're doing this. The image will have a new name now on your PC that you can now utilize as the core image for your favicon:

You're now ready to convert your base image into all icon formats for Blogger and other applications.

Step 3: Converting Your Blogger Favicon Template

The next step for a Blogger favicon is to convert this image to the standard 16x16 pixel image you see on almost all modern browsers in the URL bar. There are quite a few free icon generators out there today but I prefer usingIconifier because it generates all possible sizes from browsers to tablet icons.

Simply go to Iconifier.net to bring up the main screen. All you need to do is select your image from Step 2 from your system and press the 'Iconify' button like this:

After a few seconds all of the necessary file sizes will be created for you as you can see here:

The file you're most interested in for Blogger is the one I've circled entitled 'favicon.ico' - this will be the one you'll use for blogger. You can either right-click and download (Save Image As...) the zip file with all icons or just right-click the one I've circled and save it to your system.

Step 4: Installing the Favicon into Blogger

At last the final step is to add your downloaded file, 'favicon.ico', to Blogger. This is a very simple step using the Blogger main menu. Just go to your Blogger Layout menu item and find the Favicon gadget in the layout like this:

Select the 'Edit' link to bring up the icon selection screen. Use the 'Choose File' button to find the downloaded 'favicon.ico' file you just created in Step 3 and then press 'Save' like this:

Just save your Layout by pressing the 'Save arrangement' button on the Layout screen (this might be an unnecessary step but I do it anyway) and you are done!! The favicon is now added to your Blogger blog.

Don't worry - you can modify this any time.  Here's my test blog with our example that I created:

This will add a professional flare to your blog!