How to Generate a Favicon for Your Website
Create favicons in all required sizes and formats from any image with our free Favicon Generator. Includes ICO, PNG, and Apple Touch Icon.
Steps
Upload your logo or image
Upload a high-resolution version of your logo or image (at least 512×512px). Square images work best. SVG files produce the sharpest results since they can be scaled to any size without quality loss. PNG with transparent background is the second-best option.
Adjust cropping and padding
Set the crop area to focus on the most recognisable part of your logo — at 16×16px, fine details disappear, so choose the simplest, most recognisable mark rather than a complex full wordmark. Add padding if needed to keep the icon from touching the edges.
Choose background
Choose a transparent background if your logo works on any background, or add a solid background colour. Consider how the favicon will look against both the white light-mode browser tab and the dark-mode browser tab.
Generate all sizes
Click Generate to produce all required sizes: 16×16, 32×32, 48×48 (ICO format), 180×180 (Apple Touch Icon), 192×192 and 512×512 (Android/PWA), 144×144 (Windows tile).
Download and implement
Download the favicon package and extract it to the root of your website. Add the provided HTML link tags to your <head>: <link rel='icon' href='/favicon.ico'>, <link rel='apple-touch-icon' href='/apple-touch-icon.png'>, and the web app manifest reference for PWA support.
Favicons in the Era of PWAs and Dark Mode
Modern browsers have expanded well beyond the simple favicon.ico. Progressive Web Apps (PWAs) require a web app manifest file (manifest.json) that references icons at 192×192 and 512×512 for home screen installation. Safari on iOS uses the apple-touch-icon format, which is a 180×180 PNG without transparency (Safari adds the rounded corner and glossy effect). Dark mode has introduced SVG favicons with media query support — you can provide different icons for light and dark mode using <link rel='icon' href='light.svg'> with an SVG file containing @media (prefers-color-scheme: dark) rules. A complete modern favicon implementation covers: ICO file at root, PNG favicons via link tags, Apple Touch Icon, PWA icons in manifest.json, and optionally an SVG favicon with dark mode support.
Frequently Asked Questions
favicon.ico is the legacy format that stores multiple sizes (typically 16×16 and 32×32) in a single file. It is the default that browsers look for at the root of your domain. favicon.png is a modern PNG format that is specified explicitly via the <link> tag. Best practice is to provide both: favicon.ico at the root for legacy browser compatibility, and PNG favicons referenced in the HTML for modern browsers that support higher-quality icons.
Different devices and contexts use different sizes: 16×16 for browser tab icons, 32×32 for browser shortcuts and taskbar pins, 48×48 for Windows taskbar, 180×180 for iOS home screen bookmarks (Apple Touch Icon), 192×192 for Android home screen, 512×512 for Android splash screens and PWA icons. Providing all sizes ensures your brand appears sharp on every device without browser upscaling.
At 16×16 pixels you have only 256 pixels to work with — complex logos are unreadable at this size. Design your favicon by starting with the simplest possible version of your brand mark: the first letter of your brand name, a simplified icon, or a solid shape in your brand colour. Test the 16×16 version carefully. Many well-known brands use a simplified monogram or icon mark as their favicon rather than their full logo.