Making and adding a Favicon to your site!
This tutorial will show you how to make a favicon and add it to your site, like this:

This tutorial requires you to have:

  • IconArt or Paint
  • A website
  • A good browser and internet connection... XD
  • Patience to read the tutorial
  • Respect for my work.

Making the Favicon

First of all, you want to make it. To make it easy (and lazy), click here and read the instructions, then there is no point for you to read this tutorial.
You can also grab a favicon from my collection here and come back for the code!

If you want a better and more customized and easy version, then keep reading!

Open up Paint or IconArt to these attributes: 16 x 16.




Pixel your favicon. If you are using IconArt, be sure to make your mask colour either green or a colour you won't use on the graphic. Confused!?:


See that arrow? Select the greenest green (#00FF00) and click on that arrow. That green will be transparent when your final product comes out.

Thumbnails:


When you have your icon done, in IconArt: save it as an .ico file.
In Paint: Save it as a bmp, if it needs transparentizing use GiFFY, and save it as a .gif file. Don't know how to transparentize? click here!

Upload your icon to Photobucket, Imageshack, Tinypic, whatever, then put this code between your < head > and < / head > tags.


Now, if you did not upload it as an .ico file, then please read below!

If you had it as a .gif file, then use this code: <link rel="icon" type="image/gif" href="YOUR ICON URL HERE" /> Do you see the difference?
If you had it as a .jpg then you would replace the type="image/icon" with type="image/jpg.

Type="image/icon" if the icon is an .ico file
Type="image/gif" if the icon is a .gif file
Type="image/jpg" if the icon is a .jpg file



Now go to your site and the favicon should be there!


I hope this tutorial helped you! If you have and questions/trouble, feel free to Contact Me!


Also, thanks to Visual-Nightmare for the gif/ico/jpg compatibility!