CODEWITHSUNDEEP
htmlsvgfavicon
Nadav Tasher
Nadav Tasher

Reputation: 351

Embed SVG icon into html

I need embed my SVG icon directly into the html file, not as a link to an SVG file.

I have tried to add <link>SVG file contents</link> to the html but it didn't work.

My html's <head>:

<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
<meta name="theme-color" content="#568342"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-title" content="My App"/>
<link rel="apple-touch-icon" href="images/icon_apple.png"/>
<link rel="icon" href="images/icon.png"/>
<title>My App</title>
</head>

Upvotes: 2

Views: 6458

Answers (1)

ccprog
ccprog

Reputation: 21811

You can use a data URL as a value for the href attribute of the <link>. Like enxaneta remarked, the compatibility data strongly suggest that you first convert the SVG to a PNG (easiest is exporting it from a vector grafics UI). After that you would convert it to a data url, for example with this online tool.

If you insist on using the SVG directly, this online utility is better suited for SVGs, you can drop in the source text.

Your final result looks like this:

<link rel="icon" href="data:image/png;base64,...">

or

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

Upvotes: 4

Related Questions