Upload any image and get a complete favicon package in one ZIP. Includes sizes for browsers, iOS, Android PWA, and Windows. Nothing is uploaded.
Last updated: August 2026
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.
Five steps, all running locally in your browser.
Drop your logo or icon
A square PNG, JPG or WebP at 512x512 or larger works best. Nothing is uploaded.
Set your site name, optional
Used inside site.webmanifest and the HTML comment. Defaults to My Website.
Review the preview
Check 16, 32, 48 and 180px before downloading. Small sizes are the least forgiving.
Download the ZIP
One favicon-package.zip with every icon size, the manifest, and the HTML snippet.
Install on your site
Upload the files to your root directory and paste the link tags into your head section.
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.
Copy the HTML link tags below, or open README.html in a text editor, not your browser, since the file only contains link and meta tags with no visible content and will look blank if opened directly. Paste the tags 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, favicon-32x32.png and favicon-48x48.png
Individual PNG files for the same three sizes packed into the ICO, provided separately for browsers and tools that prefer explicit PNG link tags over the ICO file. The 16px version appears in browser tabs, the 32px version is used on high DPI displays and in bookmarks, and the 48px version covers larger tab and icon contexts.
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) regardless of your source image. Open the webmanifest file and change the theme_color and background_color values to match your brand before deploying.
Uploading a non-square logo and expecting it not to squish
The generator scales your image to fill a square canvas at every size with no letterboxing. A wide horizontal logo will look stretched. Crop to a square first, or use a simplified square version of your mark.
Changing the site name but forgetting to click Regenerate
Editing the site name field alone doesn't update an already-generated package. Click Regenerate afterward to rebuild site.webmanifest and the HTML snippet with the new name.
Opening README.html directly in a browser
It only contains link and meta tags with no visible page content, so a browser shows a blank page. Open it in a text editor instead, or just copy the HTML snippet already shown on this page.
Assuming favicon.ico alone covers iOS and Android
favicon.ico only handles browser tabs and Windows. iOS needs apple-touch-icon.png and Android/PWA needs the two android-chrome PNGs plus site.webmanifest, all included separately in the ZIP.
Using a highly detailed logo and expecting it to stay legible at 16px
Fine lines, gradients, and complex photography become unrecognisable at browser-tab size. A bold letter or simple symbol reads far better than a full detailed logo.
PNG to ICO
Convert a single PNG to favicon.ico with custom size selection
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
The ZIP contains favicon.ico (multi-size with 16, 32 and 48px embedded), favicon-16x16.png, favicon-32x32.png, favicon-48x48.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 the 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.
It's used inside site.webmanifest as the name and short_name fields, and in a comment at the top of the HTML snippet. If you change it after already generating a package, click Regenerate to rebuild the manifest and HTML with the new name, changing the field alone doesn't update the already-generated files.
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, open it in a text editor instead. The file only contains an HTML comment and a handful of link and meta tags with no visible page content, so opening it directly in a browser shows a blank page rather than readable instructions. You can also just copy the HTML snippet shown directly on this page after generating your package, which is the same content.
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 link tags 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, there's no letterboxing to preserve the original aspect ratio. 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.
No sign-up. No uploads. Drop your logo above and download the full package in seconds.