Favorite Icon Tutorial
The reason for this tutorial is because i looked all over for this information. The fav icon is used to show nexto your site when people save it to their favorites. I hope it is healpful in working on your website :)

Goals of this tutorial inclde:
making and saving an image to be added as your favorite icon in the address bar nexto your sites name using dreamweaver
You can place one of these on any page of your site but i have chose to place it on my index page so it will show on all the pages on my site.
Things you will need for this tutorial include:
http://www.favicon.cc
Photo shop or a simmilar program
Dreamweaver

Step one:
You will need to create an image that represents what your site is about or just something eye catching. It needs to be a perfect square and most of these images are 16x16. I made my image in corel paint shop pro (this is my preferd graphics editing and creation program)

Step two:
Make sure you save your image as a gif or a png. The reason for this is that those types of images seem to have less problems shrinking if your image does not fit correctly or look good.

Step three:
there is now way that i have found that you can convert your gif or png image to the ico you need without useing a converter program. This is where you will now need to go to WWW.favicon.cc.
Here are the instructions on how to change your image to the ico you need using the above website:
1: click import image
2: browseto locate your file
3: there are options to shrink or not to i made my image the standard 16x16 so i new what it would look like and it would need no shrinking. If you choose not to that is up to you but your image may need some adjustments if you choose to let the program shrink it for you.
4:you will need to save the new favicon to your computer. Go to preview close to the bottom of the page and then to save file and save it where ever your site files are saved. Or you can do what i did and let it dowload and when it was done i dragged i into my folder :)
5:Check your folder or where ever you store your site stuff to make sure its in there!!!

Step four
It is now time to add your favicon to your site :)

Open your webpage in Dreamweaver, then switch to Code view by selecting "View" from the menu at the top of your screen and clicking the "Code" option. Next, include the following code between the opening and closing head tags of your web page and after the title tags:

past the code below after the first head tag

paste the code below before the closing head tag

Step five:
Save your site!

additional information:
Before you freak out and yell its not working!! The favacon will not show up unless you Completely close out of the browser you are using!!!!

Here are a few other things to check if it is not working !!!
Is your image saved on your server?
is your pathway to your image corred in the coding above? did you replace images in the above code with your folder that contains the image you are using?
did you make sure the title script of your site or page is after the head code?
did you make a simple spelling error?
If none of these is the problem feel free to contact me at rosebud1978s@msn.com and place dreamweaver tutorial trouble in the heading NO SPAM PLEASE

I hope i have been helpful and that you have found this tutorial easy and simple to follow. Thank you for visiting smfcreations.com
Tutorials Home

Home