How to create a Favicon
ADVERTISEMENTSA 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.
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.
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”.
Search JohnTP.com or view a random post
Related Articles
Find out what I am doing currently by .
Posted on August 29th, 2006 | Category: Tutorials | 7 Comments »
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.
Kyle Eslick
August 30, 2006 at 12:43 am
I love me some Favicon!
Nice write up!
Rajesh
August 30, 2006 at 2:32 am
thanks for good info
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!
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.
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.