How to generate favicons from one image
Upload one JPG, PNG, WEBP, GIF, BMP, or SVG image. The page creates favicon.ico, PNG files at the listed sizes, an Apple touch icon, Android and manifest icons, site.webmanifest, and HTML for your page's <head>. The image is read and processed in the browser. This page's code makes no request containing the image.
How to generate a favicon package
- Drop a logo or image here, or click browse files.
- Choose Crop to fill or Fit with padding under Fit mode.
- Choose Transparent, White, or Custom color under Background.
- Set Site name (used in manifest & preview) and Theme color.
- Check Browser tab preview and Size previews.
- Click Download favicon package (.zip), then copy the HTML and manifest text into your site's
<head>and manifest file.
What files does a favicon generator create?
The ZIP contains favicon.ico with 16, 32, and 48 pixel images, plus favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest. The 48 pixel image stays inside the ICO file, so the ZIP has no separate 48 pixel PNG.
The HTML snippet contains icon links, the manifest link, the selected Theme color, and the site name in an HTML comment.
Crop or fit a favicon image
Crop to fill scales the image until the square is covered, then removes overflow from the centered edges. Fit with padding keeps the whole image visible and adds a small safe-zone margin inside the square. Changing another setting runs the selected fit mode again.
Input: source image
Fit mode: Fit with padding
Output: a centered square icon with the complete logo visibleChoose a favicon background and site details
Transparent leaves the canvas transparent when the source supports it. White fills the canvas with white. Custom color uses the value selected in Custom background color. Theme color is written into the HTML snippet and the manifest. Site name (used in manifest & preview) supplies the manifest name and browser tab preview title. The field accepts up to 40 characters.
Site name: My Site
Theme color: #ff9b51
Manifest name: My Site
Manifest theme_color: #ff9b51What happens when an image cannot load?
If the selected file is rejected, the status shows Please choose a supported image file. If the browser cannot decode it, the status shows This file could not be decoded as an image. Click Replace image to clear the source, previews, snippets, and download state before choosing another file.
Place the generated files on your site
Download the ZIP when the Browser tab preview and Size previews look right. The HTML snippet uses root paths such as /favicon.ico and /site.webmanifest, so place the downloaded files at those paths or edit the paths before pasting.
For a rectangular image, Fit with padding keeps the complete source visible inside the square. Crop to fill covers the square and trims the centered edges.
Changing Site name (used in manifest & preview) or Theme color regenerates the snippets and updates the browser tab preview title. Copy the updated HTML and manifest text after the change.
When another image generator fits better
Use this favicon generator when you need browser icons, a touch icon, a manifest, and matching HTML. The parent Image Generate Tools category includes other image outputs. Choose Image Layout Maker for grid, masonry, freeform collage, or contact-sheet layouts. Choose QR Code Generator for a QR code from a URL, text, email, phone number, or Wi-Fi network. Choose Sprite Sheet Generator to combine image frames with a JSON and CSS coordinate manifest.
Frequently asked questions
How do I generate favicons from one image?
Drop a logo or image here, choose Fit mode and Background, set Site name (used in manifest & preview) and Theme color, then click Download favicon package (.zip). The page generates the image files and text snippets after the image loads.
What is included in the favicon package ZIP?
The ZIP includes the multi-size favicon.ico, five standalone PNG files, and site.webmanifest. The HTML snippet appears on the page for copying, but it is not listed as a ZIP file.
Should I use Crop to fill or Fit with padding?
Choose Crop to fill when the square should be covered and edge content can be trimmed. Choose Fit with padding when the complete source image should remain visible inside the square.
Does this favicon generator upload my image?
The image is read, drawn, and packaged in the browser. This page's script contains no request that sends the image to a server.