How to create a Favicon

ADVERTISEMENTS

A Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser that is 16×16 pixels in size.

Favicon

In order to make your own icon, you need a special program that can save images with the .ico extension. Until recently I used to use a freeware called IconArt to create favicons.

What is IconArt?

IconArt is an icon editing tool that allows you to create new icons from scratch. The editor provides all the tools you need like pen, spray, fill and selections. You can also move, rotate and flip the icon, apply masks, change colors and more.

iconart

You can also use IconArt to extract icons from .exe and .dll files and import them into the work area for editing. The program also supports static and animated cursers.

For those of you who prefer Photoshop, can download it’s Windows Icon (ICO) file format Plugin to support the .ico file format.

After you have created your favicon, save it as favicon.ico and upload the icon into your Web site’s root directory. Now, add the following tag in the head tag of your site:

Once you’ve added this code, upload all of your modified pages and you should see your Favicon right away.

If your new Favicon does not show up, try refreshing the page as your browser may be showing a cached page. Or it could also be that you did not upload it into the proper directory.

Favicon from Pictures

If you are too lazy to design your own favicons, use this web tool for creating still or even animated favicons from regular images.

All you have to do is select the image you desire and click “Generate FavIcon.ico”.

banner

Search JohnTP.com or view a random post

To receive this blogs articles for FREE on your email inbox, just enter your email address below and click 'Go':

Enter your email address: or .

Find out what I am doing currently by .

7 responses so far,

  1. 1

    ahref

    August 29, 2006 at 10:27 pm

    I am also using favicon in some of my sites, but I think using link tag is not neccessary.

  2. 2

    Kyle Eslick

    August 30, 2006 at 12:43 am

    I love me some Favicon!

    Nice write up!

  3. 3

    Rajesh

    August 30, 2006 at 2:32 am

    thanks for good info

  4. 4

    zooplah

    August 30, 2006 at 2:45 am

    I personally use a PNG image. You know, just so the IE users will suffer a little more. Mwa ha ha!

    And you do have to use the link element in those cases that your site icon isn’t /favicon.ico.

    Oh yeah, another handy tip is that you can create an animated GIF for non-IE users. How? IE treats “shortcut icon” as a single token, but others view it as two tokens (only “icon” really does anything), so you can first do a rel=”shortcut icon” for IE and then rel=”icon” to override it in decent browsers. Again, mwa ha ha!

  5. 5

    Srinivasa Ramanujam

    August 31, 2006 at 2:50 pm

    How to put it in my wordpress blog? Currently it is showing W icon of wordpress. I don’t know from where I can edit my html of wordpress blog. (I have done already, not in my wordpress, but in myblogger’s) blog.

  6. 6

    John T P

    August 31, 2006 at 5:17 pm

    Srinivasa Ramanujam- I am not sure if WordPress allows wordpress.com blogs to change their favicons as I have never used it.



Copyright ©2005-2008 JohnTP, All rights reserved.