Generate a full favicon pack

Building a complete favicon set for modern websites

A favicon is the small icon displayed in browser tabs, bookmarks, history lists, and mobile home screens. Modern websites need multiple favicon sizes because different contexts render icons at different resolutions — from 16x16 pixels in browser tabs to 512x512 for PWA splash screens. A complete favicon pack ensures your brand looks sharp everywhere.

The minimum viable favicon set includes: favicon.ico (16x16 and 32x32 combined), apple-touch-icon.png (180x180 for iOS home screen), icon-192.png and icon-512.png (for Android PWA), and a site.webmanifest file that tells browsers where to find each size. Without these, your site shows a generic globe icon on mobile home screens and looks unprofessional in browser tabs.

Source images should be square and at least 512x512 pixels. Simple, high-contrast designs work best because favicons are viewed at tiny sizes where detail is lost. Logos with thin lines, small text, or complex gradients become unrecognizable at 16x16. Consider creating a simplified version of your logo specifically for favicon use.

This generator takes your source image and produces every common size in one pass: 16, 32, 48, 64, 96, 128, 180, 192, 256, 384, and 512 pixels. It also generates a starter site.webmanifest and an HTML snippet you can paste into your page head. Non-square sources are letterboxed (centered with padding) to maintain proportions.

Common use cases

• New website launch: Generate a complete favicon pack from your logo before launching a new website, ensuring professional branding across all browsers and devices from day one.
• PWA development: Create the required 192x192 and 512x512 maskable icons plus the site.webmanifest needed for Progressive Web App installation on Android and desktop.
• Brand refresh: When updating your logo or brand colors, regenerate the entire favicon set in one pass instead of manually resizing and exporting each size individually.
• Multi-site management: Quickly generate favicon packs for multiple client websites or microsites from their respective logos without opening design software for each one.

Technical details

Output sizes

16, 32, 48, 64, 96, 128, 180 (apple-touch-icon), 192 (PWA), 256, 384, and 512 (PWA splash) pixels. All outputs are square PNG files.

Maskable icons

The 192 and 512 sizes include safe-area padding suitable for Android adaptive icons. The icon content stays within the inner 80% circle that Android guarantees to display.

Non-square handling

Rectangular source images are centered on a square canvas with transparent padding (letterboxing). This prevents distortion while filling the required square format.

Manifest file

A starter site.webmanifest is included with correct icon references, display mode, theme color, and background color fields ready for customization.

How to generate a favicon pack

Build a complete favicon set from a single source image.

1. Drop a square logo or icon (PNG with transparency works best).
2. Review the previews for each generated size.
3. Click Download favicon pack to grab a single ZIP.
4. Add the included snippet.html tags to your site head and host the icons at the root.

Frequently asked questions