Active Web Hosting Logo


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.

  1. Browse and select the image of your choice and click the Generate FavIcon.ico button.
  2. After awhile the page will show a Download FavIcon button. Click on this button.
  3. Save the .zip file to your hard drive.
  4. Unzip the file and you'll see a favicon.ico file. This is your icon.
  5. 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.

  1. 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

  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.

  3. 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.

 


Home - Support - Management - About Us
... Active Web Hosting, 1445 American Pacific Dr. Ste 110-318, Henderson, NV 89074 ...
Toll-Free (800) 946-7764   Fax: (702) 567-1831