CODEWITHSUNDEEP
htmlsvgfavicon
beta-tester
beta-tester

Reputation: 75

is it possible to embed SVG favicon into HTML page

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,%3Csvg%20width=%22256%22%20height=%22256%22%20viewBox=%220%200%20256%20256%22%3E%3Crect%20style=%22fill:#FF3010;stroke:none%22%20width=%22256%22%20height=%22256%22%20x=%220%22%20y=%220%22%20/%3E%3C/svg%3E">

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.

Upvotes: 2

Views: 811

Answers (2)

beta-tester
beta-tester

Reputation: 75

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!

Upvotes: 0

chrwahl
chrwahl

Reputation: 13070

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.

Upvotes: 4

Related Questions