How to Make a Favicon From an SVG Icon

By LinearAndLoom · 13 November 2026 · 3 min read

Turn an SVG icon into a complete favicon set: the four files a modern website needs, the HTML to paste and how to make it work in dark mode.

A favicon is the small image in a browser tab, in bookmarks and on a phone's home screen. You no longer need dozens of sizes. Four files and a few lines of HTML cover every current browser and device.

globe star bookmark monitor smartphone code

Pick an icon that survives 16 pixels

A favicon is often shown at 16 by 16 pixels, so detail disappears. Choose a solid icon with a simple, bold shape. Thin outline icons fade at that size.

One note on licensing: you may use an icon from this site as the favicon of your website. You may not register it as a trademark or logo. See the license.

The four files you need

favicon.svg for current browsers. One vector file, sharp at any size.
favicon.ico at 32 by 32 pixels, for older browsers and tools that look for this exact name.
apple-touch-icon.png at 180 by 180, for iPhone and iPad home screens.
icon-192.png and icon-512.png for Android and installable web apps.

Step 1: Make favicon.svg

Download the solid SVG in your brand color and rename it favicon.svg.

If you want it to adapt to dark browser themes, open the file in a text editor and replace the color with a small style block:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <style>
    path { fill: #111318; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="..."/>
</svg>

Keep the path from your downloaded icon. Only the color lines are new.

Step 2: Make the PNG files

Phone home screens do not show transparency well, so these icons need a solid background and some padding.

On the icon page, download the PNG at 512 pixels in white or your brand color.
In any image editor or Canva, create a 512 by 512 square filled with your background color.
Place the icon in the center at about 60 percent of the width.
Export three copies: 512, 192 and 180 pixels wide. Name them icon-512.png, icon-192.png and apple-touch-icon.png.

Step 3: Make favicon.ico

Export the same square at 32 by 32 pixels as a PNG, then convert it to ICO. Free image editors such as GIMP can export ICO directly: choose File > Export As and type a name ending in .ico.

Step 4: Add the HTML

Upload all files to the top folder of your website and put this inside <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Then create a text file named site.webmanifest:

{
  "name": "Your Site Name",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Step 5: Check it

Open your site in a new private window. Browsers cache favicons hard, so a normal tab may keep showing the old one for days. If it still does not appear, visit yoursite.com/favicon.ico directly to confirm the file is there.

Search engines also show your favicon next to your pages in results. They pick it up the next time they crawl your home page, which can take a few weeks.

Questions

Do I still need favicon.ico?

Yes, as a fallback. Some browsers, feed readers and other tools request /favicon.ico without reading your HTML.

What size should a favicon be?

There is no single size. SVG covers browsers at any size, the ICO is 32 by 32, and the PNG files are 180, 192 and 512 pixels. There is more in the icon sizes guide.

Why is my favicon blurry?

It is probably a small PNG being enlarged. Add the SVG version, which browsers prefer when both are listed.

Every icon on this site is free to download. If this guide helped, you can say thanks by buying a pack from the LinearAndLoom Etsy shop.