How to Add a Favicon
Create or locate an icon image to use for your favicon., Upload the favicon image to your web-hosting account., Test the favicon.
Step-by-Step Guide
-
Step 1: Create or locate an icon image to use for your favicon.
You can use any number of free clip art images, a smaller version of your logo, or any other image you see fit.
The image you create is best saved in the .ico (Windows icon) format, as this is the only format that can be universally read across Safari, Opera, Firefox, Google Chrome, and Internet Explorer.
The image should be no larger than 16-by-16 pixels.
If the image is larger, use a photo-editing program to re-size it because the image will not work if it is larger. -
Step 2: Upload the favicon image to your web-hosting account.
Use either your web-based control panel and file manager or file transfer protocol (FTP) software, and note the file path to where the file was uploaded.
For instance, if you uploaded the .ico file to your images directory, the full path would be: http://yourdomain.com/images/favicon.ico Open the source code file for each page in your website, and use either your web-based control panel and file manager or the FTP software.
In the head "<head>" section at the top of each document, insert the following code to add a favicon, starting immediately after the word "head": "profile=""> http:
To use the predetermined URL method, upload the favicon image to the main folder where your website files are without changing the source code.
This method only works in browsers that were programmed to look for the URL.
People who have their own websites but do not have their own domain name will not be able to use this method.
Use a favicon creator to create your favicon.
These online tools will take an image you upload and size it accordingly.
Some creators may also provide the code you need use to add the favicon to your website as well as instructions on how to install it. , Load your website in the browser of your choice.
If it does not work, clear your cache and try again.
If it still does not work, check for code error and typos, image upload location, image type, and image size.
Be sure you are using the appropriate version of the code for the language your website is written in, which is either HTML or XHTML. -
Step 3: Test the favicon.
Detailed Guide
You can use any number of free clip art images, a smaller version of your logo, or any other image you see fit.
The image you create is best saved in the .ico (Windows icon) format, as this is the only format that can be universally read across Safari, Opera, Firefox, Google Chrome, and Internet Explorer.
The image should be no larger than 16-by-16 pixels.
If the image is larger, use a photo-editing program to re-size it because the image will not work if it is larger.
Use either your web-based control panel and file manager or file transfer protocol (FTP) software, and note the file path to where the file was uploaded.
For instance, if you uploaded the .ico file to your images directory, the full path would be: http://yourdomain.com/images/favicon.ico Open the source code file for each page in your website, and use either your web-based control panel and file manager or the FTP software.
In the head "<head>" section at the top of each document, insert the following code to add a favicon, starting immediately after the word "head": "profile=""> http:
To use the predetermined URL method, upload the favicon image to the main folder where your website files are without changing the source code.
This method only works in browsers that were programmed to look for the URL.
People who have their own websites but do not have their own domain name will not be able to use this method.
Use a favicon creator to create your favicon.
These online tools will take an image you upload and size it accordingly.
Some creators may also provide the code you need use to add the favicon to your website as well as instructions on how to install it. , Load your website in the browser of your choice.
If it does not work, clear your cache and try again.
If it still does not work, check for code error and typos, image upload location, image type, and image size.
Be sure you are using the appropriate version of the code for the language your website is written in, which is either HTML or XHTML.
About the Author
Tyler Rodriguez
Experienced content creator specializing in organization guides and tutorials.
Rate This Guide
How helpful was this guide? Click to rate: