Hi! I uploaded a SVG favicon to the site settings, but when I get it through the _site.faviconMetaTags
query, the tags refer to resized SVG URLs.
This has problems:
- “Resizing” an SVG doesn’t make any sense (and indeed the returned SVG is the exact same). Having different URLs limits caching without any benefit.
- SVG icons are not that well supported (SVG favicons | Can I use... Support tables for HTML5, CSS3, etc). Crucially, Safari doesn’t support it. These browsers will not show a favicon then.
-
apple-touch-icon
are outright not supported at all if they’re not PNGs (Configuring Web Applications) - I haven’t tried
msApplication
icons, but I wouldn’t be surprised if they’re also not supported
How could it be solved?
- Convert the SVGs to PNGs when serving them.
- Return the favicon tags with different sizes pointing to these PNGs, and then add a single tag pointing to SVG for browsers that support it.
- (Extra) Could a tag be added pointing to an .ICO file?
Thanks!