Menu
Can a pure SVG document arriving at a browser, support a favicon.ico specification? My case is machine-generated pure SVG, no <html> or <head> tags available.
657
A custom favicon is a great way to polish a web project. It displays on desktop browser tabs, and also inside "save for later" readers, other blog posts linking to your site, and more. Traditionally this has been done with the . ico file type, but recently browsers have allowed use of SVG, a vector format.
SVG would be nice, but is not supported by all browsers. So the easiest solution is still to just use PNG images. Google explicitly says they don't support 16x16 or 32x32 icons. For Google results, you need to include at least one icon that is a multiple of 48x48.
png, . gif, or . jpg files and your favicon will work in most modern browsers, the lone exception being Internet Explorer, which only supports . ico format as of IE9.
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
Yes, since SVG is XML, you can add the (x)html link element anywhere in the SVG:
<link xmlns="http://www.w3.org/1999/xhtml" rel="shortcut icon" href="favicon.ico" />
There's absolutely no need to wrap this in foreignObject.
I recommend putting the link element as a child of a defs element though, just to let the SVG engines know that it can be skipped for the actual SVG rendering.
Do note that this isn't "pure" SVG; it's an xhtml/svg hybrid — but it should work in all the browsers that support SVG.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
