How to Create a Favicon for Blogger

by
Google search icon for favicon
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 called Understand 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):

Favicon background rounded rectangle for Blogger
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:

The first draft of an icon image for Blogger

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:

Blogger icon without transparency set
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:

Upload your template image

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:

LunaPic transparency menu setting

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:

Setting the transparency color

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:
LunaPic save image

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 using Iconifier 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:

Using iconifier for files

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

Creating the favicon

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:

Blogger layout menu

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:

Blogger template layout favicon dialog

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:

Final favicon added to Blogger


This will add a professional flare to your blog!
27 comments:
  1. I did everything as you said and I still can't see the icon next to the adress bar :(

    ReplyDelete
    Replies
    1. Hi!

      It may just be your browser - IE sometimes needs a full refresh to see it. Did you try Chrome or Firefox?

      Send me the link and I can take a look as well.

      - Don

      Delete
    2. This is only on those browsers that have already visited your site.
      If you want to refresh your favicon, type yoursite.blogger.com/favicon.ico in address bar, press enter and then a couple times press f5. After this, in your browser favicon will be refreshed.
      P.S. Excuse me my English, it's not my native language :P

      Delete
    3. thanks, it helps me. Thanks a lot

      Delete
  2. Good tutorial. I did as per your guidelines. But I am unable to find the result. I tried in Chrome, Firefox and IE. Just can you please check the link and guide me?http://thalaivazhaivirundhu.blogspot.in/

    ReplyDelete
    Replies
    1. Hi Raman!!

      Looks like is it working just fine! You have a new favicon in my browser. Take a look at my screen shot with this link -
      https://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/RamanFavicon.jpg

      As far as I can tell - you're fine.

      - Don

      Delete
  3. Yes. You are correct. I saw my new favicon through your screenshot. But while I load my blog in my computer i am seeing only Blogger favicon.

    ReplyDelete
  4. Sorry. After having posted my comment, on an afterthought I rechecked my blogger favicon. It works on IE and Firefox. But not on Chrome.

    ReplyDelete
    Replies
    1. I think you shoud just clean your chrome's history and cache.

      Delete
  5. Awesome tutorial Sir... I was able to create a Favicon for my blog http://technsolution.blogspot.com and it worked fine for me.. I am following your other posts also from past few days and want to say they are very informative.. Thanks a lot.

    ReplyDelete
  6. Finally i found this article ! i many search on web "how to set a blogger header" but never find article which works. Now your article works.Thanks for sharing.

    **Regards**

    www.softonal.blogspot.com

    Thanks !

    ReplyDelete
  7. Now the favicon works on Chrome also. Thanks Don James and fdp.

    ReplyDelete
  8. Its not transparent, even I did everythin u said...
    dmittrievna.blogspot.fi

    ReplyDelete
    Replies
    1. Hi dmittrievna!!

      You have to be careful not to miss the edge and to make sure you've chosen the right color to make transparent. Sometimes you have to retry it. It will work!!

      - Don

      Delete
  9. This is one of the best step by step tutorials to make favicon for your website
    thank you

    ReplyDelete
  10. Thanks Man It Helped A Lot :3

    ReplyDelete
  11. Thanks for these useful insights......its like I was having them in my mind to want to know about it...and found it all here.

    ReplyDelete
  12. Thanks for your help

    ReplyDelete
  13. Thank you Don James, Sir
    For saving me from a huge lot of stress. . I've looked for a way to do this . Hopefully today the problem has been solved by you :(

    Thanks again, I'm glad to be here.
    you have such a wonderful Blog Design. . Cheer!

    ReplyDelete
  14. Don, thanks so much for these tips. I had started setting up my page with Wix because they have beautiful, easy to use templates but decided that I didn't want to spend money on this side part of my personal work and headed to Blogger. This will really help my blog look more professional without costing me the $$.

    ReplyDelete
  15. Thanks this will help me with my blog yod101.blogspot.com

    ReplyDelete

NOTE: If you are logged into a Google account and you cannot see your Google profile image and name next to the 'Comment as:' in the comment editor, your 3rd party cookies are blocked and the comment won't post. If blocked, please comment preferably by Name/URL.