I just learned how to make a favicon, so thought I would do a tutorial on designing your own favicon. A favicon is a small graphic image, 16 x 16 pixels in size, that can have up to 16 colors. It is saved in a special format, .ico, so browsers will recognize it as a favicon. Once it is created, you can upload it to the root folder of your website and it will show at the beginning of your url address at the top of your browser, in bookmarks of people who have bookmarked your site, and on browser page tabs. It is a fun way to give your site a little more individuality. (See my new teddy favicon on my browser blog address.)
Materials:
- graphic program that uses layers and can have the file height and width set in pixel units - such as Adobe Illustrator. I find a vector drawing program is easiest for designing favicons as flat shapes are easily created and you get smooth lines and curves when you draw. Also, the sharpness of the image doesn't change when you increase or decrease the magnification. Inkscape is a free vector drawing program that is easy to use.
- design sketch - optional. You can work from a sketch or just design from scratch in the graphic program.
Directions- Design and Make Favicon Tutorial:
1. Open up a graphic program that uses layers. I am using Adobe Illustrator, a vector drawing program. Open a new file 16 pixels by 16 pixels in size.
2. Change the file magnification so it is a good working size for you. I am using 800%.
3. Decide if you want your background dark or light. For favicons to show up well, either a medium to dark colored background with a light colored image or a bold dark or bright image on a light background works best. There needs to be enough contrast for the image to read well in such a tiny space. The image should also be bold enough to show up well, as thin lines tend to disappear in the favicons.
4. The first layer will become the background layer.
Here I have made a square to work as both a border and background. I used a dark color for the border and a medium color for the background. I drew the square from one top corner to the opposite bottom corner starting and ending exactly on the artboard corner edges. Holding down the "shift" key will create a square rather than a rectangle. I set the border stoke to "align inside". This keeps the design from going outside the 16 pixel size. This square is on the bottom layer and will become the background for the design.
5. Now add a new layer. We will draw our design on this layer.
There isn't a lot of space to make a very detailed design, so it's best to keep your design fairly simple. Initials can make a simple, but effective favicon design.
6. Pick a font you would like to use. The letters will show up better if they have thick lines. You can try out different fonts on the space outside the artboard. You can type two letters one after the other or type them as separate objects so you have more control over their placement. If they type out black, you can select them to change the color. These initials should be on the second layer which is on top of the first layer.
7. Type usually appears in black as default. In the previous image, I have selected all the intials. Then I changed the color to red for more variations.
8. I can select the initials individually to try out and compare several colors. I can also change the stroke size to make thin letters thicker.
9. Here I have selected an initial set and moved it over the square background. Because it is in a separate layer above the square, it automatically appears over the square.
10. The initial set is too large. I use the free transform tool on the tools panel to resize it to fit inside the square. I can hold down the shift key to keep the original proportions, or change the proportions to fit the square better. Then I move it to the desired position.
11. Here is the first finished favicon design.
12. You can layer background shapes under your design layer. Put each object on a new layer to keep all objects separate for easy modification later. Here I have added a red octagon over a pale blue square.
13. I am using the same initial set with new colors (purple stroke and white fill) to place over the background shapes.
14. Again I have to resize the initials to fit the square.
15. Here is a second finished favicon design option.
16. After you have finalized a favicon design, you can save it as a gif. or png. I saved it as a gif. The design is the same size as the file. The program will automatically save what is on the artboard. I have used "save for web and devices" as this gives me easily seen options for number of colors. If your favicon design is more than 16 colors, reduce the colors to 16 and then save it.
17. You can also use simple drawings for a favicon. Here I have drawn a ladybug over a white background. I used bright and dark colors so it will show up well. The second image shows the ladybug drawing over a background square with a border.
Here are some more examples of favicons using initials.
18. After you have saved your image, you can generate an icon from it using an online favicon generator such as: the FavIcon Generator at dynamicdrive.com or FavIcon from Pics. On the site you can browse to find your graphic, upload it, and it will be saved with the favicon required .ico format. You then download it to your computer, and upload it to the root folder of your website. If you have problems with the favicon showing up, you can add this code to your header section:
<link href="favicon.ico" rel="shortcut icon" />
Favicons can also be added to your blog. Here are some posts on how to add a favicon to various blog types including self-hosted blogs, Blogger, and Wordpress.com blogs.
codex.wordpress.org "Creating a Favicon"
iSimplyBlog.com "Favicon for your Blog - How To"
tutzone.org "How to Add Favicon to Blog"
For inspiration on designing your own favicon, Daniel Burka of Delta Tango Bravo has a collection of favorite favicons he found on the web here.
