Back to all posts

How to Create SVG Icons and Set Up a Favicon for Your Website

Why Your Favicon Is the Face of Your Site

When someone has a dozen tabs open, the favicon is what tells them which tab is yours. That tiny icon in the corner of the browser tab carries more weight than most people realise — it affects whether your site looks complete, trustworthy, and professionally made.

A site without a favicon will show the default icon from whatever framework or host you're using. The content might be excellent, but that default icon signals to visitors — and to yourself — that something is still unfinished.

Setting a proper favicon is one of the highest-return improvements you can make to a website. It takes less than an hour and immediately changes how your site is perceived.

Favicon File Formats and Sizes

The main formats used for favicons are:

  • ICO: The original format with the broadest browser compatibility, including older browsers
  • PNG: Widely supported by modern browsers; common sizes include 16×16, 32×32, and 180×180 (Apple Touch Icon)
  • SVG: Supported by Chrome, Firefox, and Edge; scales perfectly at any size without losing quality

The recommended approach today is to provide multiple formats together: ICO as the baseline, SVG for modern browsers, and PNG for Apple devices.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Why SVG Makes a Good Favicon

SVG is a vector format, which means it can be scaled to any size without becoming blurry or pixelated. On high-resolution displays like Retina screens, SVG favicons stay crisp where PNG files can look soft.

SVG files are also small in size and human-readable — you can open one in a text editor and understand what's inside. If you want a single file that works across all screen densities, SVG is a strong choice.

One important note: keep an ICO file alongside your SVG. Some older browsers and environments only recognise the ICO format, so having both ensures maximum compatibility.

Step-by-Step: Creating an SVG Icon and Favicon

You don't need to write code to create a good SVG icon. Tools like Chizmo Tools' SVG Icon Generator let you design and export SVG and ICO files directly in the browser.

Step 1: Plan a simple design

Favicons are often displayed at 16×16 pixels. Detailed or complex designs lose their shape at that size. A simple geometric form, a bold letter, or a clean symbol works far better than anything intricate. Think of logos you recognise in browser tabs — they're almost always minimal.

Step 2: Choose colours with contrast in mind

Pick colours that stand out against both light and dark browser interfaces. If your site has a brand colour, use it here. Strong contrast between the icon and its background makes it readable even at small sizes.

Step 3: Design and export

Open the SVG Icon Generator, build your design using the available shapes and tools, then download both the SVG and ICO versions. The tool handles the ICO conversion for you, so there's no need to use a separate converter.

Step 4: Add the files to your project

Place the downloaded files in the public folder of your website (or the root directory, depending on your setup):

public/
├── favicon.ico
├── favicon.svg
└── apple-touch-icon.png   ← export from a PNG editor if needed

Step 5: Link them in your HTML

Add the following inside the <head> tag of your site. If you're using a framework like Next.js, this goes in layout.tsx or _document.tsx:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Checking That Your Favicon Works

After deploying, open your site in a browser and look at the tab. If the favicon doesn't appear, the browser may be showing a cached version. Try a hard reload with Ctrl + Shift + R (or Cmd + Shift + R on Mac) to force the browser to fetch the latest files.

If you're on mobile, add the site to your home screen and check the icon that appears — this is the Apple Touch Icon, and it should reflect the PNG you set up.

A Note from the Author

When I first started building web tools, I had no idea what file formats, sizes, or folder structures were needed for favicons. For a while, every tab and bookmark showed the default icon from the framework I was using — not anything I had made. I kept telling myself it was a minor detail and could wait. But once I actually set a proper favicon and saw the tab change, I realised how much that small thing affects the overall impression of a site. I still use this tool myself to create favicons for each of the Chizmo Tools services, one by one.

Summary

  • A favicon affects how complete and trustworthy your site looks — it's worth setting early
  • Combine ICO, PNG, and SVG to cover all browsers and devices
  • SVG is an excellent choice for favicons because it scales without losing quality
  • SVG Icon Generator lets you design and download SVG and ICO files with no coding required

If your site is still using a default favicon, this is a quick win worth doing today.