skip to content W3C SVG

SVG Favicon

Publish date: Mar 14, 2023
Last updated: Mar 14, 2023
Tags:

1. Go to similar sites like SVG Repo.

2. Download your icon.

Download icon.

3. Optimize SVG to similar sites like Vecta Nano.

Optime SVG.

4. Cleanup.

Change characters " to ' and # to %23.

Before

<svg
    xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="-4 0 256 256" preserveAspectRatio="xMidYMid" fill-rule="evenodd"
    xmlns:v="https://vecta.io/nano">
    <path d="M210 256c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zm-86 48c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zm-86 48c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zM24.587 103.581L37 16c0-8.837 7.163-16 16-16h53c8.836 0 16 7.163 16 16l-3.927 49.875-93.486 37.706z" fill="#1c8cea"/>
    <path d="M237 140c0 17.673-14.667 32-32 32H43c-17.673 0-32-14.327-32-32l4-24 99-40c10.485-2.905 17.053 1.006 21.101 2.777l82.043 31.615C228.794 115.175 237 126.627 237 140z" fill="#ff0078"/>
    <path d="M110.595 126.616l21.437-49.813c1.754-4.055 6.463-5.92 10.518-4.167l16.521 7.146a8 8 0 0 1 4.167 10.518l-21.437 49.813a8 8 0 0 1-10.518 4.167l-16.521-7.145c-4.055-1.754-5.921-6.464-4.167-10.519z" fill="#b6cdd5"/>
    <path d="M65 19h56c4.418 0 8 3.572 8 7.978l-2 17.462c0 4.406-3.582 7.978-8 7.978H62c-4.418 0-8-3.572-8-7.978l3-17.462C57 22.572 60.582 19 65 19z" fill="#ff0078"/>
</svg>

After

<svg
    xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='-4 0 256 256' preserveAspectRatio='xMidYMid' fill-rule='evenodd'
    xmlns:v='https://vecta.io/nano'>
    <path d='M210 256c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zm-86 48c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zm-86 48c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zM24.587 103.581L37 16c0-8.837 7.163-16 16-16h53c8.836 0 16 7.163 16 16l-3.927 49.875-93.486 37.706z' fill='%231c8cea'/>
    <path d='M237 140c0 17.673-14.667 32-32 32H43c-17.673 0-32-14.327-32-32l4-24 99-40c10.485-2.905 17.053 1.006 21.101 2.777l82.043 31.615C228.794 115.175 237 126.627 237 140z' fill='%23ff0078'/>
    <path d='M110.595 126.616l21.437-49.813c1.754-4.055 6.463-5.92 10.518-4.167l16.521 7.146a8 8 0 0 1 4.167 10.518l-21.437 49.813a8 8 0 0 1-10.518 4.167l-16.521-7.145c-4.055-1.754-5.921-6.464-4.167-10.519z' fill='%23b6cdd5'/>
    <path d='M65 19h56c4.418 0 8 3.572 8 7.978l-2 17.462c0 4.406-3.582 7.978-8 7.978H62c-4.418 0-8-3.572-8-7.978l3-17.462C57 22.572 60.582 19 65 19z' fill='%23ff0078'/>
</svg>

5. Encode SVG in HTML element.

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

6. Insert code in head.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='-4 0 256 256' preserveAspectRatio='xMidYMid' fill-rule='evenodd' xmlns:v='https://vecta.io/nano'><path d='M210 256c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zm-86 48c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zm-86 48c-20.987 0-38-17.013-38-38s17.013-38 38-38 38 17.013 38 38-17.013 38-38 38zm0-48a10 10 0 1 0 0 20 10 10 0 1 0 0-20zM24.587 103.581L37 16c0-8.837 7.163-16 16-16h53c8.836 0 16 7.163 16 16l-3.927 49.875-93.486 37.706z' fill='%231c8cea'/><path d='M237 140c0 17.673-14.667 32-32 32H43c-17.673 0-32-14.327-32-32l4-24 99-40c10.485-2.905 17.053 1.006 21.101 2.777l82.043 31.615C228.794 115.175 237 126.627 237 140z' fill='%23ff0078'/><path d='M110.595 126.616l21.437-49.813c1.754-4.055 6.463-5.92 10.518-4.167l16.521 7.146a8 8 0 0 1 4.167 10.518l-21.437 49.813a8 8 0 0 1-10.518 4.167l-16.521-7.145c-4.055-1.754-5.921-6.464-4.167-10.519z' fill='%23b6cdd5'/><path d='M65 19h56c4.418 0 8 3.572 8 7.978l-2 17.462c0 4.406-3.582 7.978-8 7.978H62c-4.418 0-8-3.572-8-7.978l3-17.462C57 22.572 60.582 19 65 19z' fill='%23ff0078'/></svg>" type="image/svg+xml" />
  <meta name="title" content="Home" />
</head>

Reply via email...