Complete guide about favicon
Complete guide about favicon

Audrey Roy has written this cheat sheet favicon sizes/types on her GitHub account to help your website shine in society.

The purpose of this initiative, the "favicon-cheat-sheet" repository, is to serve as an "Obsessive cheat sheet to favicon sizes/types", specifically a "painfully obsessive" resource detailing the various favicon sizes and types needed for web projects.

The primary goals of this extensive guide include:

  • Standardizing Best Practices: The cheat sheet compiles information from numerous sources to establish best practices for favicon implementation.

  • Detailing Image Requirements: It specifies the necessary and optional image sizes and names for various devices and platforms, including default use (favicon.ico at 16x16 & 32x32), iOS and Android touch icons (e.g., 180x180, 196x196), and sizes for Windows 8 Start Screen tiles (e.g., 144x144, 270x270).

  • Providing HTML Markup: It instructs developers on the optimal HTML required for cross-browser and cross-device compatibility, detailing basic requirements (like placing favicon.ico in the root), optional but encouraged tags (like <link rel="apple-touch-icon-precomposed">), and very optional, obsessive tags for maximum coverage.

  • Addressing Technical Specifications: The guide explains that an .ico file is a container for multiple .bmp or .png icons of different sizes. It also provides specifications for creating SVG files for pinned tabs in Safari 9+.

  • Fostering Community Improvement: The initiative actively seeks contributions and justification via pull requests to add or change content, reflecting the note that the sheet "may be in flux as I learn new things about favicon best practices".