Creating A Web Site FavIcon
A favicon is an icon that shows up next to the URL (and on a browser
tab next to the web site title). This gives your web site more distinction. It
can also show up next to the web site title in the visitor's bookmarks in their
browser as well. Here we'll show you how to create an icon of your own.
Method 1: Easy Method
If you have an image that is less than 150K in size, you can make it into an
icon by HTML-Kit's Online
FavIcon Generator.
- Browse and select the image of your choice and click the Generate FavIcon.ico button.
- After awhile the page will show a Download FavIcon button. Click on this button.
- Save the .zip file to your hard drive.
- Unzip the file and you'll
see a favicon.ico file. This is your icon.
- Proceed to follow the steps for Adding The Icon To Your Site below.
Method 2: From Scratch
Create a 32 x 32 image using your favorite image editing program. Note that
some icon editors also will allow you to create your own image without needing
a separate program. Some image editing programs may also save in .ico format. Be
sure to save the image in a format your icon editor or converter can read if you
are going this route.
If you created the image in a separate editor, load the image into your icon
editor or follow instructions with your icon converter to save or convert the
image to an .ico file. It's best to save the image with the filename favicon.ico
for your web site. Here are a list of icon editors and converters you may use.
Pick one that will work with your operating system:
Adding The Icon To Your Site
Next you will add this icon to your web server, so that it can be displayed on
the page. Additionally, you will need to insert code into every HTML file of
each page you want the icon to be associated with.
Edit your HTML files by putting the following two lines of code anywhere into
the area between the <head></head> tags:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Note that if you are going to have HTML pages in subdirectories, put a ../ before
the icon filename for each subdirectory level. For exmaple: ../favicon.ico
for the subdir-1 directory or ../../favicon.ico for the subdir-1a
directory:
[root]
subdir-1
subdir-1a
subdir-2
Log into your web server (usually it's ftp.yourdomain.com where yourdomain.com
is to be replaced with your actual domain name). Use your domain name as your
username, and your FTP password.
Upload the favicon.ico file you created to the root directory (ie. not
in any subdirectory). Upload your web pages that you edited as well into the
directories you chose to put them in.
When you visit your web pages with the icon code in them, you'll notice that
in the URL address bar of your browser you will see your icon. If you are using
a browser that uses tabs, it may appear in the tab as well. In addition, if you
bookmark the site, the icon may appear next to the bookmarked site name.
|
