Upload any image and get a complete favicon package in one ZIP. Includes sizes for browsers, iOS, Android PWA, and Windows. Nothing is uploaded.
favicon.ico
16/32/48px
Apple
180px Touch
Android
192 + 512px
Private
No Uploads
What you get in the ZIP:
Drop your logo or icon here
PNG, JPG or WebP. Square images with simple, bold designs work best.
Your file never leaves this device.
Download and unzip the favicon-package.zip file.
Upload all files to the root directory of your website, the same folder as your index.html or homepage file.
Open README.html from the ZIP and copy the HTML link tags, then paste them into the <head> section of every page on your site.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Clear your browser cache and reload your site. The favicon should appear in the browser tab.
favicon.ico
The classic favicon format. A single file containing three sizes (16, 32 and 48px) that browsers pick from automatically. Supported by every browser including old versions of Internet Explorer. Browsers automatically look for this file at the root of your domain even without a link tag.
favicon-16x16.png and favicon-32x32.png
Individual PNG files used with explicit link tags. Modern browsers prefer these over the ICO file when both are declared. The 16px version appears in browser tabs, the 32px version is used on high DPI displays and in bookmarks.
apple-touch-icon.png
Used by iOS and iPadOS when a visitor saves your website to their home screen. Without this file, Apple devices use a low quality screenshot of the page. The standard size is 180x180 pixels. Safari applies its own rounded-corner mask to this image.
android-chrome-192x192.png and android-chrome-512x512.png
Used by Chrome on Android and any browser that supports Progressive Web App installation. The 192px icon appears when users add your site to their home screen. The 512px icon is used on the PWA splash screen shown while the app loads.
site.webmanifest
A small JSON file that tells the browser how to behave when your site is installed as a PWA. It includes your site name, icon paths, theme color and display mode. Referenced by the manifest link tag in your head section.
Start with a large square source
512x512 pixels or larger gives the resizing algorithm more to work with. The higher the source resolution, the sharper the 16px result.
Keep it simple
A logo, a letter, or a bold symbol works well at 16 pixels. Fine lines, gradients, and complex photography will not be recognisable at that size.
Use PNG for transparency
If your logo has a transparent background, upload it as a PNG. The ICO file will preserve transparency at each size.
Test in context
After installing, open your site in a browser tab next to several others. That is how most users will see it. If it is not recognisable in that context, simplify the design.
Consider dark mode
Modern browsers and operating systems support an SVG favicon variant that can change appearance based on the user's color scheme. This generator produces raster files, which look the same in both modes.
Update the theme color
The site.webmanifest and theme-color meta tag default to white (#ffffff). Open the webmanifest file and change the theme_color and background_color values to match your brand before uploading.
The ZIP contains favicon.ico (multi-size with 16, 32 and 48px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180 for iOS home screens), android-chrome-192x192.png and android-chrome-512x512.png (for Android and PWA), site.webmanifest, and a README.html file with ready-to-paste HTML link tags for your head section.
A square PNG, JPG or WebP image at 512x512 pixels or larger works best. Simple, bold designs with high contrast look sharpest at small sizes. Complex logos with fine details and thin lines tend to become unrecognisable at 16x16 pixels. If your logo is too detailed, a simplified version or just the first letter of your brand often works better as a favicon.
A web manifest is a JSON file that tells browsers how to display your site when installed as a Progressive Web App on Android or added to a home screen. It references the 192x192 and 512x512 icon files. You do not need it for a basic favicon in browser tabs, but it is required for a proper PWA setup and is good practice for any modern website.
When an iOS or iPadOS user adds your website to their home screen, Safari does not use the standard favicon. It looks for a file called apple-touch-icon.png at 180x180 pixels. Without it, iOS either uses a screenshot of the page or a blank icon. The generator produces this file automatically.
No. All processing happens locally in your browser using the Canvas API. Your image never leaves your device. You can disconnect from the internet after the page loads and the generator still works.
Place all the files from the ZIP in the root directory of your website (the same folder as your index.html). Then paste the HTML from README.html into the head section of your pages. Most browsers will also automatically find favicon.ico from the root directory even without the link tag, but including the link tags explicitly is recommended for full cross-browser and cross-platform coverage.
The generator scales your image to fill a square canvas at each size. If your logo is wider than it is tall, it will appear squished. For best results, crop your logo to a square before uploading, or use a simplified square version of your mark rather than the full horizontal lockup.
PNG to ICO
Convert PNG to favicon.ico with custom size selection. Download ICO only or full package.
JPG to ICO
Convert JPEG images to favicon.ico format.
ICO to PNG
Extract individual PNG images from an existing ICO file.
SVG to PNG
Convert an SVG logo to PNG before generating your favicon.
Resize to 512x512
Prepare a large square source image for the best favicon results.
PNG to SVG
Vectorize a logo or icon if you need a scalable source.