# audreyfeldroy/favicon-cheat-sheet **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/audreyfeldroy-favicon-cheat-sheet).** 9,902 stars · 399 forks · MIT ## Links - GitHub: https://github.com/audreyfeldroy/favicon-cheat-sheet - awesome-repositories: https://awesome-repositories.com/repository/audreyfeldroy-favicon-cheat-sheet.md ## Description This project is a comprehensive favicon specification guide and browser compatibility matrix. It provides a detailed reference for the image sizes, file formats, and HTML markup required to ensure website icons display correctly across modern and legacy browsers and devices. The resource includes specific technical guides for implementing SVG favicons that use embedded CSS media queries to support system light and dark mode. It also provides a reference for web app manifests and the specific image dimensions needed for installable progressive web applications. The documentation covers broader capabilities such as cross-platform icon optimization for mobile home screens and operating system tiles, browser cache management for forcing icon refreshes, and strategies for legacy browser support. The project is delivered as static site documentation generated from markdown files. ## Tags ### Web Development - [Browser Compatibility Matrices](https://awesome-repositories.com/f/web-development/browser-compatibility-matrices.md) — Ships a detailed compatibility matrix for favicon sizes and formats across various browsers and devices. - [Favicon Configurations](https://awesome-repositories.com/f/web-development/favicon-configurations.md) — Provides a comprehensive reference for defining the correct image sizes and HTML tags for website favicons across all browsers. - [Browser Compatibility & Utilities](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-compatibility-utilities.md) — Provides a comprehensive mapping of icon dimensions and HTML markup to ensure consistent behavior across different web browser environments. - [Legacy Browser Support](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-compatibility-utilities/legacy-browser-support.md) — Create a fallback strategy using multi-resolution files and specific image sizes to support older versions of browsers. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet#readme)) - [Favicon Specifications](https://awesome-repositories.com/f/web-development/favicon-specifications.md) — Lists the exact image sizes and formats required for favicons to display correctly across all platforms. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet#readme)) - [Web App Manifests](https://awesome-repositories.com/f/web-development/web-app-manifests.md) — Provides specifications for configuring web app manifests to enable PWA installation and icon display. - [Browser Compatibility Configurations](https://awesome-repositories.com/f/web-development/browser-compatibility-configurations.md) — Defines fallback image strategies and sizes to maintain icon compatibility with legacy browsers. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet/blob/main/README.md)) ### Part of an Awesome List - [Icon Support](https://awesome-repositories.com/f/awesome-lists/devtools/icon-support.md) — Identifies the necessary image dimensions and markup to ensure icon support across different browsers. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet/blob/main/README.md)) - [Theme-Adaptive](https://awesome-repositories.com/f/awesome-lists/devtools/icons/theme-adaptive.md) — Use SVG favicons with embedded CSS media queries to switch the icon appearance based on the system theme. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet#readme)) - [Adaptive Implementation Guides](https://awesome-repositories.com/f/awesome-lists/devtools/svg-optimization/adaptive-implementation-guides.md) — Provides detailed instructions for creating adaptive SVG favicons using embedded CSS media queries for dark mode support. ### Graphics & Multimedia - [Favicons](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/graphics-media-assets/media-assets/favicons.md) — Acts as a comprehensive reference guide for the image sizes and file formats required for browser and device favicons. ### Software Engineering & Architecture - [Device-Specific Dimension Mapping](https://awesome-repositories.com/f/software-engineering-architecture/modular-provider-interfaces/cloud-provider-mappings/icon-asset-mappings/device-specific-dimension-mapping.md) — Provides a comprehensive mapping of required image resolutions to the corresponding devices and browsers. - [Responsive Icon Mapping](https://awesome-repositories.com/f/software-engineering-architecture/modular-provider-interfaces/cloud-provider-mappings/icon-asset-mappings/responsive-icon-mapping.md) — Maps specific image dimensions and formats to the requirements of different devices and browsers. ### User Interface & Experience - [System Theme Adaptation](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/system-theme-adaptation.md) — Guides the use of media queries to automatically toggle icon visuals based on the user's system theme. - [Platform-Adaptive Icons](https://awesome-repositories.com/f/user-interface-experience/icon-systems/platform-adaptive-icons.md) — Implements icons that automatically adapt their visual style to match the host operating system's theme. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet/blob/main/README.md)) - [Embedded SVG Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/embedded-svg-styling.md) — Explains how to embed CSS media queries within SVGs to support automatic light and dark mode switching. - [Dark Mode Support](https://awesome-repositories.com/f/user-interface-experience/dark-mode-support.md) — Guides the implementation of SVG favicons that automatically switch appearance based on system-level dark mode preferences. ### Data & Databases - [Icon Caching](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/icon-caching.md) — Addresses the challenge of clearing browser caches to ensure updated favicons are displayed. ([source](https://github.com/audreyfeldroy/favicon-cheat-sheet/blob/main/README.md)) ### DevOps & Infrastructure - [Cache Busting](https://awesome-repositories.com/f/devops-infrastructure/asset-caching-strategies/cache-busting.md) — Provides techniques for forcing browsers to download updated favicons via unique version strings in filenames. - [Cache Management](https://awesome-repositories.com/f/devops-infrastructure/cache-management.md) — Guides the management and invalidation of browser caches to force updates of website icons. ### Education & Learning Resources - [Technical Reference Guides](https://awesome-repositories.com/f/education-learning-resources/technical-reference-guides.md) — Provides a structured technical reference for configuring PWA manifest settings and image dimensions.