Advertisements
Home > Information Technology, programming, Science > FavIcon: Adding Logo to Your Website Address Bar

FavIcon: Adding Logo to Your Website Address Bar

Hello newbie web programmer. Do you still can’t figure out or wondering how to do this?

3-7-2009-12-15-08-pm2

Well, this is a simple thing to do. Create your icon by using Photoshop or Corel Draw and save it using .ico format. Name your icon file to be favicon.ico. By the way, if you’re using Photoshop, you might want to download the plugins to export .ico file. The download source you can use is: http://www.telegraphics.com.au/sw/

To be specific, the icon size of the address bar is originally 16 x 16 pixels. However, most browser can resize it if you make your icon file to be too large. I recommend you do the icon in 64 x 64 pixels and then resample it to 16 x 16 pixels.

Now, you are ready to upload your favicon.ico to your server. Put the icon on the root directory of your index / home page. That way, all your page which resides in the same folder or in the subfolder will automatically use the favicon.ico you have put in the root directory. Alternatively, you can set your favicon.ico manually inside your html page  by adding <link rel=”Shortcut Icon” href=”/favicon.ico”> or <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> in the head tag of each page you want the icon to appear.

You can also use GIF and PNG format for your address bar icon. However, this won’t work on Internet Explorer. Just add the following in each of the page:

<link rel=”icon” href=”/favicon.png” type=”image/png”> for PNG format or
<link rel=”icon” href=”/favicon.gif” type=”image/gif”> for GIF format

If your done, just refresh your page and there you have it, your own website address bar icon. Don’t forget to clean up your cache though so your browser doesn’t reload the old website.

Advertisements
  1. February 17, 2011 at 8:12 am

    What a useful little tutorial you provided! I’ve seen this question asked everywhere: Yahoo! Answers to Stack Overflow’s webdesign site! You explained it well for WordPress.org users and others with their own hosted site.

    For those of us using WordPress.com, the easiest way I found to get an icon to appear in my address bar was to upload an image to my Gravatar, and use that in the WordPress blog dashboard.

    Your approach is better though, because it is generally applicable for any web site, whereas mine is just a special case, and requires use of Gravatars, which some people don’t use.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: