CODEWITHSUNDEEP
htmlcsssvg
James Huang
James Huang

Reputation: 876

How do I use a svg path as a favicon

I want an svg as a favicon but I don't want to reference it as a separate file like so:

<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">

I want to put this icon I got from bootstrap as the icon without having to download it:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
</svg>

Is there a way to do this?

Upvotes: 0

Views: 1826

Answers (2)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21163

Only in CSS urls do the < and > need to be escaped. The only character that needs to be escaped is the # in color notations and links

fill="currentColor" does nothing; only when you use the SVG in the <body>

sizes attribute is not required, in my experiments

and the type attribute is no longer required say the docs.

Those Bootstrap Icons are bloated, can be made smaller, by multiplying the paths and changing viewBox

Makes the HTML file: (added linebreaks in the SVG only for demo purpose)

##Basecode

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <link
   rel="icon"
   href="data:image/svg+xml,YOUR SVG HERE"
  />
</head>
<body></body>
</html>

Fullcode

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <link
   rel="icon"
   href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'>
    <path d='M55 5a5 5 90 015-5h40a5 5 90 010 10h-10v11a70 70 90 0135 123l8 8a5 5 90 01-7 7l-9-9
     a70 70 90 01-37 11a70 70 90 01-37-11l-9 9a5 5 90 01-7-7l8-8a70 70 90 0135-123v-11h-10
     a5 5 90 01-5-5z
     m-46 49a25 25 90 1135-35a80 80 90 00-35 35z
     m126-44c-8 0-14 3-19 9a80 80 90 0135 35a25 25 90 00-16-44z
     m-50 40a5 5 90 00-10 0v39l-15 29a5 5 90 109 5l15-30a5 5 90 001-2v-40z'/>
   </svg>"
  />
</head>
<body></body>
</html>

Upvotes: 4

Paul LeBeau
Paul LeBeau

Reputation: 101810

Try using a data URL.

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='bi bi-alarm-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z'/%3E%3C/svg%3E" sizes="any" type="image/svg+xml">

Upvotes: 2

Related Questions