Development · Free tool
Favicon Generator
The favicon generator turns your logo into the small icons browsers and phones show for your website: favicon.ico, 16 and 32 pixel PNGs, an Apple touch icon, Android icons and a web app manifest. Open a PNG, JPEG, WebP or SVG, frame it in a square, check the previews and the browser tab, then download a ZIP and copy the HTML tags. Everything happens in your browser.
Free, no sign-up Runs in your browser
Favicon Generator
Browser tab preview
Every size
- 16 × 16
Browser tab - 32 × 32
Tab on high-resolution screens - 48 × 48
Windows, search results - 180 × 180
Apple touch icon - 192 × 192
Android home screen - 512 × 512
Install and splash screen
16, 32 and 48 are shown at their real size; the larger icons are scaled down. The Apple icon is previewed with rounded corners, as on an iPhone home screen.
Download
Paste these lines inside the <head> of every page (or your site's template).
Where the files go
Upload all seven files to the root of your website, the same folder as your home page, so that https://www.example.com/favicon.ico opens the icon. Some apps and browsers look there even without the HTML. If your site runs on WordPress or a website builder, use its site icon (favicon) setting instead and upload the 512 × 512 PNG there.
Your image is processed in your browser. It is not uploaded to our server or stored.
How to use the Favicon Generator
- 1 Open your logo or symbol. A simple, square image of at least 512 × 512 pixels works best.
- 2 Choose whether to show the whole image or crop it to a square, and add padding if it touches the edges.
- 3 Pick a transparent or solid background, and fill in your website's name for the manifest.
- 4 Check the previews, including the light and dark browser tabs.
- 5 Download the ZIP, upload the files to your website's root folder and paste the HTML into the <head> of your pages.
What it does
- favicon.ico with 16, 32 and 48 pixel images in one file
- favicon-16x16.png, favicon-32x32.png and a 180 × 180 Apple touch icon with a solid background
- 192 and 512 pixel Android icons and a site.webmanifest that lists them
- Previews at every size and in light and dark browser tabs
- Fit or crop, padding, and transparent or coloured backgrounds
- The HTML link tags to paste, and a ZIP of all seven files
Useful for small businesses launching or refreshing a website, web developers and designers and anyone whose site shows a blank or default tab icon.
Limitations
- A detailed logo or long word mark is hard to read at 16 pixels. A simple symbol or initial usually works better than the full logo.
- SVG files are drawn as images, so external fonts or images they link to are not included. Convert text to outlines before you export the SVG.
- The tool does not make a maskable icon or an SVG favicon; the files it makes cover the usual browser, Apple and Android needs.
- Search engines and browsers cache favicons, so a new icon can take a while to appear.
The files and what each one is for
| File | Size | Used by |
|---|---|---|
favicon.ico |
16, 32 and 48 px in one file | Browsers, and apps that look for /favicon.ico |
favicon-16x16.png, favicon-32x32.png |
16 and 32 px | Browser tabs, bookmarks and history |
apple-touch-icon.png |
180 × 180 px, solid background | iPhone and iPad home screens |
android-chrome-192x192.png |
192 × 192 px | Android home screens (through the manifest) |
android-chrome-512x512.png |
512 × 512 px | Installed web apps and splash screens |
site.webmanifest |
text | The web app manifest: name, colours and icons |
Chromium-based browsers need at least a 192 and a 512 pixel icon in the manifest, which is why both are included. Apple looks for apple-touch-icon.png in the root folder even without a link tag, but linking it is clearer.
Installing them on your website
- Unzip
favicons.zipand upload all seven files to the root of your website, the folder that holds your home page. Check thathttps://your-domain/favicon.icoopens the icon. - Paste the HTML from the tool into the
<head>of every page, or once into your site’s template or theme header. - Open your site in a new private window to see the new icon; browsers keep old favicons in their cache for a while.
The sizes attribute on each link tells the browser which sizes a file contains, so it can pick the sharpest one. If your files live in a folder other than the root, change the paths in the HTML and in site.webmanifest.
Designing an icon that reads at 16 pixels
A favicon is shown at 16 × 16 or 32 × 32 pixels: about the size of one letter. Full logos with small text or thin lines turn into a blur. Use the simplest part of your brand: a symbol, a monogram or a bold initial. Fill the square (use little or no padding), use strong contrast, and check both the light and dark tab previews: a dark logo with a transparent background can disappear in a dark browser theme, so a solid background is often safer.
If you are refreshing your brand, our branding and design team can create a logo system that includes a small-size symbol, and our website design and development service sets up icons, the manifest and search metadata as part of every build. You can also check how your pages appear in search with the SEO checker, or resize images for social media with the social media image resizer.
Frequently asked questions
What size should a favicon be?
There is no single size. Browsers use 16 and 32 pixel icons in tabs, iPhones and iPads use a 180 × 180 Apple touch icon, and Android needs 192 and 512 pixel icons in the web app manifest. Google Search accepts a square favicon of at least 8 × 8 pixels but recommends one larger than 48 × 48. This tool makes all of these from one image.
Do I still need favicon.ico?
It is worth keeping. Some browsers and apps request /favicon.ico from the root of your site even when your pages link to other icons. The file made here holds 16, 32 and 48 pixel images, so it stays sharp at the common sizes.
Where do I put the favicon files?
Upload them to the root of your website (the same folder as your home page), so that example.com/favicon.ico opens the icon, and paste the HTML tags into the <head> of every page or your site's template.
Why is my Apple touch icon not transparent?
iOS does not keep transparency in home-screen icons, and transparent areas can show as black. The generator therefore always fills the Apple touch icon with your background colour. Keep the file a plain square: do not add rounded corners yourself.
Why does Google show the old icon or no icon?
Google has to recrawl your home page and the favicon, which can take days or weeks. The favicon must be linked from the home page, be square, and not be blocked by robots.txt. Even then, Google does not guarantee that it shows a favicon.
What is site.webmanifest for?
It is the web app manifest: a small JSON file with your site's name, colours and icons. Android and Chromium-based browsers use it when someone adds your site to their home screen or installs it as an app.
Sources
- Google Search Central: Define a favicon to show in search results
- web.dev: Add a web app manifest
- HTML Living Standard: link type "icon"
- Apple Safari Web Content Guide: Configuring Web Applications (apple-touch-icon)
- Apple Developer Forums: Website icon with transparent background becomes black
- Evil Martians: How to Favicon in 2026
- Microsoft Learn: Icons (the ICO file format)
Phoot Technologies
Need a website that looks right everywhere?
We design and build fast, accessible websites for businesses in Ghana and beyond, with the icons, metadata and branding set up properly from the start.
Related tools
Brand Colour Generator
Build a brand palette with colour-harmony rules, check its contrast against WCAG and pair it with free fonts and a wordmark mock-up.
Marketing · Runs in your browser
Image Compressor
Make JPG, PNG and WebP images smaller, resize them or convert between formats, without uploading them.
Images · Runs in your browser
Social Media Image Resizer
Crop and resize one image to each platform's profile, cover, post and advert sizes, with the source of every size.
Images · Runs in your browser
SEO Checker
Check one page's title, headings, indexing rules, structured data and links, with a plain fix for every problem.
SEO & websites · Runs on our server