Favicon Generator
Generate favicon.ico, PNG favicons, an apple-touch-icon, Android Chrome icons and site.webmanifest from one image, plus the HTML tags to paste. Crop or fit the image to a square, add padding, rounded corners or a background color, and preview the icons in a browser tab before downloading.
What is the Favicon Generator?
A favicon is the small icon shown in browser tabs, bookmarks and on phone home screens. This tool turns a single image into the full set of icon files a website needs, plus a web app manifest and the HTML <link> tags. Everything is generated in your browser; your image is not uploaded.
How to use
- Drop an image (PNG, JPEG, SVG, WebP, or any format your browser can display), or click to select one.
- Choose the shape (Crop center or Fit whole image), the background (Transparent or Color), Padding and Corner radius while checking the previews.
- Under Manifest and HTML, enter the App name, Short name, Theme color and Path prefix (where the files will be placed on your site).
- Click Download all as ZIP, or download each file separately.
- Upload the files to your site and paste the HTML snippet into the
<head>of your pages.
Generated files
| File | Size | Used for |
|---|---|---|
favicon.ico | 16×16, 32×32, 48×48 | Default favicon (PNG images inside an ICO container) |
favicon-16x16.png | 16×16 | Browser tab |
favicon-32x32.png | 32×32 | Browser tab on high-DPI screens |
apple-touch-icon.png | 180×180 | iOS / iPadOS home screen |
android-chrome-192x192.png | 192×192 | Android home screen |
android-chrome-512x512.png | 512×512 | Android splash screen and PWA install |
site.webmanifest | - | Web app manifest that references the Android icons |
Options
| Option | Description |
|---|---|
| Shape | Crop center cuts a square from the middle of the image; Fit whole image fits the whole image inside the square |
| Background | Transparent or a solid color |
| Padding | Empty space around the image, 0 to 40% of the icon size |
| Corner radius | Rounds the corners, 0 to 50% (50% makes a circle) |
| Opaque apple-touch-icon | Fills the iOS icon with the background color and keeps square corners, because iOS shows transparent areas as black and rounds the corners itself (on by default) |
Example HTML
With the default path prefix /, the snippet looks like this:
FAQ
Is my image uploaded?
No. All icons, the ICO file and the ZIP are created in your browser.
What image should I use?
A square image of at least 512×512 px, or an SVG, gives the sharpest results. Simple shapes and bold letters stay recognizable at 16×16; fine details and small text do not.
Why does my favicon not change after uploading?
Browsers cache favicons aggressively. Reload with the cache cleared, open the site in a private window, or add a version query to the URLs (for example /favicon.ico?v=2).
Can I use an animated image?
Animated images are converted using their first frame.