How to change your Blogger Favicon - Pimp your blog Part IV

If you look at the left corner of this open tab, or the left side of the URL box, you will see a small icon.  This icon is called the favicon.  If you have a blogspot blog, then your favicon will look like an orange B.  In this tutorial I will show you how to change that icon using Inkscape and Gimp.

Step 1 - Get your graphic:
Determine which graphic you will want to use.  Keep in mind, the end result should be square and small (16x16 pixels)
I am using the same graphic I used for my text logo.  I took off letters so that it is more of a square shape.

 Step 2 - Tweak image so it works as a small icon:

For such a small icon you generally want few colors and more contrast.  For this reason, I made my lettering skinnier so that when I scale it down it won't look like a blob of text.  To do this, use your node editing tool in Inkscape (if you are using a vector image for your icon).
Step 3 - Size perfectly in Gimp:

You can probably do this in Inkscape, but it is just a lot easier (to me) to do it in the Gimp.   Once your image is opened in the Gimp, change the canvas size so that it is a perfect square; center the image before you press resize.

Once you have a square canvas size, you will want to scale the image down. Favicons are usually 16x16 pixels.  After your image is scaled, save your image (I saved mine as favicon.png  The name or file type does not really matter though.  PNG files allow transparency)

 Step 4 - Upload image to Picasa:

Everyone with a blogger account also has a Picasa account.  The images you upload to your blog go to that account.  Sign into the Picasa website and access your blog's folder.   Press the "Add photos" link to upload your new favicon.

After you have uploaded the image, go to your image and right click the image and click "View Image" (I am doing this in Firefox; it may be different in your browser).

After you have clicked that, the page will be your single image.  The important part is in the URL bar.  You will need that link later on. (Also, notice to the left that the favicon is your new image.  That is how it will look on your blog.  If you don't like the way it looks now, you may want to repeat the previous steps until you get something you like)

Step 5 - Add code to Blogger:

In Blogger, go to Design>Edit HTML

Before the tag, add the following code:

<link href="YourImageURLhere" rel="shortcut icon"></link>
<link href="YourImageURLhere" rel="shortcut icon" type="image/"></link>
<link href="YourImageURLhere" rel="icon"></link>
<link href="YourImageURLhere" rel="icon" type="image/"></link>

You will obviously want to replace the text "YourImageURLhere" with your actual image URL that  you got in the previous step.

Save the changes. You are done!

Now when you go to your blog, you should see your favicon.

About McKay Christensen

After having lived in Oregon, Alaska, and China for the past 10 years doing landscape design and English teaching, I have returned to my home state of Utah and currently work for a growing tech company.

In my free time I enjoy working on my website where I post tutorials and reviews (and anything else I think is geeky) and I also like to write songs for my Super English Kid Youtube channel.

My favorite things to do include anything with my wife and son. Hiking, camping, and photography (or anything else outdoors). Playing Ultimate Frisbee or Ping Pong. Listening to 60s, 70s, or 80s, music. 

Feel free to contact me using my contact page. I would love to hear from any of you!


Powered by Blogger.