Walker News

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

How to create a Favicon for WalkerNews.net?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:
  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?

Custom Search

  1. Walker 19-08-08@01:44
  2. Danny 05-09-08@12:36

    I use SM Favicon Generator. This one works great and its fast.

  3. Latest Google Favicon Adds Colour To Bookmark List 11-01-09@02:04

    […] by Google blog So, have you made a favicon for your own site/blog? If not, follow my lousy guide to create a simple favicon in no time :-) Although WalkerNews.net favicon is not updated for a new year, I’ve made tonne […]

  4. IE8 Groups Tabs Of Same Domain With Colour 09-04-09@01:21

    […] with a different colour, say for example this is yellow. Apparently, the colourized tabs complement favicon feature when there is no such web icon associated with the […]

2017  •  Privacy Policy