Favicon Generator
Turn a PNG, JPG or WebP logo into a favicon pack. Check the small-size previews, then download ICO, PNGs, an Apple Touch Icon, web manifest and installation instructions. Your image stays on your device.
FREE favicon generator
Favicon Generator
Generate favicon files from PNG, JPG or WEBP with crop, fit and transparent background options.
Your image stays on your device. No upload or account.
Installation files
The ZIP includes seven PNGs, a three-frame ICO, site.webmanifest, HTML tags and an installation README. If you already have a manifest, merge the icons into it.
From a logo to a favicon installed on your website
Start with a simple mark, ideally at least 512 ร 512 px. Fine lettering and small details disappear at 16 px. Choose Fit to retain the whole logo or Crop to fill the square. Check the generated icons on both light and dark backgrounds before downloading.
What is inside the ZIP
| File | Purpose |
|---|---|
| favicon-16x16.png / 32x32 / 48x48 | Small icons for browser tabs and bookmarks |
| favicon-96x96.png | A larger square icon for dense displays and search favicon use |
| apple-touch-icon.png ยท 180 ร 180 | Home-screen bookmark icon |
| favicon-192x192.png / 512x512 | Larger icons referenced by the manifest |
| favicon.ico | ICO container with three PNG frames: 16, 32 and 48 px |
| site.webmanifest | Site name and references to the 192 and 512 px icons |
| favicon-html-snippet.txt / README.txt | HTML tags and installation steps |
Install on an HTML website
- Unzip the pack and publish the images, favicon.ico and site.webmanifest in your site's public root.
- Add the tags below inside <head>. If you already have a manifest, merge the icons into your existing file and keep its application settings.
- Open the published file URLs and check the browser tab. For a site in a subdirectory, adjust the paths in both the tags and the manifest.
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">WordPress and other CMSs
If your theme or platform manages the site icon, use its dedicated setting to avoid duplicate tags. The 512 px PNG is a useful source; the required dimensions depend on the platform.
Why is it not showing in Google yet?
Google must be able to crawl your home page and icon file. Keep a stable icon URL and use a square image that represents your brand. Updates depend on recrawling and processing; generating the files does not guarantee appearance in results. Google's favicon guidance.
The generated manifest describes icons; it does not add offline features or PWA installability. The ICO uses PNG frames for modern browsers. For home-screen bookmarks, consider the white background option and test on your target devices.
How to use this free tool
- 1
Upload a PNG, JPG or WEBP image.
- 2
Choose crop or fit and background handling.
- 3
Generate the favicon files, then download individual files or a ZIP.
Good uses
- Create favicons for a small website.
- Generate an Apple Touch Icon from a logo.
- Preview how a square icon source fits before downloading assets.
From a logo to a favicon installed on your website
Start with a simple mark, ideally at least 512 ร 512 px. Fine lettering and small details disappear at 16 px. Choose Fit to retain the whole logo or Crop to fill the square. Check the generated icons on both light and dark backgrounds before downloading.
What is inside the ZIP
| File | Purpose |
|---|---|
| favicon-16x16.png / 32x32 / 48x48 | Small icons for browser tabs and bookmarks |
| favicon-96x96.png | A larger square icon for dense displays and search favicon use |
| apple-touch-icon.png ยท 180 ร 180 | Home-screen bookmark icon |
| favicon-192x192.png / 512x512 | Larger icons referenced by the manifest |
| favicon.ico | ICO container with three PNG frames: 16, 32 and 48 px |
| site.webmanifest | Site name and references to the 192 and 512 px icons |
| favicon-html-snippet.txt / README.txt | HTML tags and installation steps |
Install on an HTML website
- Unzip the pack and publish the images, favicon.ico and site.webmanifest in your site's public root.
- Add the tags below inside <head>. If you already have a manifest, merge the icons into your existing file and keep its application settings.
- Open the published file URLs and check the browser tab. For a site in a subdirectory, adjust the paths in both the tags and the manifest.
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">WordPress and other CMSs
If your theme or platform manages the site icon, use its dedicated setting to avoid duplicate tags. The 512 px PNG is a useful source; the required dimensions depend on the platform.
Why is it not showing in Google yet?
Google must be able to crawl your home page and icon file. Keep a stable icon URL and use a square image that represents your brand. Updates depend on recrawling and processing; generating the files does not guarantee appearance in results. Google's favicon guidance.
The generated manifest describes icons; it does not add offline features or PWA installability. The ICO uses PNG frames for modern browsers. For home-screen bookmarks, consider the white background option and test on your target devices.
Are files uploaded to Cobalt Tools?
No. This tool runs in your browser. Selected files and generated output are not uploaded or stored by Cobalt Tools.
Is this tool free?
Yes. This Cobalt Tools browser utility is free to use.
Which favicon sizes are generated?
The pack contains PNG files at 16x16, 32x32, 48x48, 96x96, 180x180, 192x192 and 512x512. The 180px file is named apple-touch-icon.png. favicon.ico contains three PNG frames at 16, 32 and 48 pixels.
Does it preserve transparency?
PNG and WEBP sources can preserve transparent areas when transparent background is selected. JPG sources are opaque.
How do I install the favicon files?
Upload the images, favicon.ico and site.webmanifest to your public root, then add the generated tags inside the HTML head. If a CMS manages your icon, use its setting instead. If you already have a manifest, merge the generated icons into that file.
Does the web manifest make my website a PWA?
The generated manifest only supplies a name and icon references. Offline functionality, application settings and installability requirements must be handled by your website.
Will the favicon immediately appear in Google Search?
Appearance is not guaranteed. Google needs to crawl the home page and the icon. Use a stable URL, allow crawling, and follow Google's favicon guidance. Browser and search caches can delay updates.