Favicons in Webflow

Expert Favicons use

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
800
Favicon formats
801
Advanced Favicons use
810
Expert Favicons use
820
No items found.
Published
November 10, 2022
Updated
in lightbox

Look. Realistically, stuff I put here will never be useful in Webflow. You should probably just turn around and walk away.

The are the dusty tomes in the restricted section at Hogwarts, meant for the wizarding geeks. If that's you, have fun, and don't hurt anyone.

Inlining favicons

Just like images, you can actually inline favicon artwork as base64-encoded content, using the data: scheme, like this;

<link rel="icon" href="data:;base64,iVBORw0KGgo=">

The null favicon

For when you really don't want a favicon, but browsers are trying to retrieve it anyway.

<link rel="icon" href="data:,">

Get the favicon from any site, using a Google API

From Lucy Linder;

Google offers a secret URL that can automatically pull the favicon image of any domain.

https://www.google.com/s2/favicons?domain=${domain}&sz=${size}

Videos
No items found.
Table of Contents
Comments
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.