[Latest] How to Optimize Your Favicon [Best Practice Generator]

After updating a website favicon and then seeing it never show up in Google Search results, I made and released a tool that generates a set of favicons designed to be easier for Google to pick up. I mostly built it for myself, but it is general-purpose enough, so please feel free to use it.

Favicon Best Practice Generator

Updates

2025-12-15 (reviewed the SEO/crawling rules)

Following Google Search Central’s favicon guide, I reflected requirements that often become SEO/compatibility pitfalls in the generator defaults and output guide. Google Search Central: Define a favicon to show in search results Google Search Central: Latest documentation updates

• Added output and warnings based on the assumption that you do not change the URL frequently.
• Clarified in the UI and explanation that there is one favicon per hostname (you cannot separate them by subdirectory).
• Added output-guide checklist items based on the assumption that Googlebot / Googlebot-Image can crawl the files (robots, authentication, 404s, etc.).
• As a rule, icon is recommended for rel, while shortcut icon is treated as not recommended from a standards-compliance perspective.

2025-11-30 (clarified that shortcut icon is not recommended and noted iOS selection behavior)

Based on MDN’s explanation of the rel attribute, I reflected the gap between standards compliance and real-world operation in the generator defaults. MDN: HTML attribute rel

• Removed rel="shortcut icon" from the default output (not recommended from a standards-compliance perspective).
• When outputting multiple <link rel="icon"> tags, reorganized the template around selection using type / sizes / media, including the output order and how attributes should be assigned (for example, SVG + PNG fallback).
• For iOS, clarified the policy of generating a separate apple-touch-icon, assuming it does not refer to rel="icon" or sizes.

2024-10-26 (updated for Google Search favicon requirements)

I reflected Google Search Central’s SEO requirements in the generator defaults. Google Search Central: Latest documentation updates Google Search Central: Define a favicon to show in search results

• Strengthened the input-image cropping/padding guidance based on a 1:1 (square) assumption.
• Changed the output to satisfy the minimum 8×8 requirement while recommending sizes larger than 48×48 (a design that provides at least one PNG larger than 48px).
• Added keep the favicon URL stable (do not change it frequently) as a strong warning.
• Reflected the one favicon per hostname limitation in the UI/output guide.

2024-04-16 (added maskable icons as a “practical standard for PWA compatibility” option)

To match Lighthouse audit requirements, I made it possible to enable maskable icon generation only when you are considering PWA support. Chrome for Developers: “Manifest doesn’t have a maskable icon”

• Optionally generate a Web App Manifest and output entries in icons that include purpose: "maskable" (or any maskable) (default: site.webmanifest; change it if needed).
• However, for cases like blogs that are not aiming to be PWAs, the design does not force a manifest to be emitted (to avoid increasing unnecessary files and expectations).

2024-04-12 (added favicon.svg generation and PNG/ICO fallbacks)

While incorporating the advantages of SVG favicons (scaling, theme adaptation, etc.), I templated a policy of keeping ICO/PNG files for unsupported environments. web.dev: Building an adaptive favicon

• Generate an SVG favicon and output <link rel="icon" ... type="image/svg+xml"> (default: favicon.svg; change it if needed).
• Also adopted a recommended template that references .ico first as a fallback (progressive enhancement).

2023-6-21

Created the Favicon Best Practice Generator