Create And Publish A Favicon
A favicon is a 'Favorites Icon' that previous to IE7 would only
display if the website was saved as a 'Favorite'.
IE7+ browsers also display the favicon in the address bar and on
the tab. Some browsers will display any file type, but IE will only
display .ico files. The .ico file format will be read correctly
by all browsers that can display favicons.
Creating A Favicon Image
The first step in creating a favicon is to create the original
image. You can use any graphics program for this - I used Photoshop,
but Paint will work just as well.
- Create a new 100x100 pixel file.
- Create your icon image - keep it very simple as when it reduces
to the standard 16x16 pixel size, any detail will be lost.
- Clean up pixel edges - that nice blurring that gives you a smooth
edge isn't going to show on a 16x16 favicon.
- Save the file.
- Now resize to 16x16 pixels and check the clarity of your image.
If it does not display well, return to your 100x100 file size
and make the necessary adjustments.
- Save the file as a gif. I prefer gifs to jpegs for favicons
as I find they give a crisper and smoother edge. At this stage
you can name it whatever you like.
Create The Favicon File
- Go to an online Favicon Generator site. Such as
- Upload your image file – Generate Favicon image in .ico
- DOWNLOAD you favicon. Save it to the root folder on your hard
drive that your website files are located as 'favicon.ico'
- Upload to your website.
Displaying Your Favicon
IE7 is supposedly meant to automatically display any favicon.ico
file found in the root directory. However, if you wish to ensure
that all versions of all browsers display your favicon, add the
following code to the head section of your pages:
<link rel="icon" href="http://yoursite.com/favicon.ico"
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico"
In most cases, only the first line will be necessary, but to be
on the safe side - add both lines.
Getting Your Site Bookmarked
To ask your viewers to bookmark your site, Add this code to your
Name')">Bookmark This Page</a>
Website Tools Index | Favicon
| Code Protection | PHP
Redirects | Google Analytics | CP