Favicon Generator: favicon.ico, Apple touch icon and web app manifest
Make favicon.ico, PNG and Apple icons, a web app manifest and the tags to paste, from a logo or letters.
- Free to use
- Runs in your browser
- No sign-up
Embed this tool on your websiteFree. Paste one code; it runs in your visitors' browsers.
Copy this code into a page of your site. The tool sets no cookies and sends nothing your visitors type to us. Change height="760" if it needs more room.
About the Favicon Generator
Open your logo (PNG, JPEG, WebP or SVG) or make a letter icon from one or two letters, a colour and a shape. You get the icon sizes sites use (16, 32 and 48 px, a 180 px Apple touch icon, 192 and 512 px icons and a maskable icon for a web app manifest), a favicon.ico holding three sizes, site.webmanifest, the link tags to paste and a ZIP of everything, with previews in a browser tab, a Google result and a phone home screen. Our checks flag a logo that is not square, is too small, has empty transparent edges or loses its detail at 16 px. Everything runs in your browser: your logo is not uploaded.
How it works
-
Step 1
Open your logo, or choose letters and type one or two, with the colours and shape you want.
-
Step 2
Add your site name and colours for the web app manifest, then look at the previews and checks.
-
Step 3
Download the ZIP, put the files in your site's main folder and paste the tags into the head of every page.
What Google asks of a favicon
Google Search Central says the favicon must be square (1:1) and at least 8 × 8 px, and recommends larger than 48 × 48 px so it looks good on different surfaces. Googlebot-Image must be allowed to crawl the favicon file and Googlebot the home page, the favicon URL should stay stable, and there is one favicon per domain or subdomain. Google reads it from a link element in the head of your home page, and does not promise to show it even when all of this is in place.
The other files in the ZIP
Apple's Safari guide uses a link with rel="apple-touch-icon" for the home screen icon, with 180 × 180 in its iPhone example; with no link, Safari looks for apple-touch-icon.png in the site's root folder. web.dev says Chromium needs a 192 × 192 and a 512 × 512 icon in the web app manifest, and a maskable icon keeps its artwork inside a centred circle 80% of the width, so Android can crop it to its own shape. The favicon.ico holds 16, 32 and 48 px versions in one file, which the ICO format allows (MDN).
What this tool cannot do
It cannot see your site, so it cannot tell whether the files are in place or whether Google has picked up your favicon; Google shows a change only after it crawls your home page again. The detail and edge checks are our own measures. It does not redraw a detailed logo for small sizes: if the 16 px preview looks like a smudge, a simpler mark or a letter icon works better.
Frequently asked questions
Where do I put the favicon files?
In your site's main (root) folder, so they open at addresses like smilestudio.example/favicon.ico, then paste the tags into the head of every page. If the files go in a folder, type it in "Where the files go" and the tags and manifest follow it. On WordPress, Shopify and other site builders, look for the "Site icon" or "Favicon" setting and add the 512 px PNG there.
Why does Google still show the old icon or a globe?
Google picks up a new favicon after it crawls your home page again, and it must be allowed to crawl both the page and the favicon file. Keep the favicon address the same once it is set, since Google asks for a stable URL. Google also says a favicon is not guaranteed to show, even when you follow its guidelines.
What size should my logo be?
Square and at least 512 × 512 px gives the sharpest results, because 512 px is the largest file made here (our suggestion); an SVG logo is sharp at every size. Google's own minimum is 8 × 8 px, with larger than 48 × 48 px recommended. A wide logo is padded or cropped to a square; for a wide wordmark, a letter icon is often clearer in a browser tab.
Should the background be transparent?
The browser tab icons can be transparent, but a dark logo on a transparent background can disappear on a dark browser theme, so look at both tab previews. The Apple touch icon and the maskable icon are filled with your background colour (our suggestion), because phones put their own shapes around them.
Is my logo uploaded?
No. Your browser opens the logo, draws every size and builds the ICO and ZIP files on your device. Nothing is sent to our server.
Related reading
Rather have us do it for you?
Tell us about your business and what you want to fix. We reply within one business day.
Talk to us Our service: Technical SEO servicesMore free tools
All tools- Website SEO Audit Crawl up to 50 pages and get a health score, every issue and a 30-day plan.
- Redirect Checker Trace 301/302 redirects, chains and loops to the final URL.
- Robots.txt Tester Test a URL against robots.txt and see which rule blocks or allows it.
- AI Bot Log Analyzer See how AI crawlers crawl your site from your server access log.
Want us to fix what the tool found?
Tell us about your business and what you want to grow. We reply within one business day with next steps, not a sales script.
- A reply within one business day
- A quick look at your site and search visibility before we talk
- Your details are only used to answer your enquiry