Advanced Favicons use | Favicons in Webflow

Published

November 10, 2022

Updated

VIEW THE LESSON

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.




  
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }

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.

‍