A favicon is a small icon that appears in browser tabs, bookmarks, and address bars to represent your website. It helps users quickly identify your site among multiple open tabs.

What formats does Favycons support?

Favycons supports ICO, ICNS, PNG, and SVG formats. ICO is used for Windows favicons, ICNS for macOS application icons, PNG for modern web browsers, and SVG for scalable vector favicons.

Is Favycons free to use?

Yes, Favycons is completely free to use. No signup or payment required. Generate and download unlimited favicons.

What sizes should my favicon be?

Modern favicons typically use sizes like 16x16, 32x32, and 48x48 pixels for ICO files. For PNG, common sizes are 180x180 (Apple Touch Icon) and 192x192 (Android). Favycons generates all necessary sizes automatically.

Modern favicon assets for websites and PWAs, with optional legacy browser support when you need it.

Web Export Bundle

The Web export bundle is modern-first by default. It gives most websites everything they need for current browsers, PWAs, and iOS home screen icons, while letting you opt into legacy browser support when a project still needs it.

Recommended Default Set

Use this set for most new websites and web apps:

File	Size	Why it matters
`favicon.svg`	Scalable	Best source for modern browser tabs and high-density displays
`favicon-16x16.png`	16x16	Small PNG fallback
`favicon-32x32.png`	32x32	Common browser and bookmark fallback
`favicon-192x192.png`	192x192	PWA install icon
`favicon-512x512.png`	512x512	Large PWA icon
`apple-touch-icon.png`	180x180	iOS Safari Add to Home Screen
`site.webmanifest`	-	PWA metadata
`meta-tags.html`	-	Copy-paste HTML snippet
`SETUP.md`	-	Installation guide

Optional Legacy Support

Enable legacy browser support when a project still needs older browser or Windows pinned-site compatibility. That adds:

File	Size	When to use it
`favicon.ico`	16, 32, 48px	Older browsers and conservative integrations
`mstile-150x150.png`	150x150	Legacy Windows pinned tiles
`browserconfig.xml`	-	Legacy IE / old Edge tile metadata

If you do not need those environments, skip them.

What Most Websites Actually Need

favicon.svg is the best primary favicon for modern browsers.
favicon-32x32.png and favicon-16x16.png give broad fallback coverage.
apple-touch-icon.png still matters for iOS home screen saves.
site.webmanifest plus favicon-192x192.png and favicon-512x512.png matters for PWAs.
favicon.ico is useful when supporting older browsers or products that still expect it.
browserconfig.xml and mstile-150x150.png are niche legacy assets now.

Installation

1. Extract Files

Extract the ZIP to your project's public/ folder:

your-app/
├── public/
│   ├── favicon.svg
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon-192x192.png
│   ├── favicon-512x512.png
│   ├── apple-touch-icon.png
│   ├── site.webmanifest
│   ├── meta-tags.html
│   └── SETUP.md

If you enable legacy support, the bundle also includes favicon.ico, mstile-150x150.png, and browserconfig.xml.

2. Add Meta Tags

Add these tags to the <head> of your HTML:

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

If you enable legacy support, also add:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta name="msapplication-config" content="/browserconfig.xml">

3. Customize the Manifest

Edit site.webmanifest to match your app:

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Framework-Specific Setup

Next.js (App Router)

Place files in public/ and add metadata in app/layout.tsx:

export const metadata = {
  icons: {
    icon: [
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
};

If you enable legacy support, add { url: '/favicon.ico' } to the icon array.

Vite / React

Place files in public/ and add tags to index.html:

<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

Astro

Place files in public/ and update your base layout:

<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

Compatibility Notes

Surface	Recommended asset
Modern browser tab	`favicon.svg`
Browser fallback	`favicon-32x32.png`, `favicon-16x16.png`
iOS home screen	`apple-touch-icon.png`
PWA install prompt	`site.webmanifest`, `favicon-192x192.png`, `favicon-512x512.png`
Older browsers	`favicon.ico`
Legacy Windows pinned sites	`browserconfig.xml`, `mstile-150x150.png`

Testing Checklist

Browser tab icon appears correctly
Bookmark/favorites icon appears correctly
PWA install prompt shows the expected icon
iOS Add to Home Screen uses the Apple touch icon
If legacy mode is enabled, older browser and Windows pinned-site behavior still works

Troubleshooting

Icon not updating?

Browsers cache favicons aggressively. Try:

Hard refresh: Ctrl+Shift+R or Cmd+Shift+R
Clear the browser cache
Test in a private window
Add a cache-busting query while iterating, such as favicon.svg?v=2

PWA icon not showing?

Ensure site.webmanifest is served with a manifest JSON content type
Check browser DevTools -> Application -> Manifest for errors
Verify the icon paths are absolute and start with /

iOS icon not showing?

iOS Safari expects the exact apple-touch-icon.png filename or an explicit <link rel="apple-touch-icon"> tag. This bundle gives you both pieces.

Web Export Bundle

On this page