Icon Workshop1Upload your image
Turn safe SVG artwork into ICO and PNG website icons. Preview the rasterized result at small sizes and export an icon pack locally.
One image. Every screen.
SVG to Favicon Converter
Small icons. A lasting impression.
Turn safe SVG artwork into ICO and PNG website icons. Preview the rasterized result at small sizes and export an icon pack locally.
PNG ICO PWA
Create your icon pack
Turn your image into favicons, app icons and more.
- 1Upload
- 2Adjust
- 3Download
Drop your image here
SVG · Up to 5 MB
Your image is processed in your browser. It never leaves your device.
Adjust your icon
Fine-tune the look for every screen.
See it in context(upload to preview your icon)
Browser tab
×
https://example.com
iOS home screen
Your icon here
PWA / Android
Your icon here
How to make a favicon in 3 steps
From one image to a complete set of icons.
2Adjust and preview
Choose the fit, background and padding. Check the result at small sizes.
3Download and add to your site
Export your icon pack, upload the files, and add the icon links to your HTML.
One logo, ready for every screen
See where the generated files are used.
Website favicon
My Site×16 × 1632 × 3216 × 16 and 32 × 32 icons help visitors recognize your site in tabs and bookmarks.
iPhone & iPad
My Site180 × 180Use a 180 × 180 apple-touch icon when your site is added to the home screen.
PWA & Android
Install app192 × 192512 × 512192 × 192 and 512 × 512 images are common sizes used by web app manifests.
What’s in your icon pack?
A ready-to-use set of icons for all platforms.
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestWeb app manifest
Add icons to your website
Place these links in your HTML <head>.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">- Unzip the icon pack into public/ at the root of your Nuxt project. Keep the filenames and place site.webmanifest beside favicon.ico, not inside app/.
- Add this code inside the script setup block in app/app.vue. Replace existing icon links that point to older files, then rebuild and publish your project.
useHead({
"link": [
{
"rel": "icon",
"type": "image/x-icon",
"href": "/favicon.ico"
},
{
"rel": "apple-touch-icon",
"sizes": "180x180",
"href": "/apple-touch-icon.png"
},
{
"rel": "manifest",
"href": "/site.webmanifest"
}
]
})Open /favicon.ico, /apple-touch-icon.png and /site.webmanifest on your own site. Check successful responses and actual image or JSON content; a 200 response containing an HTML error page is still a wrong path. Check every icon URL inside the manifest too.
If an old icon remains, check the page head for duplicate links, disable cache in browser developer tools and reload. Review CDN and service worker caches if used. Compare the actual 16 and 32 pixel previews: simplify tiny text and thin lines instead of relying on the large preview.
These files provide icons and manifest metadata. They do not by themselves make a website an installable PWA. This recipe assumes deployment at the domain root; adjust every link and manifest icon path for a subdirectory.
SVG to Favicon Converter
Turn safe SVG artwork into ICO and PNG website icons. Preview the rasterized result at small sizes and export an icon pack locally.
Safe SVG paths stay vector. Raster images and text images are not converted into vector artwork.
SVG must contain safe, self-contained artwork.
Start creatingFrequently asked questions
What is a favicon?
A small image that represents your website in browser tabs and bookmarks.
Which image format should I use?
PNG is a good choice for transparent logos. JPG, WebP and safe SVG can also be used.
Can I use a non-square image?
Yes. Choose Fit, Crop or Stretch to create a square icon.
Why are several icon sizes included?
Browsers and home screens use different sizes. Smaller icons stay clear in tabs; larger icons suit app shortcuts.