Learn how to make the favorites icon that appears next to the url in some browsers

 

1

a. Open a new file, make its dimensions are 16 x 16 px.

b. So we can see what we are doing fill your background layer with white. Hit D to reset your colors then Alt + Backspace to Fill.

c. Go to Edit>Preferences>Grid, Guides and Slices...

and use these settings:

Gridline every: 16 pixels

Subdivisions: 16

d. Hit Ctrl + ' to toggle the grid

e. Now go to Window>Status bar. It should be at the very bottom, make sure it's checked.

f. Now in the bottom right corner there is a number, it should say 100%, click on the number and change it to 1600%. This is the amount the image you are working on is zoomed in on. After you zoom in your image will look like this.

 

2

a. Now make a stroke around the edge of the image, to do this go to Select>All or hit Ctrl + A, next go to Edit>Stroke...
and use these settings:

Width: 1px
Color: (Black)
Location: Inside
Mode: Normal
Opacity: 100%

3

a. Now we are going to put something inside our frame. I chose a "D" (for dawn of design). Make the text, I would keep it to a maximum of 3 letters. About 10 or 8 point font, it doesn't really matter because we are going to resize it.

b. Next click on the move tool and look in the top left corner to make sure "Show bounding box" is checked.

c. Resize the letter so it is one pixel away from the border.

4

a. Apply these layer styles to the text layer.

16 x 16

5

a. Now Add some color to the background. Click on the background layer, then pick whatever color you want from the color picker, then hit ctrl + backspace to fill the background layer with that color. The code for the color I used is CFE3EA.

b. That's it for the artistic portion of making a favicon, now comes the technical part.

6

a. Go to Image>Mode>Indexed Color...

b. Go to File>Save As...

c. First change the file format to .BMP then name the file favicon.ico

d. Save the file in the same directory that you keep your webpages in.

e. After you upload the file to your server the icon should appear.

-Discuss this tutorial on the Forum