Creating a Favicon for your blog in less than 5 minutes [Blog Design]

by Ashwin

What is a favicon?

As Wikipedia puts it,

A favicon (short for favorites icon), also known as a website icon, shortcut icon,url icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage

In short, a favicon is something that you see on the title bar, at the left corner of a webpage or a website that you visit.

Here is how the favicon of a page in Google looks, in case you haven’t seen this before.

favicon_1

Why do I need it for my Blog?

Once your Blog starts growing, many people might like to bookmark your blog home page or a specific post, on their favorite browser.   When they do this, the “favicon” will help to distinguish and uniquely identify your content from the rest.

Here is an example that shows, how a favicon might distinguish various bookmarks that are grouped together.

favicon_2

How to Create and Install a favicon?

If you are convinced that a favicon might be good for your blog or a website, then I am going to show you how to create one for “free” and install it.

There are many websites that let you create a favicon from scratch and download the “favicon.ico” file that can be installed on your website.  And, this is one of my favorites:favicon_3

Here is another site that allows you to Upload an image file of your choice and convert it into a 16 x 16,  “.ico” file – http://tools.dynamicdrive.com/favicon/

Once you have created a favicon of your choice, follow these simple steps to install it on your website:

  • Upload the “favicon.ico” file to the root of your website using any FTP tool.  For example, if your site is hosted at http://yoursite.com, upload it directly under the public_html folder
  • Make sure it is uploaded by accessing it at http://yoursite.com/favicon.ico
  • Insert the following HTML snippet inside the tag of your web pages
  • If you are trying to install the favicon on your WordPress blog, make sure to add the HTML snippet in the header.php file, under the tag
  • You are done!!!

Note that it may take sometime for the favicon to appear in your Browser.  Sometimes you may have to clear the cache or wait a little longer.

Spice up your Website or Blog with a favicon and let me know how it goes…

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • Create a Contact Form for your Blog in minutes using Wufoo
  • Setup Google AdSense for Search for your site in 5 minutes [Blogging]
  • Write Pretty Code snippets in your Blog with SyntaxHighlighter WP plugin [Blogging Tips]
  • Mobilizing your WordPress Blog
  • Everything you wanted to know about XML Sitemaps [SEO Tips]
  • http://twitter.com/thotsunlimited/status/1370539618 Ashwin

    [Blog Post] Creating a Favicon for your blog in less than 5 minutes [Blog Design]: What is a favicon?.. http://tinyurl.com/chlxkw

  • http://therealestatemarketingmaven.com Peter Fletcher

    Thanks for a simple but very effective tutorial. You've made my day. I almost freaked out when it didn't show up immediately so I read your post again, rebooted my browser and it worked a treat.

    Thanks heaps.

  • ashwin_c

    Hi Peter,

    Great to know that you found this useful. Thanks for taking time to provide a feed. Keep reading :)

    Thanks.

  • http://therealestatemarketingmaven.com Peter Fletcher

    Thanks for a simple but very effective tutorial. You've made my day. I almost freaked out when it didn't show up immediately so I read your post again, rebooted my browser and it worked a treat.

    Thanks heaps.

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Hi Peter,

    Great to know that you found this useful. Thanks for taking time to provide a feed. Keep reading :)

    Thanks.

  • http://twitter.com/thotsunlimited/status/3532214462 Ashwin

    Creating a Favicon for your Blog http://bit.ly/ohMbq #wordpress

  • https://thoughtsunlimited.net/blog/thesis/thesis-theme-18/ What’s New in Thesis Theme 1.8?

    [...] All you have to do is prepare a Favicon (a 16 x 16 Image with an .ico extension) and upload it using the Thesis Admin Interface.  If you aren’t using Thesis, here is another post to help you setup a  Favicon for your WordPress Blog. [...]

blog comments powered by Disqus

Previous post: Freelance and Guest Writing Opportunities for those Tech Savvy [Blogging]

Next post: Setup Google AdSense for Search for your site in 5 minutes [Blogging]