Favicons in Webflow

Advanced Favicons use

No items found.
Overview
What is a Favicon?
100
Where Do Favicons Appear?
101
Favicons in Google Search Results
102
Webflow & Favicons
What Favicons Does Webflow Support?
200
Creating Favicons
Creating a Favicon
300
Resources
References
600
Troubleshooting Favicons
601
What Favicons Does Google See?
601
Advanced
Technical Notes
Int
800
Favicon formats
801
Advanced Favicons use
Adv
810
Expert Favicons use
Expert
820
No items found.

Animated favicons

Can Favicons be animated?

Sometimes. I'll investigate this more later.

Use the same favicon for multiple sizes

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />

Dynamic favicons

No doubt, you've seen sites where the favicon changes to indicate what's happening on the site.

Yes, you could do that in Webflow, using script. However, make sure to keep your homepage icon consistent. Google doesn't appreciate it if you change that icon often.

Dark mode Favicons

Some cool stuff, shared by James Ross.

<link rel="icon" href="/favicon.ico" media="(prefers-color-scheme:no-preference)">

<link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme:dark)">

<link rel="icon" href="/favicon.ico" media="(prefers-color-scheme:light)">

Special Favicon formats

All browsers support the .ico format

SVG favicons

SVG favicons are NOT widely-supported, but Chrome supports them, and it seems likely this will grow in the future.

<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">

This is intriguing in part because it allows for certain dynamic capabilities like color schemes. See Thomas Steiner's work.


<!-- icon.svg -->

  
  


Note that SVG may not be ideal at smaller sizes, since it will be reduced by the browser, so make certain you specify the variations you want for those smaller favicons.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.