Check the favicon size for every device, then make favicon.ico, PNG icons, an apple-touch-icon, and a manifest from an image or text. Copy the HTML or Next.js code.
Create a favicon from an image or text
- Transparency is not used in apple-touch-icon and maskable files (iOS can show it as black), so those are filled with the iOS and maskable background color.
Preview
Files and downloads
Images are processed only in your browser and are not sent to a server. The ZIP also includes the HTML snippet (favicon-head.html).
Code settings
Favicon code
Paste this inside the <head> of your HTML.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#ffffff">
Favicon sizes by use
favicon.ico
Place in the site root. Covers older browsers and crawlers that request /favicon.ico directly
<link rel="icon" href="/favicon.ico" sizes="32x32">
icon.svg
For modern browsers. One file covers every resolution and can switch for dark mode
<link rel="icon" href="/icon.svg" type="image/svg+xml">
favicon-32x32.png
PNG favicon for browsers without SVG support (high-DPI tabs)
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
favicon-48x48.png
For Google Search results. Google asks for a multiple of 48px
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
Quick tips
- A minimal set is ico, svg, apple-touch-icon, and a manifest
- For Google Search, use a square icon that is a multiple of 48px (48, 96, 144px)
- Make the iOS icon a 180px square with no rounded corners or transparency
- List the 192px and 512px Android/PWA icons in the manifest
- Keep favicon.ico in the site root for compatibility
- If the old icon keeps showing, add ?v=2 to bust the cache
The files a complete favicon set includes
A modern site needs more than one icon file. Browser tabs use a 16 or 32 px favicon, Google Search results look for a multiple of 48 px, iPhones use a 180 px apple-touch-icon, and Android and PWAs read 192 and 512 px PNGs from a manifest. This page lists each size with its link tag, and builds the files and the code from your logo, an image, or a letter or emoji, all in your browser.
When you need a full favicon set
Launching or handing over a website
Upload one logo and get favicon.ico, the PNG sizes, the apple-touch-icon, and the manifest in one ZIP, with a ready-made HTML snippet.
Building a PWA
Create the 192 px and 512 px PNGs, a maskable icon, and site.webmanifest together, so the install prompt and splash screen use sharp icons.
A placeholder before you have a logo
Type a letter or an emoji, choose a background color, and download a simple favicon set for a prototype or a personal blog.
Getting an icon into Google Search results
Generate a 48 px icon and preview how it looks in a search result next to your site name before you publish.
How to make a favicon in 4 steps
- Choose From image or From text or emoji, then upload your logo or type your characters.
- Adjust the background, padding, and corner radius, and check the browser tab, search result, and home screen previews.
- Click Download all as ZIP, or download favicon.ico, each PNG, and site.webmanifest one by one.
- Open the Favicon code panel, pick HTML, Next.js, or manifest, copy the code, and place it in your site.
Note: The Favicon sizes by use section below the tool lists each size with its own link tag, and you can copy the tags for each tab.
Details that affect how your icons display
- favicon.ico: the generated file contains 16, 32, and 48 px images. Put it in your site root, because some crawlers and older browsers request /favicon.ico directly.
- apple-touch-icon: it has no rounded corners, and transparent areas are filled with the iOS and maskable background color.
- Maskable icon: the 512 px maskable file gets at least 22% padding on each side so the logo stays inside the crop.
- Source image: use a square image of 512 px or larger, or an SVG. A smaller image is enlarged and can look blurry, and the tool warns you when it is not square.
- Cache buster: enter a value such as 2 and every path in the generated code gets ?v=2.
Favicon size chart by device and browser
Each size, its file type, and where it appears.
| Device or use | Size (px) | File type | Where it appears |
|---|---|---|---|
| Browser tab | 16 x 16 | .ico / .png | Tabs and the bookmarks bar |
| High-DPI tab | 32 x 32 | .ico / .png | Tabs on high-resolution screens and the taskbar |
| Google Search | 48 x 48 (multiple of 48) | .ico / .png / .svg | The icon next to your site name in search results |
| iPhone and iPad | 180 x 180 | .png | Home screen icon (apple-touch-icon) |
| Android and PWA | 192 x 192 | .png | Home screen icon, set in the manifest |
| Android and PWA | 512 x 512 | .png | Install dialog and splash screen |
| Android (maskable) | 512 x 512 | .png | Adaptive icon that the OS crops into a shape |
| Modern browsers | Any (vector) | .svg | One scalable file, with dark mode support through CSS |
Quick rules for a working setup
- Keep favicon.ico. It stays the safest fallback, and it holds several sizes in one file.
- Use PNG for the rest. List the 192 and 512 px PNGs in the manifest, and link the 180 px apple-touch-icon from the head.
- Add an SVG if you want dark mode. Keep the ICO as a fallback, since SVG favicon support is narrower.
Windows tile (msapplication) tags and the Safari mask-icon are listed under Legacy because current browsers do not need them.
Google Search icons, Safari pinned tabs, and framework defaults
What decides whether your icon appears, and where hand-written tags collide with automatic ones.
Conditions for a favicon in Google Search results
Google reads the favicon from the link tag in the head of your home page. The icon file must be crawlable by Googlebot-Image and the home page by Googlebot, so do not block them in robots.txt.
The icon must be a multiple of 48 px square, or a square SVG, and its URL should stay stable. Google supports one favicon per site at the domain or subdomain level, and changes can take a few days or longer to show up.
Safari pinned tabs and the mask-icon tag
Older versions of Safari used a single-color SVG named in a mask-icon link for pinned tabs. This tool lists it under Legacy.
A regular favicon plus the apple-touch-icon covers current Safari, so add mask-icon only if you need to support older versions.
Next.js and WordPress add icons for you
The Next.js App Router reads favicon.ico, icon.png, apple-icon.png, and manifest.ts from the app folder and writes the link tags itself. WordPress builds its icons from the Site Icon you upload.
If you also paste link tags by hand, the page can end up with two sets of icons, so use one method.
Why your favicon is not showing or looks wrong
No favicon.ico in the site root
You list PNG and SVG icons in the head and skip favicon.ico. Some browsers and crawlers still request /favicon.ico directly, so your server logs fill with 404 errors and those clients get no icon.
💡 See the solution▼
A transparent apple-touch-icon with a black background on iOS
You export the logo with a transparent background. When someone adds your site to the iPhone home screen, the transparent area can show as black.
💡 See the solution▼
Missing icons in the web app manifest
A PWA that has only head tags and no manifest, or a manifest without the 192 and 512 px icons, can show a low-quality icon on install and no icon on the splash screen.
💡 See the solution▼
The old favicon keeps showing after an update
You replace the file and upload it, but the tab still shows the old icon because the browser cached it. It looks like a code error, so you keep editing the tags.
💡 See the solution▼
Favicon size and format FAQ
Q.What favicon sizes do I need?
A. A complete set has favicon.ico with 16, 32, and 48 px inside, an apple-touch-icon at 180 x 180 px, and 192 x 192 and 512 x 512 px PNGs listed in a web app manifest. An SVG favicon is optional. This tool generates all of them, plus a maskable 512 px icon for Android.
Q.What size should a favicon be for Google Search?
A. Google's guidelines say the favicon must be a multiple of 48 px square, such as 48 x 48, 96 x 96, or 144 x 144, or an SVG with a 1:1 aspect ratio. The favicon file must be crawlable by Googlebot-Image and your home page by Googlebot, and the favicon URL should stay stable. The tool outputs a 48 x 48 px PNG for this.
Q.Why is my favicon not showing in Google Search results?
A. Check that the link tag is in the head of your home page, that robots.txt does not block the icon or the home page, and that the icon is square and a multiple of 48 px. Google looks for the favicon when it crawls your home page, and updates can take a few days or longer to appear. Google supports one favicon per site at the domain or subdomain level, not per subdirectory.
Q.What is the difference between ICO, PNG, and SVG favicons?
A. An ICO file stores several sizes in one file, which is why a favicon.ico in your site root is still the safest fallback. PNG favicons give a sharp icon at the exact size you list. SVG is a single scalable file that can adapt to dark mode with CSS, but browser support is narrower, so keep the ICO as a fallback.
Q.Can I make a favicon from text or an emoji?
A. Yes. Choose From text or emoji, type up to four characters, and pick a text color, weight, and background. The tool draws it to every size and builds favicon.ico, the PNGs, the maskable icon, and the manifest. It works as a placeholder when you do not have a logo yet.
Q.Why should the apple-touch-icon have no transparency?
A. iOS rounds the corners itself, and a transparent area can show up as a black background on the home screen. This tool never rounds the corners of the apple-touch-icon, and if your background is transparent it fills the icon with the iOS background color you choose.
Q.What is a maskable icon?
A. A maskable icon is a PNG that Android can crop into different shapes, such as a circle or a rounded square. Keep the logo inside the central safe zone. The tool adds at least 22% padding on each side of the maskable file and lists it in the manifest with purpose: maskable.
Q.How do I use the generated files in Next.js or WordPress?
A. For the Next.js App Router, copy the files into the app folder using the names shown in the Next.js tab, and add the manifest.ts it generates. The link tags are then output for you. In WordPress, upload a 512 px PNG under Site Icon in the Customizer. Avoid adding the same icons again by hand with link tags.
Q.My new favicon is not updating. What should I do?
A. Browsers cache favicons aggressively. Hard refresh the page, clear the cache, or add a version query such as /favicon.ico?v=2. The Cache buster field in the code settings adds it to every path in the generated code.
Q.Are my images uploaded to a server?
A. No. Loading, resizing, and building the ICO and ZIP all happen in your browser with JavaScript, and nothing is sent to a server. Your image is held only in the page while it is open.
Your feedback
makes this tool better.
Tell us which features you'd like, what should be fixed, or which new tool you'd like to see. An engineer reads every submission and uses it to guide development.