Favicon: How To Create A Website Icon For A Blog?

What’s Favicon? Well, it was suggested by Microsoft to identify a website bookmarked to IE Favorite, hence it’s called “Favorite Icon”. Favicon, is also known as website icon, bookmark icon, shortcut icon, page icon, URL icon, etc.

Besides appearing in web browser bookmark management, this little Favicon also appears alongside the URL of a webpage in the Address bar and/or the tab (for web browser that support tabbed browsing, e.g. IE7, Firefox, etc).

If there is no Favicon for a webpage, Internet Explorer substitute it with the standard IE icon while Firefox 3.0.x merely display a “blank canvas”.

So, as a webmaster or blog owner, why don’t try to enrich its appearance with a dedicated web icon, like a branded logo to represent the site/blog?

Is it very technical or do you need special tools to create a Favicon? As of today, create and add a Favicon is just simple.

How to create a Favicon for a blog / website?

1. Find an image, preferable a picture with equal pixel (e.g. same width and height) and the picture content is still visible after resize to 32×32 or 16×16 pixel (i.e. the size of Favicon that’s fit to appear in Address bar, Bookmark, Favorite, tab).
    
2. Ask Google Search to get a list of “Favicon maker” or “Favicon generator“. For example, you may use one of these online Favicon makers to automatically resize and generate a Favicon from the picture you’ve selected in previous step:
   • FaviconR.com
   • Favicon.co.uk
      
3. Download the generated Favicon to local hard disk and proceed to add the Favicon to a blog/website.

How to add a Favicon to a blog / website?

Now, upload the Favicon you’ve generated from online Favicon maker to the root directory of blog/website, i.e. the directory where the index file usually exists (e.g. index.php, index.html, index.htm, etc).

For WordPress powered blog, the blog root directory is where you extract the WordPress core files, i.e. the directory where you see index.php, wp-config.phg, etc.

Now, the Favicon should have been automatically picked up by Internet Explorer when you force IE to reload the blog (by pressing CTRL+F5 hotkey).

Some other web browsers, however, might not automatically retrieve the Favicon in root directory. Thus, you need to refer the following template code:

<link rel="shortcut icon" type="image/x-icon" href="http://www.walkernews.net/favicon.ico"/>

Update the red color text with the URL of your Favicon, copy the updated template code and insert it to HTML source file, right before the <head/>.

Again, for WordPress powered blog, you should only update the header.php source file by inserting the template code just before the <head/> tag, e.g.:

<link rel="shortcut icon" type="image/x-icon" href="http://www.YOUR_OWN_URL/favicon.ico"/>
<head/>

That’s all you’ve to do with Favicon of a blog/website. Is it easy?

Howto, Internet, Blog, Dummy Guide, Favicon, Guide, Howto, HTML, Weblog, Website, Wordpress


» Windows Media Player: How To Embed WMV File In HTML Code?
» Latest Google Favicon Adds Colour To Bookmark List
» WordPress: Adds wp-caption-text To CSS File For Image Caption Styling
» How To Change WordPress Image Caption Text Style To Superscripts?
» How To Insert Multiple Images In WordPress 2.6 Without Using Shortcode?
» How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5?
» Update WP_TITLE To Display Blog Name On The Right

« WordPress 2.6: What Does The Commenter IP Tells?
» JiaYou Domain Name For Sale. And, What Is JiaYou In Chinese?