Icon Generator Online
Generate professional app icons, favicons, Android launcher icons, iOS app icons, Windows ICO files, macOS icons, PWA icons, and social profile images from one source image. Everything runs securely inside your browser.
📁 Step 1 — Upload Source Image or Logo
PNG, JPG, WEBP, SVG, BMP, AVIF — Minimum 512×512 recommended
📱 Step 2 — Choose Target Platforms
🎨 Step 3 — Customize Icon Appearance
👁️ Live Icon Preview
💻 Integration Guides & HTML Snippets
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <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" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
{
"name": "My App",
"short_name": "App",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }
],
"theme_color": "#6366f1",
"background_color": "#ffffff",
"display": "standalone"
}
// app/layout.tsx (Next.js 13+ App Router)
export const metadata = {
icons: {
icon: [
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
],
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
},
};
// public/index.html (Create React App) <link rel="icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
// WordPress: Appearance → Customizer → Site Identity
// Upload the generated 512x512 PNG as the "Site Icon".
// WordPress automatically creates all required icon sizes.
// Or add to functions.php:
add_action('wp_head', function() {
echo '<link rel="icon" href="' . get_template_directory_uri() . '/favicon.ico">';
});