is it possible to embed SVG favicon into HTML page-CodePudding

i have an html file with some javascript locally offline on my computer and want to enbed an svg favicon in that html file to show up in the browser without the need of an extra favicon.svg file. is it possible to get this working some how?

<html>
 <head>
  <link rel="icon" type="image/svg xml" href="favicon.svg">
  ...

so instead of <link rel="icon" type="image/svg xml" href="favicon.svg"> i want to embed the favicon.svg in the html page.

here an example of favicon.svg

<svg
 width="256"
 height="256"
 viewBox="0 0 256 256">
 <rect
  style="fill:#FF3010;stroke:none"
  width="256"
  height="256"
  x="0"
  y="0" />
</svg>

according to Embed SVG icon into html, i tried

just paste the svg content:

<link rel="icon" href="data:image/svg xml,<svg width="256" height="256" viewBox="0 0 256 256"><rect style="fill:#FF3010;stroke:none" width="256" height="256" x="0" y="0" /></svg>">

replaced the double quotes (") by single quotes ('):

<link rel="icon" href="data:image/svg xml,<svg width='256' height='256' viewBox='0 0 256 256'><rect style='fill:#FF3010;stroke:none' width='256' height='256' x='0' y='0' /></svg>">

translated special characters to %XX format:

<link rel="icon" href="data:image/svg xml,">

translated svg content to base64:

<link rel="icon" href="data:image/svg xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHN0eWxlPSJmaWxsOiNGRjMwMTA7c3Ryb2tlOm5vbmUiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB4PSIwIiB5PSIwIiAvPjwvc3ZnPg==">

but in non of the cases the favicon showed up in the browser.

i tried firefox-esr 102.5.0 and chromium 104.0.5112.105.

the favicon as extra favicon.svg file is working, but the embedded data are not working.

CodePudding user response：

You need to tell the browser what kind of image/document it is going to display. For SVG documents that means including an XML declaration and the XML namespace.

So, your SVG document should look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"
  viewBox="0 0 256 256">
  <rect style="fill:#FF3010;stroke:none" width="256" height="256"
    x="0" y="0" />
</svg>

And then include it just like you write:

<html>
 <head>
  <link rel="icon" type="image/svg xml" href="data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjU2IgogaGVpZ2h0PSIyNTYiCiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI CiA8cmVjdAogIHN0eWxlPSJmaWxsOiNGRjMwMTA7c3Ryb2tlOm5vbmUiCiAgd2lkdGg9IjI1NiIKICBoZWlnaHQ9IjI1NiIKICB4PSIwIgogIHk9IjAiIC8 Cjwvc3ZnPgo=">
  ...

You can always test if it works by opening the SVG in the browser.

Now, I only tested this using a base64 data URL in Firefox. Maybe in some cases you run into an issue with the origin (CORS). To mitigate this you need a Content-Security-Policy in your HTTP response or at least a Content Security Policy meta element in your HTML that states that data URLs are OK. Something like this:

<meta http-equiv="Content-Security-Policy" content="default-src data:" />

Here you can see the data: schema mentioned in the policy.

CodePudding user response：

yes, thank you. just including the namespace stuff did the trick

<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:svg="http://www.w3.org/2000/svg" 
...

<html>
 <head>
  <link rel="icon" href="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...
...

thank you!