FavIconBlog is a website dedicated to the 
This set of instructions will help you deploy a favicon if you host your Website on your own Domain. This is my first How-To Post. I will be adding additional instructions for other scenarios as I test them.
In a previous post about the Basics of the FavIcon I spoke about 5 steps. Keep in mind that Step 1 and Step 2 are the same no matter what, but I will continue to repeat them for new users.
- Save your FavIcon to your local computer drive
- Re-name it to: favicon.ico
- Upload it to the proper location on your hosting server
- Add the proper HTML code to your web page to insure it displays
- Sit back and Enjoy! – Or help others to get their own FavIcon
In this post I will walk you through installation of the FavIcon on a site where you host your own domain (e.g. Not Wordpress.com or Blogger.com)
Step 1 -
The FavIcon Generator Script should have helped you download your generated 16×16 favicon to your computer. Be sure to save it where you can find it again! Step 1 Complete!
Step 2 -
When you look at the downloaded file you will notice it has a long and complicated name such as:
b958de5ed8c900af3182700a7143e5e7_extra_preview_16×16.png
This is due to the script. Now just right click on the file and rename it to : favicon.ico
It MUST have this name in order to be recognized. Step 2 Complete!
Step 3 -
The first order of business is uploading your FavIcon to the proper location on your website. First and foremost the favicon.ico file MUST be located in the root directory of your hosting server.
It is possible that by placing the file in the root directory it will work, because many of the modern browsers will see the favicon.ico file there and utilize it. The following HTML coding could be considered “optional”. As I stated earlier if everything is not done properly your favicon will NOT show up, so I highly recommend adding this code to your website in order to make it robust and guarantee functionality.
Use your favorite FTP program (Such as FileZilla - Read the Tutorial Post) to upload the favicon.ico file to the “root” directory of your website. If you use Wordpress I have seen installations that required the favicon.ico file to be installed in the top directory of the theme you are using. For some reason this doesn’t always seem to be necessary, but I would put a copy in the Theme directory in addition to the root directory just to be sure. Step 3 Complete!
Step 4 -
The fourth step is to place the proper code into your web page to insure that the favicon is displayed. Again their are instances when the favicon just works without inserting this code. Nevertheless by putting the code into the head of your web document you will be guaranteed that it will work.
The placement of the HTML code will make sure that your favicon.ico file is located (href=”http://yourwebsite/favicon.ico”) and recognized (type=”image/x-icon”). The two lines really perform and identical function, but will insure compatibility for multiple browsers. Remember to change the RED text in the Code Example to your actual website (with favicon.ico located in root directory – where you placed it in step 3).
— — — — — Start Code Example — — — — — –
<link rel=”icon” href=”http://yourwebsite/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
— — — — — End Code Example — — — — — —
The placement of this HTML tag is important. It must be located in code that executes when your web page loads. In the case of traditional (non Php) sites that would be in your index.html file. In the case of Php enabled websites (Such as Wordpress) it should be in your header.php file. Regardless of the file type, it must be put in the header area between the <head> and </head> tags. This HTML editing can be done using any type of text editor, or better yet, use FileZilla (Editing Instructions Here).
As pictured above, WordPress actually has an editor in the Appearance section that lets you edit pages of your current theme (if you have made the files writable – CHMOD Instructions Here). This is a screen shot of the header.php file inside the WordPress Editor note the position of the code between the <head> and </head> tags. Step 4 Complete!
Step 5 -
Now that everything is installed and coded properly you can relax. One note: If you don’t get immediate gratification, sit back and relax. Favicons are strange in that the image may not appear in your browser bar right away. Give it a little time, and clear your browser cache to assist in the process. Step 5 Complete!
In Conclusion -
I hope this short tutorial has been useful. I tried to keep it short and concise, but of course it ended up being 800+ words. I am going to follow up with other tutorials on how to get a favicon displayed when you do not host your own blog (i.e. if you use Blogger.com or other sites).
If you find any errors that I have made, please let me know. Also leave a comment if you have another method or tip to add that you find useful. I am here to help! I will update this post as I find new or improved information.
-Loren
http://www.faviconblog.com
[...] earlier post on FavIcon Installation Basics spoke about using a FTP program (Filezilla) to place the favicon.ico file into the root directory [...]
Hi,I've tried to followed your instructions how to get favicon on my website. I've been waiting by reloading the website & still I haven't seen that icon yet.
According to your instruction step 4, I should paste the link between <head> & </head>. Btw,my website is wordpress. I've done exactly the same. Also I have cleared the cache.
How long should I wait to see it uploaded?
Thanks for your help.Cheers.