Home › Web & Hosting › Favicon Generator (SVG)
Web & Hosting
Favicon Generator (SVG)
Generate a crisp SVG favicon from your initials and two colors — no image editor needed. SVG favicons stay sharp at every size and are tiny. Copy the SVG, save it as favicon.svg, and paste the head tags.
Try it now
Worked example
<!-- favicon.svg — save as favicon.svg in your site root -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="GG site icon">
<rect width="64" height="64" rx="14" fill="#4ade80"/>
<text x="32" y="42" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="30" font-weight="800" text-anchor="middle" fill="#062012">GG</text>
</svg>
<!-- Add to <head>: -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon-192.png">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- For old browsers/iOS, also export a favicon.ico and a 180x180 PNG. -->
Inputs
- Letter(s) / initials
GG - Background color
#4ade80 - Text color
#062012 - Shape
Rounded square / Circle
Frequently asked
Do I still need a .ico or PNG?
SVG covers modern browsers; add a favicon.ico and a 180×180 apple-touch-icon PNG for older browsers and iOS home screens.
Where does favicon.svg go?
Your site root. The <link rel="icon"> tag points at /favicon.svg.