How to Add a Favicon ico to a Website

My Favicon ico file

Here we are, moving into the world wide web at 3G speed. We love to interact using the internet and like to favorite things we find to visit again later using a website's favicon ico file which is represented by their personalized favicon. The newest addition to my website is a CSS template. Now everyone can read what I publish on my website from any type of browser. YEAH! When I was completing this project I learned how to add a favicon ico file to my web pages so that I had favorite button which was personalized to my website. Look through some web pages and you will see how many websites lack a favicon ico. When a page does not have a favicon there will be a little blank page where the favicon should be. Let me tell you how I add a favicon ico to my web pages because it is easier than I thought.

Things You'll Need

• Website
• Host
• Admin authority
• Password
• FTP connection
• .ico file
• Script

Instructions

1. Add a favicon ico to a website by creating a new favicon ico file that is personalized to your website. Download an editor like Icon Suite. A link is provided below to some free icon editors that can be used to perform this project. Learn how to add a favicon ico to a website to upgrade an old site that you have no regular traffic to and to begin the process of upgrading your website from HTML to CSS.

2. Create the .ico file that is your favicon. Many editors can be used to shrink pictures, create custom test, fonts, and more. My personal favicon ico is the letter P, for Powerfitz. Each icon editor has a function menu from which to select the different options of favicons you can choose from. For your first attempt you can try a single letter like mine to move ahead quickly. Icon Suite let me pick the font selection and drop a large capital P in the center of the icon field. I quickly saved the file in a folder I would recognize. It is best to create a favicon file to drop your different favicon ico files into.

3. Connect to your website through your host administrative panel. My website has C-panel and I can upload new web pages quickly using FTP. FTP shows you both your computer's hard drive and all its files as well as all the website files located on your host's servers. Put a copy of the file into the root directory of your website. For me it is not saved in any file folder. It is placed with the files that make up all the files outside of folder files which have specific functions. The root directory is the place pointers like your new favicon script will look to first to find the corresponding image. After creating your ico file use FTP to copy and paste a copy of it into the website's root directory. Your favicon ico is ready right? uh, no... But you're close.

4. 

   Copy and past the favicon .ico file script into each page of the website you want a favicon .ico to show. There really is no reason not to have a favicon .ico script on every page, so for every page you need to place a line of script. SEE IMAGE FOR CODING! EMAIL FOR IT IF YOU CANNOT SEE IT! Put it in between the top to head * head. As you can see, my favicon file name is in the line of code. My favicon is represented as "P.ico". You will need to replace my file name with your own placed in between the quotation marks just as mine is. Once you have done this you need to save the page on your computer and FTP a copy of the new page over to your website. Once you have done this on all your pages your project is complete.

Tips & Warnings

• CSS templates can move your website right into the future with little work. How to add a favicon ico to a website is only part of what you can do to make your website better. Check it out in some of my other eHow articles. Not there? check back soon for the newest additions.

• Saving your favicon .ico file in a folder outside of the root directory will not produce the favicon when you view the webpage. You must have the favicon .ico file in the right place for the favicon to show up.

Resources

• Powerfitz