svg2img

SVG to Favicon Generator

Give your website a recognizable icon. Preview your SVG in browser tabs, adjust its spacing and download the files with installation instructions.

Advertisement

Your website icons, ready to install

Preview in context

See a 16px tab icon on light and dark backgrounds before exporting. Use a bold, simple mark that remains recognizable at this size.

Download the complete set

The ZIP includes favicon.ico (16/32/48px), favicon.svg, an Apple Touch PNG (180px), PNGs at 192px and 512px, a manifest, HTML and a README.

Install with matching paths

Place the image files and manifest at your website root and add the supplied links to the document head. If you use a subfolder, update the HTML paths.

How it works

  1. 1

    Upload your SVG logo or paste its code.

  2. 2

    Set the site name, padding and background; check the tab preview.

  3. 3

    Download the ZIP, upload the files and add the installation code.

Turn one SVG into a website icon package

A favicon is the icon visitors recognize in a browser tab or bookmark. A website may also need a larger home-screen icon. This generator fits your SVG into a square, creates the related files and gives you matching installation code. The source remains editable as SVG; the PNG and ICO files have fixed pixel sizes.

What is inside the favicon ZIP?

Scroll sideways to see the full table →

FileSize or contentsPurpose
favicon.ico16 × 16, 32 × 32, 48 × 48Multi-size ICO fallback.
favicon.svg512 × 512 viewBoxScalable SVG icon with your padding and background.
apple-touch-icon.png180 × 180Apple home-screen icon.
icon-192.png / icon-512.png192 × 192 / 512 × 512Raster icons referenced by the manifest.
site.webmanifestSite name and icon pathsA starting manifest; not a complete PWA setup.
head.html / README.txtMarkup and instructionsSetup references; do not link these as icon assets.

Check the mark before generating the package

  1. 01Use the 16px tab preview

    Remove tiny lettering or thin decorative details if they disappear. A wide logo may need a compact version to remain recognizable in a square.

  2. 02Balance padding and contrast

    Start with the default 8% padding and inspect both light and dark previews. Dark previews show the same icon on a different surface; this tool does not generate separate automatic dark-mode artwork.

  3. 03Set a recognizable site name

    The name is used in the manifest and tab preview. It does not change your website’s HTML title. Keep your existing manifest settings if the site already has a PWA configuration.

How to install the generated favicon files

  1. Extract the ZIP. Put the icon images and site.webmanifest in the public directory that your host serves at the domain root. Check that /favicon.svg opens as an image, rather than a 404 or your home page.
  2. Add the links below inside your page’s HTML head. If your framework manages icon metadata, configure the same paths there instead. Remove conflicting old icon declarations.
  3. For a subfolder such as /assets/icons/, update the HTML href values. Manifest icon paths are relative to site.webmanifest, so keep those PNG files alongside it. If a manifest already exists, merge the new icon entries instead of replacing the whole file.
  4. Deploy the files and page markup, then test a fresh browser session. Check the requested image URLs if an old icon persists; a cached browser tab is not proof that installation failed.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Troubleshoot a favicon that does not appear

The old icon is still visible
Check the deployed head and asset URLs, then try a fresh session. Browsers cache icons; also remove older declarations that point to a different file.
The icon is blank or hard to see
Inspect the 16px light and dark previews. A white logo with transparency can disappear on a white tab. Add a suitable background or use a mark with more contrast.
The manifest icons are not found
Open site.webmanifest and resolve its icon paths relative to that file. Keep icon-192.png and icon-512.png in the same directory, or update the manifest paths to their actual location.

Where is my SVG processed?

Conversion runs in your browser; your SVG is not uploaded to our server for conversion. Sources carried between tools are kept in memory and cleared on reload. Linked images or fonts may require network requests. Outline text and embed resources for a self-contained file. Read our privacy policy

Frequently asked questions

Is a favicon always an ICO file?

No. Websites can use SVG and PNG icons as well. This package includes an ICO fallback and assets for browser tabs and home-screen icons.

Where should I put the files?

The included HTML expects the icons and site.webmanifest at your domain root. Put those files in your public directory, then add the links to your page head. The README explains framework and subfolder considerations.

Will the manifest make my site an installable PWA?

The manifest supplies a site name and icons. A complete PWA may require additional manifest fields and application behavior; this tool prepares icon assets only.

Why is my new icon not showing?

Check the file URLs and the page head, remove conflicting old icon declarations, and test in a fresh browser session. Browsers often cache favicons.

Will my favicon appear in Google Search immediately?

No. Install the icon reference on your home page, keep the home page and icon accessible to Google’s crawlers, and allow time for recrawling. Google does not guarantee that it will show a favicon. See the official favicon guidance below.

Do I need to replace my existing web manifest?

No. If your site already has one, merge the icon entries and keep its existing application settings. The generated manifest only supplies a name and two icon entries.

Technical reference: Google Search: website favicon requirements

Continue with your SVG

Related guides

↑ Back to the converter