Favicon for SaaS Landing Pages: A Practical Setup Guide

A SaaS landing page does not need a complicated favicon package. It needs an icon that remains recognizable at tab size, a stable URL, and markup that browsers and crawlers can understand.

That makes the favicon a small product-quality detail, not a proven conversion lever. Treat it as part of your interface and brand system, then verify it on real devices instead of attaching an unsupported revenue claim to it.

A practical favicon stack

The HTML standard defines rel='icon' for page icons and allows sizes='any' for scalable resources such as SVG. An ICO file is still a useful compatibility fallback, while an Apple touch icon is optional for people who add the site to an Apple home screen.

<link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Use filenames and attributes that match the files you actually ship. The HTML standard explains the icon relationship and the meaning of the sizes attribute. Apple's Web Clip documentation describes the touch-icon link.

Design for the smallest surface

Use a symbol, not a wordmark

A full product name usually becomes illegible in a browser tab. Start with the simplest distinctive shape from the logo, then inspect it at 16×16 and 32×32 pixels. If the silhouette collapses, remove detail before increasing sharpness.

Check light and dark browser chrome

Transparent dark artwork can disappear against dark tab bars, and very pale artwork can disappear on light ones. Test both environments. If one asset cannot retain contrast, consider an SVG with a carefully tested color-scheme treatment; the dark-mode favicon guide covers that option.

Keep the URL stable

Changing the icon file at the same URL can leave browser and crawler caches showing an older image. When the artwork genuinely changes, use a deliberate versioned URL and update the link once rather than rotating it repeatedly.

Google Search has separate eligibility rules

A browser tab rendering correctly does not guarantee the same icon will appear in search results. Google's current guidance says the favicon must be square and at least 8×8 pixels, recommends an image larger than 48×48 pixels, and requires both the home page and icon file to be crawlable. Google also states that display is not guaranteed.

Use the Google Search favicon documentation as the source of truth, and keep the favicon URL stable. Avoid turning the 48-pixel recommendation into a false claim that every browser requires exactly 48×48.

Verification checklist

• Open the favicon URL directly and confirm it returns an image with a successful response.
• Inspect the page source and confirm every declared icon file exists.
• Test a normal tab, a pinned or saved shortcut if relevant, and both light and dark themes.
• Check the icon at small sizes; do not judge only from the full-size logo.
• After deployment, allow caches and search crawlers time to refresh.

If you need to inspect an existing site's files before changing anything, start with the favicon download guide. A small, verified icon set is better than a large package whose files and declarations disagree.