Favicon Generator
All Sizes, All Platforms, One Click

PWA screenshots appear in the "Add to Home Screen" install prompt on mobile devices and Chromium browsers. They show users a preview of your app, making the install experience far richer. Without screenshots, users see a generic prompt - with them, they see what your app looks like.

When you enable Include full PWA support and enter your website URL, desktop (1280x800) and mobile (750x1334) screenshots are captured from your live site and swapped into your package automatically, already referenced in your site.webmanifest. If you skip the URL or the capture cannot complete, you get placeholder screenshots built from your icon instead - replace those PNGs with your own captures whenever you like, no manifest editing required.

The screenshots use modern form_factor: "wide" (desktop) and form_factor: "narrow" (mobile) attributes per the 2026 PWA specification.

Modern websites need an SVG favicon (scales to any size, supports dark mode), a multi-size ICO (16, 32, 48px for legacy browsers), 180x180 for Apple Touch Icon, and 192x192/512x512 for Android/PWA. Our generator creates all essential files without the bloat of outdated sizes. No more 16 separate PNG files - just 6 optimized files.

ICO files can contain multiple sizes in a single file and are required for legacy browser support and PDF embedding. PNG files are simpler and work with modern browsers. SVG favicons are scalable and adapt to any size perfectly. For best compatibility, use all three formats - our generator creates them automatically.

SVG favicons are vector-based, so they scale perfectly to any size without pixelation. They also support CSS media queries, allowing your favicon to change between light and dark modes. All modern browsers support SVG favicons (Chrome 80+, Firefox 41+, Safari 16+, Edge). For best results, upload an SVG source image.

Apple Touch Icon is a 180x180 PNG image that iOS uses when users add your website to their home screen. Without it, iOS takes a screenshot of your page instead, which usually looks terrible. The apple-touch-icon makes your site look like a native app on iOS devices.

The web app manifest (site.webmanifest) is a JSON file that tells browsers how to display your site when installed as a PWA. Our 2026 "Rich Manifest" includes all required fields (name, short_name, icons, start_url, display) plus recommended fields (id, description, scope, lang, screenshots) for the best possible install experience. Even if you're not building a full PWA, the manifest improves Android Chrome home screen shortcuts.

After generating your favicon package, select your framework from the dropdown menu. For Next.js App Router, use the metadata export in layout.tsx. For Pages Router, add links to _document.js. For Create React App, put files in the public folder and use react-helmet. We provide ready-to-use code snippets for 17 different frameworks.

Google recommends a favicon that is a multiple of 48x48 pixels. Our multi-size ICO includes 48x48 embedded for Google Search results. Google also prefers simple, recognizable icons that work well at small sizes. Avoid text in your favicon - it becomes unreadable at small sizes.

You can upload WebP images to our generator - we accept WebP, AVIF, and many other modern formats. However, we output PNG, ICO, and SVG because WebP favicon support is inconsistent across browsers (especially Edge and Safari). Our generator automatically converts your WebP input to universally-compatible formats.

No. All processing happens entirely in your browser using the Canvas API. Your images never leave your device - there are no server uploads, no cloud processing, and no data storage. The tool works completely offline after the page loads. This makes it safe to use with confidential logos and branding assets.

Yes! Switch to the "Text/Emoji" tab to create a favicon from any text character or emoji. Choose from popular emojis or type your own text, select a font, adjust colors for background and text, and preview at multiple sizes. This is perfect for quick favicon creation when you don't have a logo yet.

The "Check URL" tab analyzes any website's favicon setup. Enter a URL and we'll fetch the page to detect all favicon-related tags - ICO files, SVG favicons, Apple touch icons, web manifests, theme colors, and more. You'll get a coverage score (0-100) showing how complete the favicon implementation is, plus recommendations for missing items.

The light/dark toggle in the preview section lets you see how your generated favicons will look against different backgrounds. This is especially useful for SVG favicons that may need to adapt for dark mode. If your favicon has transparency, you can verify it looks good in both light and dark browser themes.