ToolNest

SVG 站点图标生成器

用首字母和品牌配色创建简洁的 SVG 站点图标，实时预览，一键下载，无需注册。

Initials (1-2 characters)
Colours
Shape
Size: 64px

Why SVG beats PNG for favicons

An SVG favicon is a single small text file that scales to every resolution the browser needs — 16px in a tab, 32px on a HiDPI screen, and larger again when pinned to a bookmark bar. A PNG set means shipping several files and getting each one right.

Support for SVG favicons is good in all current browsers. The one holdout is Safari, which fell back to PNG rather than showing a broken icon, so a PNG fallback is still worth including.

The markup

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

Put that in the <head> of every page. Browsers request /favicon.ico automatically if no icon is declared, which produces a 404 in your server logs — declaring it explicitly removes that noise.

Design rules that matter

  • Keep it simple. At 16px, anything detailed turns to mud. One letter or a simple mark works.
  • Avoid thin strokes. They disappear when scaled down.
  • Check contrast. The text must be readable against the background at small sizes.
  • Test at 16px. Zoom your browser out and look at the actual tab, not the large preview.

Adding a PNG fallback

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">

Modern browsers prefer the SVG and only fall back to the ICO when needed.

Related

Need a matching icon in another format? The QR code generator produces SVG you can use the same way.

常见问题

Is my favicon uploaded anywhere?

No. The SVG is generated in your browser and downloaded directly. Nothing is sent to a server.

Does SVG work in all browsers?

SVG favicons are supported in all current browsers. Older Safari versions ignore the SVG and fall back to a PNG, so a PNG fallback is still worth including for maximum coverage.

What size should I use?

The generator lets you set any size, but a viewBox-based SVG scales to whatever the browser asks for. 64x64 is a good default for the viewBox.

How do I add it to my site?

Add <link rel="icon" type="image/svg+xml" href="/favicon.svg"> to the <head> of your pages, and place the file at the root of your domain.

Why does my favicon look blurry in the tab?

Usually the design is too detailed for 16px. Simplify to a single letter or bold mark, and check the contrast between the text and the background.