Skip to content
All designer tools

Favicon Generator

A letter or an emoji into an SVG icon and every PNG size that still matters

One or two characters. An emoji keeps its own colours.

22%

Rounding on the icon, as a percentage of its size — so it holds at every exported resolution. 50% gives you a circle; most platforms mask the corners themselves anyway.

Keep this icon. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free accountSign in
16px
32px
64px
128px

Download

Rasterized in your browser from the same SVG, so they cannot drift apart. Nothing is uploaded anywhere.

htmlicon.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#6366f1"/>
      <stop offset="100%" stop-color="#ec4899"/>
    </linearGradient>
  </defs>
  <rect width="512" height="512" rx="112.64" fill="url(#g)"/>
  <text
    x="50%" y="50%"
    dominant-baseline="central"
    text-anchor="middle"
    font-family="system-ui, -apple-system, 'Segoe UI', sans-serif"
    font-size="286.72"
    font-weight="700"
    fill="#ffffff"
  >H</text>
</svg>
htmlPut this in your <head>
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/manifest.webmanifest" />

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Preview the catalog in this paletteHand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

More designer tools

All 36 run in the tab — no account, no upload.See all