A banner of popular favicons

Favicons are the central icons of web development, and one of the finishing touches to any professionally-designed website. They started off as 16 x 16 pixel icons almost 20 years ago, but have since grown in both size and variety.

Due to this diversity, the easiest current way I know to generate the entire variety of formats and sizes required is Real Favicon Generator. However, if you want to learn more about favicon design, create a simple favicon, or explore other possibilities, I offer the following reading list:

Time: 1 hour

Prerequisites: Creating a favicon is usually one of the last steps to a website, but its design is strongly tied to it’s branding and visual presence (typically, one of the first).

  1. Site Finishing Steps
  2. Introduction to Favicons
  3. Icon Sizes & Design Considerations
  4. Create A Simple Favicon
  5. Multi-Resolution Favicons with GIMP
  6. SVG Favicons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.