A favicon is the small icon that appears in browser tabs, bookmarks and history. This favicon generator turns one image into every file a modern site needs, plus the HTML to add them, all inside your browser.
How to use the favicon generator
- Upload an image, such as your logo or logo mark. A square image works best. If it isn’t square, it is centred with padding so it isn’t stretched.
- Check the previews of the generated sizes, especially the tiny 16 × 16 one.
- Copy the HTML
<link>tags shown by the tool. - Download everything as a ZIP, unzip it into your site’s root folder, and paste the tags into the
<head>of your pages.
What’s in the ZIP
| File | Size | Used for |
|---|---|---|
favicon.ico | 16, 32 and 48 px in one file | Browsers that look for /favicon.ico by default |
| PNG 16 and 32 px | 16 × 16, 32 × 32 | Browser tabs and bookmarks, normal and high-density screens |
| PNG 48 px | 48 × 48 | Larger browser and system icons |
| PNG 180 px | 180 × 180 | Apple touch icon: when someone adds your site to an iPhone or iPad home screen |
| PNG 192 and 512 px | 192 × 192, 512 × 512 | Icons listed in the web manifest, for Android home screens and installed web apps |
site.webmanifest | – | A small JSON file that lists the 192 and 512 px icons |
An ICO file can hold several images of different sizes, and the browser picks the one it needs. That is why one favicon.ico contains three sizes.
The HTML tags
The tool gives you the exact tags for its files. A typical set looks like this, placed inside <head>:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The sizes and type attributes are hints that help the browser choose the best icon without downloading every file. MDN’s page on the link element explains rel="icon", sizes and apple-touch-icon. Our lesson on the HTML head, meta tags and SEO shows where these tags fit.
What the web manifest does
The site.webmanifest file is a JSON file that tells the browser about your site as an app: its name, icons and colours. The recommended file extension is .webmanifest. According to web.dev’s guide to the web app manifest, Chromium-based browsers need at least a 192 × 192 and a 512 × 512 icon, which is why this favicon generator makes both sizes.
Tip: Open the manifest in a text editor and fill in your site’s name and short_name, if they aren’t already there. You can also set theme_color and background_color to match your brand.
Tips for a clear favicon
- Simplify. At 16 × 16 pixels a full logo with text turns into a blur. Use a single letter, a symbol or the logo mark.
- Start big. Upload an image of at least 512 × 512 pixels so the large icons stay sharp.
- Check both themes. Browser tabs can be light or dark. A transparent PNG with a dark logo can disappear on a dark tab, so consider a solid background shape.
- Clear the cache when testing. Browsers keep favicons for a long time. Use a private window or hard refresh to see a new one.
Learn more
- HTML Head, Meta Tags and SEO
- Semantic HTML for SEO and Accessibility: A Practical Guide
- WordPress Theme Development Basics: Classic vs Block Themes Explained
- Image Resizer
- Image Background Remover
Frequently asked questions
Do I still need favicon.ico in 2026?
It’s a good idea. Some browsers and tools still request /favicon.ico from the site root even without a link tag. Including it, along with PNG icons, covers both old and new browsers.
Is my image uploaded?
No. All the sizes, the ICO file, the manifest and the ZIP are created in your browser.
Where do I put the favicon files?
The simplest place is the root folder of your website, next to your home page, so the paths in the link tags start with /. If you put them in a subfolder, update the paths in the tags and in the manifest.
How do I add a favicon in WordPress?
WordPress has a built-in Site Icon setting: upload a square image there and WordPress creates the sizes and tags for you. Use the files from this tool when you build your own theme or a static site.