What favicons does my site have?
What favicons does my site need?
That's up to you, but generally I've found that Webflow's favicon approach is adequate for my purposes.
Note;
Technically, Webflow's current favicons appear to violate Google's requirements in two ways;
- The multiple of 48px requirement
- The same-domain URL requirement
I've never had an issue with this, however it is concerning.
<link href="https://assets.website-files.com/59aa30d4b0f23d0001bac49f/59c1d70a11c98c000172ca8f_favicon-32.png" rel="shortcut icon" type="image/x-icon"/>
<link href="https://assets.website-files.com/59aa30d4b0f23d0001bac49f/59c1d70f7333f20001b08711_favidon-256.png" rel="apple-touch-icon"/>
How favicons are found
There are two ways favicons are located by a requestor;
Default location
Historically, the default path of /favicon.ico is where favicons were placed. This was just an icon file, named and placed in the root folder of a website.
NOTE: This is not necessary. Webflow does not use the .ico file format, or respond to these requests with a favicon.
HTML <link> tags
Specific <link> tags in your HTML <head> are recognized as specifying favicons for various uses.
<link rel="icon" href="/path/to/favicon.ico">
The rel attribute is used to describe the type and use of the favicon.
- icon
- apple-touch-icon
- apple-touch-icon-precomposed
- shortcut icon
https://github.com/audreyfeldroy/favicon-cheat-sheet
https://gist.github.com/leommoore/6415005
https://www.alanwsmith.com/posts/favicon-sizes-and-code-cheat-sheet-2022-edition--20eocsq6hd7t
Microsoft Edge ( IE11 )
Edge requires a special file at /browserconfig.xml.
Webflow does not support the upload of arbitrary files. Could you redirect that to an external resource? Maybe. Do you need to worry about this? Probably not.
Creating custom tiles for IE11 websites
