How To Add a Favicon To Your Blogger Blog

Favicon on Blogger Blog
A favicon is something that you've perhaps seen but didn't know it has a name. That was me a while ago. After a few attempts (trial and error) I managed to add a favicon to Highball Blog and in this post I'm gonna teach you how to do it on your Blogger/Blogspot blog.

Favicons are those small images that you see in the browser's address bar, shown before the URL of a website or blog. Not all websites display them but those who do are more likely to make a favorable impression on the viewer. We've got so used to see logos attached to any kind of venture that favicons are their normal extension on the web - in the browser to be more specific.

Let's get to the point and see...
How You Can Add a Favicon to Your Blogger Blog
Before jumping into technical stuff let's agree that you need to design a logo for your blog. And when I say design I don't mean you have to create a masterpiece in seven colors, gradients and textures. No! It's all about simplicity.

If you think your blog should get an original symbol logo then create a logo but in most cases - especially with personal blogs - having your name's initials in a small square or circle will do.

Tips for logo design:
  • Work with three colors maximum
  • Use solid colors (no gradients, no textures/pattern fills)
  • Use simple shapes
  • Work with few elements (don't crowd the logo with too many shapes)
  • Make sure your logo looks good in black and white too
  • Think about it from a branding perspective (make it memorable)
Create the logo in an image editor/computer graphics software that you're familiarized with. If you don't have such software installed on your computer then I suggest you go and download Inkscape - an open source vector graphics editor that competes with major expensive software.

Save your image as PNG file.

Now you need to resize your image. You can do that with Microsoft Office Picture Manager in a few easy steps:
  • Open your file
  • Hit the Edit Pictures button
  • Click Resize (the right sidebar menu)
  • Enter 16 in the Custom width x height fields (favicons must be 16 pixels wide/16 pixels tall for a proper display in the browser's address bar)
  • Click OK
  • Save your new image with a different name as to not replace it with the original one (Save as... - name-of-file-16-px.png)
Click on the image below for a visual explanation of the process.

Resize Images in Office Picture Manager
Once you have the new resized image you must host it somewhere online. I recommend Media Fire as it's free, reliable and convenient. Create an account and upload your image. Note that you can use Media Fire for sending files to people or for storing your own important documents - it can be an alternative to Dropbox (not that smart as Dropbox but good enough for this purpose).

After you upload the picture to Media Fire go through the following steps:
  • Click on the Share button to see all the sharing options
  • Copy the HTML Embed Code and paste it into a Notepad blank document
  • Look for the piece of code that looks like this: img src="http://www.mediafire.com/imgbnc.php/325ea55e0637fca99dc362b7970078862g.jpg"
  • This particular piece of code (purple line) is the link of your image hosted on Media Fire; img src stands for Image Source
  • Copy the code within the inverted commas and paste it lower in your Notepad document as you'll need it in the next step. Please note that your code will be different that mine!
  • See image below (share options in Media Fire)
Image Host on Media Fire

In this step you will add the favicon to your Blogspot blog.

  • Log into you Blogger account - go to Design/Edit HTML
  • Search the end of the title tag, that is </title>
  • Paste this code just after </title>: <link href="%27http://catascouts.googlepages.com/HighballblogsymbolPNG16.png%27" rel="'shortcut" type="'image/png'/">
  • Replace the red line with your favicon source code (purple line) that you saved earlier in the Notepad document
  • Click Save Template
Done!

Note that Highball Blog runs on Three Column Minibox Template which I downloaded from here. If adding the favicon doesn't work on your current blog theme, you may find other solutions in these Google search results.

This article will be added to the list you can see in the right sidebar called Tutorials for Bloggers. If you think these technical posts on blogging belong somewhere else, let me know and I'll create a separate blog just for that. I tend to mix these two topics - internet and outdoor activities - as I love them both. :-)

Happy blogging!


Thanks for stopping by! Share this article with your friends.

2 comments :

Please use your personal name and NOT your business name to comment. Enjoy the blog, the T-shirt designs and thanks for joining the conversation!