~ Sunshine Designs~ *HOW TO MAKE A FAVICON*

*HOW TO MAKE A FAVICON*

Using PSP and Microangelo

*HOW TO MAKE A FAVICON*

Using PSP and Microangelo

This tutorial came about from many friends helping me to learn to make a favicon for my site. As i could find no tutorial online to make them so i decided to put together what my friends helped me with and what I did myself to make my own favicon....©Sunshine Designs May 22, 2003

How to make a favicon.ico (short for favorites icon, or bookmark) for your website

- We Are going to Make a 16x16 pixel image of your icon in Paint Shop Pro. Then save it in Microangelo you can get that here free for a 21 day trial.

Save this page to your favorites folder and then open your favorites and you will see a little sunshine by the page name. that is a "FAVICON" favorites-icon. Now click on that saved favorites and you will see it in my address bar also.

Ready to make one for your site now?
Alrighty then on with the lesson

1) Open new image 16x16 transparent

2) Add a new raster layer

3) Choose the image you would like to use, something unique that says something about you or your site, I of course made a sunshine

4) I used a preset shape because it is small and details won't show up very well in a small image.

5) Add your image to the layer, I used a shape of a nice yellow sunshine of course.

6) Now you want to merge layers visible.

(If desired, create an alpha channel for the transparency mask, using black where your icon is opaque,and white where it is transparent)

7) Save as a transparent .gif using your optimizer wizard, save as favicon.gif ( you may want to make a folder to hold all your favicons.)

8) Open Microangelo. Click on Studio. go to file and find your saved favicon.gif (see image) clean up any jaggies.

(That itty image you see on the right is what your visitors will save to their favorites and see in their address bar)

9) Make sure your image looks good enough for people to recognize the shape, tidy up anything you need to while in microangelo.

10) In Microangelo you need to save this as "favicon" (no other names or it won't work) the default extension is ico.

Go to your website. Save this in your root directory, (top level) directory of your website. (that is the first page you open in your website, where all your main files and folders are)

Add the following tag somewhere between the

and the ...
tags of your home page index file:

Ain't that cool???
Now the only draw back is that if people empty their cookies the image will disappear they only need save your page again and over write the existing saved one. no need to delete and save again.
Now your cute little "favicon" is back.
I haven't figured out how to fix that part yet. It will show up on all of your pages. In your favorites and will also show up on the address bar.

Wait! I Don't Have A Domain!

Not a problem simply add to your page in the same place like this

What if your server doesn't support favicons??? write them refer them to www.favicon.com

They will change their policy this is really popular as i'm sure they use favicon's themselves... and it would be in their interest to offer this....Angelfire is one who does not accept this extension as of yet.

If they don't in the mean time you can try this

not using the name favicon.ico

It doesn't always work but worth a shot...

Also you can do a search on a search engine such as google and you can find a site that makes them. and adopt one.. i like the personal touch myself....
There is a free program that you can also use to make a favicon though I have never tried it you can read about it here and download it...
Icon Edit 32
You can make any kind of icons in either program even for your desktop theme.....

Click Below

If you are a tutorial Tester Please Pick Up a gift Or
If you would like to see some testers results

I Hope You Enjoyed This Tutorial
And Return To Try Out Some More

Please link to this page so others can visit the site!

http://sunshinedesigns.net

Please Sign Guestbook Below