SVG to Favicon

SVG to Favicon: Generate a Complete Set of Sizes and favicon.ico at Once

Websites usually need a complete set of icons: browsers use 16 and 32, Windows shortcuts may use a multi-resolution favicon.ico, iOS home-screen icons use 180, and PWA manifests commonly use 192 and 512. Exporting each size manually is tedious and can easily result in inconsistent dimensions. With one SVG source file, this tool generates the complete set at once, including .ico and reference code. Everything is processed locally in the browser and files are not uploaded to the server.

Two Input Methods and Instant Validation

You can upload an .svg file or paste SVG source code directly into the text box, for example code copied from a design tool. The input is validated immediately: the tool checks whether the SVG code is valid, whether it contains a viewBox, and reports its dimensions and whether it is a 1:1 square. A 1:1 icon is recommended for Favicon. Non-square images trigger a warning but can still be processed. SVG rendering uses image loading, and scripts inside the file are not executed.

Size Selection

Sizes are grouped by purpose. Common sizes are 16, 32, 48, 180, 192 and 512, all selected by default. More sizes include 64, 128 and 256 and can be selected as needed. You can also enter a custom size. The page provides three preset buttons: Recommended Website Icons, All and Clear. The usage of each size is also explained: 16 for browser tabs, 32 and 48 for browsers and Windows shortcuts, 180 for iOS home-screen icons, 192 and 512 for PWA manifests, and 64 and 128 for general icons.

Background and Inner Padding

The default background is transparent, which works well for icons that are already square or have built-in whitespace. If the source image is too close to the edges or needs to be used on a dark background, you can choose a fill color and specify the background color. Inner padding adds whitespace around the icon as a percentage, with quick values such as 0, 5%, 10%, 15% and 20%, preventing the icon from touching the canvas edge. The same background and padding settings are applied to all sizes to keep the visual appearance consistent.

Generated Results and Downloads

After generation, the results are grouped by purpose. At the top is a browser-tab-style preview showing the icon at its actual 16-pixel size. The Favicon group lists sizes below 180 and explains the composition of favicon.ico. The Website and PWA group lists sizes of 180 and above. Each size shows a preview, file size and individual download button. There are four download methods: download an individual size, download all PNGs sequentially, download favicon.ico containing multiple standard resolutions, or download a ZIP containing all PNGs and favicon.ico.

HTML Reference Code

The page automatically generates HTML reference code and a webmanifest icon section based on the selected sizes. It includes reference syntax for favicon.ico, each PNG size and apple-touch-icon. Copy the code into your project without writing it manually. Paths in the code are organized relative to the site root.

Common Questions and Error Handling

Why does the generated ico not contain 512? ICO containers have weaker compatibility with PNG entries above 256, so the tool automatically writes only sizes no larger than 256 into the ico. The 512 PNG is still provided separately, and the page explains which sizes are actually included in the ico.
What if fonts in the SVG are not rendered? When browsers render an independent SVG, they do not load external system font files. Convert text to paths in the SVG instead.
What if no size is selected? The tool directly asks you to select at least one output size.
What if the SVG is invalid or rendering fails? This is usually caused by incomplete code or invalid tags. Export the SVG again from the design tool and try again.

Use Cases and Privacy

Suitable for configuring browser tab icons for websites and admin systems, home-screen icons for mobile sites, PWA manifest icons, and quickly converting vector Logos into a complete set of icon assets. SVG rendering, PNG encoding and ICO packaging are all performed locally in the browser. The page has no upload interface, files are not uploaded to the server and are not saved.