Generate favicons for all platforms from a single image. Creates ICO, PNG icons (16×16 to 512×512), Apple Touch Icon, PWA icons, HTML code, and site.webmanifest — free online, no upload to server.
Drop image here or click to select
Supports PNG, JPG, SVG — square images recommended (512×512+)
A favicon (short for "favorite icon") is the small image displayed in browser tabs, bookmark lists, history entries, and mobile home screens. It's one of the most visible elements of your website's brand identity — users see it every time they interact with your site. Modern web standards require multiple favicon sizes and formats: a 16×16 ICO for legacy browsers, a 180×180 Apple Touch Icon for iOS home screens, and 192×192 / 512×512 PNGs for Progressive Web App (PWA) install prompts.
Manually creating and exporting all these sizes from a design tool is tedious
and error-prone. The Favicon Generator automates the entire
process: upload a single high-resolution image, and the tool generates all
required icon sizes, packages them into a downloadable ZIP file, and provides
the HTML <link> tags and site.webmanifest JSON
you need. Everything runs locally in your browser — your image never leaves
your device.
favicon.ico, the HTML snippet, and the manifest file.
<head> section. Save the site.webmanifest
file in your site's root directory.
Google displays favicons next to your site's search results, making them a
subtle but important SEO signal for brand recognition and
click-through rates. Google recommends placing a favicon.ico
in the root directory and declaring multiple sizes via <link>
tags. The icon should be square, clearly recognizable at small sizes, and
consistent with your brand identity. For PWA support, include 192×192 and
512×512 PNG icons in your site.webmanifest — these are required
for the browser's "Add to Home Screen" and app install prompts. Use transparent
backgrounds for logos to ensure they look clean on any surface.
Essential terms and definitions related to Favicon Generator.
A small icon associated with a website, displayed in browser tabs, bookmarks, history, and address bars. The traditional format is favicon.ico (containing multiple sizes in one file), but modern browsers also accept PNG and SVG favicons declared via <link rel="icon"> tags. A well-designed favicon reinforces brand identity across all browser interfaces.
A container format that can hold multiple image sizes (16×16, 32×32, 48×48 pixels) in a single file. ICO is the legacy favicon format with universal browser support including Internet Explorer. Modern practice generates both ICO (for compatibility) and PNG (for quality) favicons, letting browsers choose the optimal format.
A JSON file (site.webmanifest) that defines how a Progressive Web App (PWA) appears and behaves when installed on a device. It specifies the app name, start URL, display mode (standalone/fullscreen), theme color, and icon set (192×192 and 512×512 PNG minimum). Linked from HTML via <link rel="manifest">, it enables the "Add to Home Screen" prompt.
A 180×180 pixel PNG image used as the home screen icon when a user bookmarks a website on iOS ("Add to Home Screen"). Declared with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Without this icon, iOS captures a screenshot of the page instead, resulting in an unprofessional appearance on users' home screens.
Use a square image of at least 512×512 pixels for the best results. The tool will downscale it to all required sizes (16×16 through 512×512) using high-quality bicubic interpolation. Starting with a high-resolution source ensures crisp icons at every size. SVG files also work well because they scale without quality loss.
When a user adds your website to their iOS home screen, Safari uses the apple-touch-icon (180×180 PNG) as the app icon. Without it, iOS takes a screenshot of the page instead, which looks unprofessional. The apple-touch-icon is also used by some Android browsers and feed readers for bookmarks and link previews.
A site.webmanifest is a JSON file that tells the browser how your Progressive Web App (PWA) should behave when installed on a device. It specifies the app name, icons (192×192 and 512×512), theme color, background color, and display mode. Place it in your site root and link to it from your HTML <head> with <link rel="manifest" href="/site.webmanifest">.
Yes. If your source image has a transparent background (PNG or SVG with alpha channel), the transparency is preserved in all generated PNG icons and in the ICO file. This is ideal for logos and icons that need to blend seamlessly with any background color in browser tabs and app launchers.
No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your image is never uploaded to any server. The resizing, ICO generation, and ZIP packaging all run locally on your device, ensuring complete privacy for your brand assets and logos.
ICO is a legacy format that can contain multiple resolutions in a single file, making it compatible with virtually all browsers including IE. PNG favicons are modern, lighter, and supported by all current browsers. This tool generates both: an ICO file (containing 16, 32, and 48px) for maximum compatibility, and individual PNG files for modern browsers and platforms.
Common errors developers encounter and how to resolve them.
Favicon not displaying in browser tab after deployment Browsers aggressively cache favicons. Try: (1) hard refresh with Ctrl+Shift+R, (2) clear browser cache, (3) open in incognito/private window, (4) add a cache-busting query string: <link rel="icon" href="/favicon.ico?v=2">. Also verify that favicon.ico is placed in the root directory (/) of your domain — many crawlers only check the root path.
Using SVG as favicon source for better scaling across all sizes SVG is the ideal source format because it scales to any resolution without pixelation. Upload your SVG logo and the tool will rasterize it to all required sizes using the Canvas API. For even better results, ensure your SVG uses a square viewBox (e.g., viewBox="0 0 512 512") and that the design fills the entire viewport without excess whitespace.
ICO file vs PNG: when to use which format for maximum compatibility Use the ICO file (favicon.ico) as your primary fallback — place it in the root directory. ICO is the only format recognized by Internet Explorer and some older tools. Use PNG <link> tags with explicit sizes for modern browsers, which will prefer them over the ICO. The HTML snippet generated by this tool includes both formats in the correct priority order.
Ensuring favicons appear correctly in PWA install prompts and app drawers PWA install prompts require at least a 192×192 and a 512×512 PNG icon declared in your site.webmanifest. The icons must be served over HTTPS, have the correct MIME type (image/png), and the manifest must be linked from the HTML <head>. Use the generated site.webmanifest snippet and place all icon files in your site root directory for reliable discovery.