SVG to favicon generator

Convert one finished square SVG into a complete favicon and website-icon package for browsers, Apple devices, PWAs, and legacy platforms.

Create your favicon package

Choose a square SVG

or drag and drop it here

No file selected

Favicon preview

Full website name

This becomes the name in site.webmanifest. Browsers may show it when someone installs your website or views its app information.

Short website name

This becomes the manifest short_name. Browsers use it where the full name does not fit, such as beneath an installed Home Screen icon.

Theme and tile color

This color is written into the web app manifest, browser theme metadata, legacy Windows tile configuration and Safari pinned-tab markup. Supporting browsers may show it around an installed web app, in parts of their interface, or behind a Windows tile.

Used in the manifest and browser configuration.

The archive includes a simple favicon-example.html page with every favicon import already in place.

Local and private. Your SVG is rendered entirely in this browser tab and is never uploaded to MyTools.help.

What the download contains

The ZIP includes the modern recommended files, PWA icons and the full legacy set. Fixed output sizes are generated automatically—there are no resize settings to configure.

Files	Use
`favicon.svg`, `favicon.ico`	Modern browsers and broad fallback support
`favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png`	Tabs, bookmarks and desktop browser surfaces
`apple-touch-icon*.png`	Current and older Apple Home Screen shortcuts
`icon-192.png`, `icon-512.png`, `maskable-icon-512.png`	Installable web apps and Android launchers
`safari-pinned-tab.svg`, `mstile-150x150.png`	Legacy Safari pinned tabs and Windows tiles
`site.webmanifest`, `browserconfig.xml`, `favicon-example.html`	Configuration and a complete HTML5 example with every import

How to install the favicon package

Extract the ZIP and place the favicon files in your website’s public root directory.
Open favicon-example.html. It is a complete base HTML5 page containing every favicon import; copy the marked favicon elements into your own page’s <head>.
Deploy the files and confirm that /favicon.ico, /favicon.svg and /site.webmanifest are publicly accessible.
Clear browser caches when testing changes; favicons are often cached aggressively.

Which files are actually necessary?

For an ordinary modern website, favicon.svg, favicon.ico and apple-touch-icon.png provide excellent coverage. Keep the manifest and 192/512 pixel icons when the site can be installed as a PWA. The smaller Apple icons, Safari pinned tab and Windows tile files mainly serve older platforms.

Important artwork guidance

Use a square SVG canvas and keep the important artwork away from its edges.
Small favicons need simple shapes and strong contrast. Fine details may disappear at 16×16.
Apple applies its own rounded mask, so do not manually round the source artwork.
Maskable icons can be cropped into circles and squircles. Keep essential artwork in the central safe area.
The pinned-tab file is converted to monochrome automatically; inspect it if the source uses complex masks, embedded images or filters.