Use inline SVG as favicon

Question

<!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>

Am only having a single page HTML with, javascript is inline, I want to create a favicon and use it inside the HTML. any help, please.

score 5 · Answer 1 · answered Jun 20 '21 at 01:18

5

You can encode your SVG with this tool https://yoksel.github.io/url-encoder/
Add the encoded SVG in this markup

<link rel="icon" href="data:image/svg+xml,[YOUR ENCODED SVG HERE]" type="image/svg+xml" />

answered Jun 20 '21 at 01:18

Jeremie

241
2
15

jacek · Answer 2 · 2022-02-09T00:12:58.850

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.

Sergio Carvalho · Answer 3 · 2021-04-05T12:19:16.200

0

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

edited Apr 05 '21 at 12:19

answered Apr 03 '21 at 20:25

Sergio Carvalho

29
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

Use inline SVG as favicon

3 Answers3