10

I have a single HTML page and I want to create a favicon from inline svg and use it inside the HTML. How to proceed?

This is my current attempt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" sizes="21x21" href="favicon16.svg">
    <title>Document</title>
</head>
<body>
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>
</body>
</html>
Jean-Francois T.
  • 11,549
  • 7
  • 68
  • 107
user15317824
  • 370
  • 6
  • 15

5 Answers5

18

  1. You can encode your SVG with this tool https://yoksel.github.io/url-encoder/

  2. Add the encoded SVG in this markup

<link rel="icon" type="image/svg+xml"
      href="data:image/svg+xml,[YOUR ENCODED SVG HERE]" />
vdegenne
  • 12,272
  • 14
  • 80
  • 106
Jeremie
  • 646
  • 8
  • 24
5

It can be dataURL, and doesn't need to use base64. You only need to exchange "#" with "%23", place all in one line, and be carefull with quotes, of course. My search-engines page favicon:

<link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.8 .8 14.4 14.4'><path d='M10 8.99a1 1 0 00-.695 1.717l4.004 4a1 1 0 101.414-1.414l-4.004-4A1 1 0 0010 8.99z' fill='%2380b0ff' stroke='%235D7FDDaa' stroke-width='.3'/><path d='M6.508 1C3.48 1 1.002 3.474 1.002 6.5S3.48 12 6.508 12s5.504-2.474 5.504-5.5S9.536 1 6.508 1zm0 2a3.486 3.486 0 013.504 3.5c0 1.944-1.556 3.5-3.504 3.5a3.488 3.488 0 01-3.506-3.5C3.002 4.556 4.56 3 6.508 3z' fill='%2380b0ff' stroke='%235D7FDDaa' stroke-width='.3'/></svg>">

But the proper way it should be:

<link rel="shortcut icon" href="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='.8%20.8%2014.4%2014.4'%3e%3cpath%20d='M10%208.99a1%201%200%2000-.695%201.717l4.004%204a1%201%200%20101.414-1.414l-4.004-4A1%201%200%200010%208.99z'%20fill='%2380b0ff'%20stroke='%235D7FDDaa'%20stroke-width='.3'/%3e%3cpath%20d='M6.508%201C3.48%201%201.002%203.474%201.002%206.5S3.48%2012%206.508%2012s5.504-2.474%205.504-5.5S9.536%201%206.508%201zm0%202a3.486%203.486%200%20013.504%203.5c0%201.944-1.556%203.5-3.504%203.5a3.488%203.488%200%2001-3.506-3.5C3.002%204.556%204.56%203%206.508%203z'%20fill='%2380b0ff'%20stroke='%235D7FDDaa'%20stroke-width='.3'/%3e%3c/svg%3e">

...so the link from Jeremie can be useful.

jacek
  • 51
  • 1
  • 2
0

You will need to escape two characters :

// # 1
const encodedSVG = svg.replace(/\"/g, '%22').replace(/\#/g, '%23')

const link = document.head.querySelector('link[rel="icon"]')
link.href = `data:image/svg+xml,${encodedSVG}`

That's pretty much it.

# 1 if your SVG is an element, convert it in a string before hand

const svg = svgElement.outerHTML
...
vdegenne
  • 12,272
  • 14
  • 80
  • 106
0

Go here https://www.restonk.com/SVGEncoder

Drag and drop your SVG file on the page or paste the SVG into the input box.

Copy the from the text box labeled "favicon" and paste it into the of your html document. The web site has both url encoding and base64 options and it does url encoding properly.

Josh Oshiro
  • 41
  • 4
-1

Favicon need to be an external file, or an [DataURL][1], you can use SVG, but it needs to be saved as a standalone file, and pointed into the href like "favicon16.svg". Or converted to base64 and inserted as DataURL Read more

But if you are trying to create custom favicon on-the-fly using SVG, I recommend you use this approach: SVG to Base64, using base64 as favicon and how to change favicon dynamically

Sergio Carvalho
  • 27
  • 5
  • 3
    No, it can be a [data URL](https://stackoverflow.com/questions/5199902/how-to-save-up-another-precious-http-request-for-the-tiny-favicon) – Robert Longson Apr 03 '21 at 20:54
  • Sorry, I was trying to say the "easy way" and in the second part the bas64 approach, I'm not fluent in English, so I have expressed myself badly. I've edited with the dataURL – Sergio Carvalho Apr 05 '21 at 12:21