- Previewing SVG in HTML-Kit
- Multiple browser modes on a single tab
- HTML-Kit Tools in German
- Wizards for creating HTML lists and tables
- File versioning and backup
FavIcon is short for favorites icon. Favicons became popular as icons that were displayed next to web site addresses on the favorites menu of a browser, also called the bookmarks menu. Today, favicons are displayed on the browser address bar and browser tabs, as well as on bookmarks and Internet shortcuts. A favicon is an icon associated with a web page or an HTML document.
Although it’s not necessary to add a favicon to a web page or a web site, associating an icon with a web site address can make it easier for visitors to remember the site. In case of business and promotional sites, favicons can be used to improve the visibility of business and site logos.
Creating a favicon
Since a favicon is a Windows Icon file, any application capable of saving bitmaps in ICO format (*.ico) can be used to create a favicon.
However, not all image editors support ICO files or may require an add-on to save in ICO format. Although some browsers also support GIF and PNG images as favicons, only favicons created in ICO format provide compatability with the widest number of web browsers.
Let’s get started by creating a favicon. The method number 1 below is usually the quickest way to create a favicon. The manual method is described in method number 2 and requires additional software.
Method 1: Automatically generate a favicon
FavIcon from Pics, a free service provided by the HTML-Kit site, can be used to generate a ready-to-use favicon.
- Select a picture, a logo or other graphic for the source image.
- Click Generate to view the favicon.
- Download the generated file. It includes favicon.ico and a short help file.
Method 2: Manually create a favicon
If you prefer to create a favicon manully and if your image editor supports saving in ICO format, create a bitmap that’s 16 by 16 pixels in size and save it as favicon.ico in ICO format. For the best results, make sure that the favicon.ico file meets the following specifications:
- Width and height: 16 pixels by 16 pixels
- Colors: 256 or less colors
- File format: ICO (*.ico)
- Save as file name: favicon.ico
Installing the favicon
Once you have created a favicon, it can be assigned to one or more web pages.
To keep things simple, and also to keep backward compatability with older browsers, let’s use favicon.ico for the name of your favicon file.
There are several ways to add a favicon to a web site, depending on how the site is hosted and how it’s updated. Before using one of the following methods, first upload your favicon.ico file to your web site. It should be in the root or the main folder of the site.
Method 1: Add favicon tag to the HEAD section
If you have access to HTML files on your web site, this is the recommended way to add a favicon to your web pages.
Open the index page or the main page of the site in your web page editor. If you don’t use a web page editor, you can use any text editor such as Notepad. The index page is usually named index.html or default.html. The rest of this document assumes that it’s named index.html.
Once index.html is opened in the editor, find the text
<head> (called the <head> start tag) located near the top of the page. Several lines below it, there should be a similar tag but with a slash —
</head> (called the </head> end tag). Paste the following line (called the favicon link tag) below <head> but before </head>.
<link rel="shortcut icon" href="favicon.ico">
If you’ve used FavIcon from Pics to generate a favicon, please see ReadMe.txt included in the download for the favicon link tag recommended for your favicon. Use what’s in ReadMe.txt instead of the tag listed above.
Finally, save index.html and upload it back to your site.
Method 2: Upload favicon.ico to web site’s root
If you don’t have access to HTML files on your web site or if you prefer not to edit them, you can simply upload favicon.ico to the root/main folder of your site as mentioned earlier. This method does not give the best results and should be used only if the method number 1 cannot be used.
Method 3: Check web hosting documentation
If you don’t have access to HTML files on your web site and unable to upload favicon.ico to the root/main folder of the site, you may have to rely on other methods provided by the web host. If your hosting account comes with a control panel, see if there’s an option for assigning a favicon. Also check web hosting documentation for additional information. If there are no options for uploading favicons, you may have to contact web hosting support for help.
Finally, reload your web site in the browser to view the installed favicon.
Answers to common questions
So you’ve created and installed a favicon. This document provides troubleshooting tips if your favicon doesn’t show up in the browser.
Testing the favicon
If your favicon doesn’t show up on the first try, don’t worry. The following free service, also provided by the HTML-Kit site, can be used to quickly run common favicon tests. It works regardless of how the favicon was created and installed. You can also perform these tests manually as will be described later in this document.
If no errors are found and the favicon still does not appear in the browser, try the following troubleshooting tips.
Favicon validates but no show in the browser
If the favicon does not appear in the browser, try clearing the browser cache. Close and restart the browser, and then reopen the web site. This step is only necessary on the computer used to install and test the favicon. Web site visitors will generally see newly installed favicons without having to take any additional steps.
When testing favicons in Internet Explorer 5.x and 6.x, add the site to Favorites using the "Favorites" menu, and restart Internet Explorer.
Still have unanswered questions?
Please post your questions on the HTML-Kit Support Forum. Don’t forget to include your web site address if you’d like someone to preview and test your favicon.
Have a question about installing or getting your favicon to work?
Please post your questions on the HTML-Kit Support Forum
HTML-Kit support forums have received a good number of questions about installing and testing favicons. If you had posted a question about favicons in the last several months, the chances are it was answered by Dave Pyles. A big thank-you goes out to Dave and everyone who has helped out by testing websites and answering questions.