How to Make a Favicon

 

Heads Up: if you want a transparent background use a .png file type.

The simpler the image, the clearer the favicon.  Try to pick an icon that you feel matches your brand well.

Version 1 – With an image:

  1. For best results, start with a smallish square image
  2. I’m taking a large image from Freepik and extracting the smaller of the butterflies using Gimp (free Image software).
  3. Other Gimp related How-Tos
  4. Cut/crop as close to the image as possible
  5. I like to use the free online icon generator Prodraw because they have different sharpen levels, and I’ve produced some really clear favicons with it.
  6. Under the Image Upload tab, use Choose File to find your square image
  7. Click Image Upload
  8. How to Make a Favicon - #6
  9. Choose 16 x 16 Icon (Favicon.ico Icon Size) from the dropdown menu
  10. Click Generate It!
  11. So far, I’ve found that my favorite images generated are the — Sharpen Twice
  12. #9
  13. Click Download This!
  14. #10
  15. Done!
  16. Favicon actual size     #11

Version 2 – Drawing your own:

  1. favicon.cc is the best place I’ve found to clearly draw your own favicon.
  2. That is, if you can draw decently with that thing.  I wouldn’t use it for the butterfly above, but have used it to make a well defined barcode icon.
  3. #13
  4. The instructions are printed right on the page for you

Original butterfly image Designed by Freepik