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:
- For best results, start with a smallish square image
- I’m taking a large image from Freepik and extracting the smaller of the butterflies using Gimp (free Image software).
- Other Gimp related How-Tos
- Cut/crop as close to the image as possible
- 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.
- Under the Image Upload tab, use Choose File to find your square image
- Click Image Upload
- Choose 16 x 16 Icon (Favicon.ico Icon Size) from the dropdown menu
- Click Generate It!
- So far, I’ve found that my favorite images generated are the — Sharpen Twice —
- Click Download This!
- Favicon actual size
Version 2 – Drawing your own:
- favicon.cc is the best place I’ve found to clearly draw your own favicon.
- 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.
- The instructions are printed right on the page for you
Original butterfly image Designed by Freepik