Here you are going to learn how to make an icon that will show up when your site is added to the user's favorites with Internet Explorer and Mozilla Suite/Firefox. In Mozilla Suite/Firefox it will also show up on the tabs.
1. Download this plugin for Adobe Photoshop, and put it in your "Photoshop/Plug-Ins/Abode Photoshop Only" folder. The full path to that directory on my computer is: C:Program FilesAdobeAdobe Photoshop CS2Plug-InsAdobe Photoshop Only. This plugin will allow you to save your image in the correct format.
2. Restart Photoshop.
3. Make a 16x16 picture that you want to be your icon. This is the one that Strabes.com is using right now:
4. Go to File, Save As, and select the Windows Icon (*.ico) filetype, just as if you were saving it as a gif or jpg or whatever. Save it as "favicon.ico".
5. Now add the following line of code in between the <head></head> tags of your index file:
| <link rel="shortcut icon" href="/img_articles/10742/favicon.ico" > |
6. Upload your new index file, and upload favicon.ico to the same directory you typed in your line of code above. Open a new browser window, go to your site, and you should see it in the address bar of your browser. If you don't, read the troubleshooting guide below before you contact me to ask a question.
Troubleshooting
I have been getting tons of questions about this tutorial, so before you ask, read this troubleshooting guide!
1. Make sure that the icon is 16x16 and you saved it in Photoshop as a .ico (NOT renamed it)
2. Make sure you copied the line of code correctly.
3. Make sure your line of code is in between the <head></head> tags.
4. Make sure that the icon is in the same directory as the page that you want it to show up on. This is usually your main index page.
