Fav Custom

Customize the Favicon for a specific page

Overview

The Fav Custom attribute allows you to set a custom favicon for individual pages in your Webflow site. This is useful when you want different pages to display unique favicons without changing the global site favicon.

Attribute Syntax

Elements

fs-favcustom-element · string · required

Applied to an <img> element:

• src - The image element whose src attribute will be used as the favicon URL

Usage Examples

Basic Custom Favicon

<!-- Set custom favicon for a page -->
<img 
  src="/images/custom-favicon.png" 
  fs-favcustom-element="src" 
  style="display: none;">

Common Use Cases

Blog Category Icons

Display different favicons for different blog categories, helping users identify content types in browser tabs.

Product Page Branding

Show product-specific icons in the favicon for individual product pages in an e-commerce site.

Multi-Brand Sites

Use different favicons for different sections of a site that represents multiple brands or sub-brands.

Status Pages

Change the favicon to indicate system status (operational, issues, maintenance) on status pages.

Portfolio Projects

Display unique favicons for individual portfolio project pages to strengthen project branding.

Implementation Notes

Image Requirements

• Use .ico, .png, or .svg formats
• Recommended sizes: 16x16, 32x32, or 64x64 pixels
• Square images work best
• Keep file size small for fast loading

Hiding the Image Element

Since the image is only used for its src attribute, you should hide it using:

.hidden {
  display: none;
}

Or inline styles:

<img src="..." fs-favcustom-element="src" style="display: none;">

CMS Integration

In Webflow CMS template pages, you can use dynamic fields:

1. Add an image field to your CMS collection (e.g., “Custom Icon”)
2. Bind the image element to this field
3. Add the fs-favcustom-element="src" attribute
4. Each collection item can now have its own favicon

The custom favicon only applies to the specific page where the attribute is present. It does not affect other pages in your site.

For best browser compatibility, ensure your custom favicon images are optimized and available in multiple sizes.