Design and Make a Favicon Tutorial

dark background with white initials

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:

  1. 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.
  2. 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.

graphic program with 16 x 16 px file open

2. Change the file magnification so it is a good working size for you.  I am using 800%.

16 px x 16 px file open in graphic program

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.

square background same size as file

5. Now add a new layer.  We will draw our design on this layer.

new layer added

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.

trying out various initials

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.

trying out various initials

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.

trying out different color combinations

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.

trying out initial-background combination

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.

resizing initials to fit inside box

11. Here is the first finished favicon design.

favicon design option 1

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.

octagon added in new layer

13. I am using the same initial set with new colors (purple stroke and white fill) to place over the background shapes.

trying out intial design over octagon

14. Again I have to resize the initials to fit the square.

resizing initials

15. Here is a second finished favicon design option.

favicon option -2

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.

simple drawing without background color

ladybug design with colored background and border

Here are some more examples of favicons using initials.

favicon option favicon option

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.

Website Up - Using Dreamweaver and Illustrator

I finally got my website, ellifolks.com, up and working.  It's here, if you would like to take a look.  I designed the site in Dreamweaver.  The graphics were made in Adobe Illustrator, and then were saved "for web and devices" as gifs.  Graphics can be added to Dreamweaver from inside the root site folder there.  I think Dreamweaver has a pretty steep learning curve, and am just starting to get the feel for it.  The lynda.com videos were very helpful, as was the book Adobe Dreamweaver CS3 Hands-On Training by Garrick Chow taken from the lynda.com Dreamweaver CS3 videos.

A blobby shape is refined by redrawing pencil lines in Adobe Illustrator. The first drawing shows the original drawing in Illustrator. The second drawing shows a revised version after redrawing the left side. The third drawing is the revised version after redrawing the right side. The fourth drawing has a face and ears added to the final revised face shape. Here I have "edit selected paths" checked and "within _ pixels" set to 12. You can play around with the settings to see the different effects you can get.

When drawing in Illustrator, I usually use the pencil.  I like that you can adjust lines that are selected by redrawing them.  The old line is then automatically replaced with the new one.  This is a lot faster than erasing and redrawing with a pencil and paper.  It only works for new lines or lines selected with the arrow tool that are within the distance you have set in the pencil tool preferences.  (Double click on pencil tool or hit "enter" on keyboard when pencil tool is active to bring up the pencil tool preferences.)  You can also manually select any line, and the pencil tool can then redraw it.

Hello and Welcome:

studio window

Monday -- The sun is streaming into my studio this morning from the little semicurcular window high on the wall of my studio.  We've had snow on the ground since November.  A sunny day will be so nice.

snowy front yard

I’ve been working on an eBay template through robshelp.com, a great site with tutorials, pre-designed templates, and lots of help with customizing your own eBay templates.   Between robshelp, an online course on “Web Design for Artists” at EbearZ University, and a few very helpful books Learning Web Design: A Beginner’s Guide to (X)HTML, StyleSheets, and Web Graphics by Jennifer Niederst Robbins and The Principles of Beautiful Web Design by Jason Beaird, the way internet pages and web graphics work is slowly starting to make some sense to me.

Jennifer Robbins' book takes you step-by-step through making a very simple web page and gradually introduces new concepts.  There are exercises in each chapter, so it really feels like a class.  So far, it is going at an easy enough pace that it is making sense even to me.  Jason's Beaird's book covers all aspects of web design including layout, color, images and text.

Sylviee and Dolly artist bear with companion

Sylvie and Dolly are now listed on eBay.  She is a whimsical little mohair bear who comes with Dolly, a needfelted companion.    She is 7 1/2" tall and has a silk dress and silk embroidered undies.  I really enjoyed working on all the details -- the hand-shading, embroidery, silk ribbon flower, etc.  You can visit her listing here.