How to Make a Favicon for Your Website (ICO, Apple and Android Icons)
Create favicon.ico and every icon size a website needs from one picture, with the HTML lines to paste into your pages.
The tiny icon next to your page title in the browser tab is the favicon. It looks like a small detail, but it helps visitors find your tab among many, makes bookmarks recognisable and appears in some search results. Different devices ask for different icon files, which is why this simple task confuses many site owners.
The free Favicon Generator makes all of them from one picture.
Quick answer
Choose a square logo of at least 512 pixels. Download a ZIP with favicon.ico, 16, 32 and 48 pixel PNGs, the Apple touch icon, the 192 and 512 pixel Android icons, a web manifest and the HTML lines to paste.
What each file is for
| File | Used for |
|---|---|
| favicon.ico | Classic browser tab icon, works everywhere |
| 16, 32, 48 px PNG | Tabs and bookmarks at different screen densities |
| Apple touch icon (180 px) | iPhone and iPad home screen |
| 192 and 512 px icons | Android home screen and installed web apps |
| Web manifest | Tells browsers which icons to use |
How to make the favicon, step by step
- Open the Favicon Generator.
- Choose a square picture, ideally 512 pixels or larger.
- Download the ZIP with every size.
- Upload the files to the root of your website.
- Paste the provided HTML lines into the head of your pages.
Designing an icon that works at 16 pixels
A favicon is displayed very small, so the usual rules of logos apply even more strongly:
- Keep it simple. One shape or a single letter is better than detailed artwork.
- Use bold colours with strong contrast.
- Avoid thin lines and small text, which disappear at 16 pixels.
- Leave a margin so the shape does not touch the edge.
- Test it by viewing at the real size in a browser tab.
Common problems
- The old icon still shows. Browsers cache favicons hard. Refresh with a hard reload or open the site in a private window.
- No icon at all. Check that favicon.ico is in the root and that the HTML lines point to the correct file names.
- A blurry icon on iPhone. Provide the 180 pixel Apple touch icon.
- Blank corners. Use a picture with a transparent background when you want shapes with no box.
Related tools
- Round your logo with Circle Crop.
- Convert a vector logo using SVG to PNG.
- Shrink PNG files with Compress Image.
Where favicons appear
A favicon shows up in more places than the browser tab:
- Bookmarks and favourites lists
- Browser history and the new-tab page
- Search results on mobile, where Google can show your site icon
- iPhone and Android home screens when someone adds your site
- Task switchers and pinned tabs
A clean, recognisable icon makes your site look established and helps users spot it in a crowd of tabs.
Design guidelines
- Use a simple mark, such as a single letter, symbol or minimalist logo.
- Pick strong colours that stand out on both light and dark browser themes.
- Avoid text other than a single letter or two.
- Use a square canvas with a margin, so rounded masks do not cut the edge.
- Test small sizes at 16 and 32 pixels.
- Be consistent with your brand colours and logo.
Installing the favicon in WordPress, Next.js or static sites
- Static HTML: upload the files to the site root and paste the link tags in the head.
- WordPress: use Appearance, then Customize, then Site Identity, and upload the 512 pixel icon.
- Next.js: place
favicon.icoand icons in the app folder, or reference them in metadata. - Shopify and other builders: upload the icon in the theme settings.
Checking your result
- Open the site in a private window to avoid cache.
- Visit
/favicon.icodirectly to see if it loads. - Use browser developer tools to check for missing icon requests.
- Wait for search engines: Google may take days or weeks to refresh a changed icon.
Your icon can also match the image on your social profiles for a consistent brand.
Quick checklist
- Use a simple square logo.
- Generate all sizes.
- Upload files to the site root.
- Paste the HTML lines.
- Test in a private window.
A worked example: a blog about study tips
Anika runs a blog and uses a simple orange square with a white letter "S" as her logo. She uploads a 512 pixel version to the Favicon Generator and downloads the ZIP. In her WordPress dashboard she opens the site identity settings and uploads the 512 pixel icon, which WordPress uses to create the other sizes. She then checks the site in a private browser window and sees the orange S in the tab. When she adds the site to her phone's home screen, the same icon appears as an app-like shortcut.
Troubleshooting
| Symptom | What to check |
|---|---|
| Old icon still showing | Clear the cache or open a private window |
| No icon on iPhone home screen | Make sure the 180 pixel Apple touch icon is present |
| Blurry icon | Start from a larger, simpler source image |
| Icon works in some browsers only | Provide favicon.ico and PNG versions with proper link tags |
| Search results show a globe | Search engines take time; ensure the favicon is crawlable and in the root |
Frequently asked questions
What size should the source picture be? A square picture of at least 512 pixels.
What do I get in the ZIP? favicon.ico, PNG sizes, Apple and Android icons, a manifest and HTML lines.
Where do I put the files? In the root folder of your website.
Is my picture uploaded? No. Everything is made in your browser.
Is it free? Yes.
Do I need all the sizes? Most sites need favicon.ico and the Apple and Android icons; the tool gives all of them.
Why does Google show the old icon? Search engines cache icons. It can take some time to refresh.
Can I use an animated favicon? Some browsers support it, but a static icon is more reliable.
Do I need a favicon for SEO? It is not a ranking factor, but it improves recognition and how your site looks in results.
Can I use a photo as a favicon? Small photos rarely look good at 16 pixels. A simple mark works better.
Next step
Open the Favicon Generator below, upload your logo and give your website a proper icon.
