Web Export Bundle
Complete favicon set for websites, PWAs, and web applications with all required formats and sizes.
Web Export Bundle
The Web export bundle provides everything you need for a complete favicon setup on any website or web application. It includes traditional favicons, PWA icons, Apple touch icons, and Windows tile support.
What's Included
| File | Size | Purpose |
|---|---|---|
favicon.ico | 16, 32, 48px | Multi-size ICO for legacy browser support |
favicon.svg | Scalable | Modern browsers with SVG favicon support |
favicon-16x16.png | 16x16 | Standard favicon size |
favicon-32x32.png | 32x32 | High-DPI displays |
favicon-192x192.png | 192x192 | PWA icon (standard) |
favicon-512x512.png | 512x512 | PWA icon (large/splash) |
apple-touch-icon.png | 180x180 | iOS Safari "Add to Home Screen" |
mstile-150x150.png | 150x150 | Windows Start menu tiles |
site.webmanifest | — | PWA configuration file |
browserconfig.xml | — | Legacy IE/Edge tile configuration |
meta-tags.html | — | Copy-paste HTML snippet |
SETUP.md | — | Installation instructions |
Installation
1. Extract Files
Extract the ZIP to your project's public/ folder:
your-app/
├── public/
│ ├── favicon.ico
│ ├── favicon.svg
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon-192x192.png
│ ├── favicon-512x512.png
│ ├── apple-touch-icon.png
│ ├── mstile-150x150.png
│ ├── site.webmanifest
│ └── browserconfig.xml2. Add Meta Tags
Add these tags to the <head> of your HTML:
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<!-- Windows -->
<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)
Next.js automatically serves files from the public/ folder. Place your icons there and add meta tags in app/layout.tsx:
export const metadata = {
icons: {
icon: [
{ url: '/favicon.ico' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
],
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
};Vite / React
Place files in public/ and add meta tags to index.html:
<head>
<link rel="icon" href="/favicon.ico" />
<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/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
</head>Browser Compatibility
| Browser | Icon Format Used |
|---|---|
| Chrome, Edge, Firefox | SVG (preferred) or PNG |
| Safari | PNG favicon or Apple touch icon |
| Safari (iOS) | apple-touch-icon.png |
| IE 11 | favicon.ico |
| Windows (pinned) | mstile-150x150.png via browserconfig |
Testing Checklist
After installation, verify your icons work correctly:
- Browser tab: Icon appears in the browser tab
- Bookmarks: Icon shows when bookmarking the page
- PWA install: Icon appears in the install prompt (Chrome/Edge)
- iOS "Add to Home Screen": Apple touch icon appears
- Windows pinned site: Tile icon appears in Start menu
Troubleshooting
Icon not updating?
Browsers cache favicons aggressively. Try:
- Hard refresh:
Ctrl+Shift+R(Windows/Linux) orCmd+Shift+R(Mac) - Clear browser cache
- Open in incognito/private mode
- Add a cache-busting query:
favicon.ico?v=2
PWA icon not showing?
- Ensure
site.webmanifestis served with correct MIME type (application/manifest+json) - Check browser DevTools → Application → Manifest for errors
- Verify icon paths are absolute (start with
/)
Apple touch icon not working?
iOS Safari requires the exact filename apple-touch-icon.png in the root or the explicit <link> tag. Both are included in this bundle.