Favicon Generator
Generate favicon PNG files at 16×16, 32×32 and 180×180 (Apple touch icon) from any image. Free, private.
Pure browser JavaScript (HTML canvas) — no upload.
How to use this tool
- Choose a square image (logo or icon).
- Preview the three sizes.
- Download each favicon PNG.
Generate favicon PNG files at 16×16, 32×32 and 180×180 (Apple touch icon) from any image. Free, private.
How it works
The Favicon Generator takes any image you upload and produces the standard icon sizes needed for modern websites: 16x16 pixels for the browser tab, 32x32 pixels for taskbar and bookmarks, and 180x180 pixels as the Apple touch icon for iOS home screen shortcuts. Each size is available for individual download as a PNG file.
Upload a square image for best results -- a logo, monogram, or simple symbol works much better than a complex photograph at small sizes. The tool scales the image to fit each target dimension using the browser's Canvas API. Nothing is sent to a server.
To use the generated icons on your website, place the files in your site root and reference them in your HTML head section. The 16x16 and 32x32 files use link rel='icon' tags. Name the 180x180 file apple-touch-icon.png and reference it with link rel='apple-touch-icon'. Many frameworks also accept a favicon.ico file, which you can create by converting the 32x32 PNG with a dedicated ICO converter.
Worked example
Generate favicons for a new website from a logo
- Export your logo as a square PNG (e.g. 512x512) with a transparent background.
- Upload it to the Favicon Generator.
- Download the 16x16, 32x32, and 180x180 PNG files.
- Place them in your website's root directory and add the appropriate link tags to your HTML head.
Three favicon files ready to display your brand icon in browser tabs and on iOS home screens.
Common mistakes to avoid
- Uploading a complex photograph -- favicons need simple, bold shapes to be legible at 16x16 pixels.
- Forgetting to add the link tags to the HTML head so the browser never finds the favicon files.
- Not providing a transparent background, resulting in a white square behind the logo instead of matching the browser tab color.
Key terms
- Favicon
- A small icon associated with a website, displayed in the browser tab, address bar, bookmarks list, and search results.
- Apple touch icon
- A 180x180 PNG icon that iOS uses when a visitor adds a website to their iPhone or iPad home screen.
- ICO format
- A Microsoft icon file format that can contain multiple image sizes in one file, commonly used for Windows favicons.
Frequently asked questions
- What size should my source image be?
- Use a square image of at least 180×180 px for best results.