How to make a favicon and app icons for your website

Look at the tab of any well-made website and you will see a tiny picture next to the page title. That is the favicon. It helps people spot your site among many tabs, it appears in bookmarks and browser history, and phones use a bigger version when someone adds your site to their home screen. Making one is easy once you know which files a modern site needs.

Which files do you need?

File	Size	Used for
favicon.ico	16, 32 and 48 px in one file	Browser tabs, bookmarks. The classic that nearly everything supports.
favicon-32x32.png, favicon-16x16.png	32 and 16 px	Modern browsers that prefer PNG.
apple-touch-icon.png	180 × 180 px	iPhone and iPad home screens.
android-chrome-192x192.png, -512x512.png	192 and 512 px	Android home screens and installed web apps.
site.webmanifest	Text file	Tells Android the name, icons and theme colour of your site.

The Favicon Generator makes all of them from one picture, plus a ready-made snippet of HTML, and gives you everything in a single ZIP.

Choose a good starting picture

A favicon is tiny, 16 pixels wide in a browser tab, so the design has to survive being very small:

• Keep it simple. A bold shape, a single letter or a simplified logo works. Thin lines and small text vanish.
• Make it square, or close to it. If your logo is wide, either use only its symbol or let the tool fit the whole image with space around it.
• Start big. Use an image of at least 512 × 512 pixels so the largest icons stay sharp. A PNG or SVG with a transparent background is ideal.
• Think about light and dark browser themes. A transparent favicon with dark lines can disappear on a dark tab. A solid coloured background avoids the problem.

Make the set

1. Upload your logo. The page warns you if the image is smaller than 512 pixels.
2. Choose Fit the whole image to keep all of it, or Crop to a square to fill the icon.
3. Pick a background: transparent, white or any colour. Add rounded corners and some space around the image if you like. The iPhone icon always stays square, because iOS rounds its icons itself.
4. Enter your site name and a theme colour for the manifest.
5. Check the previews of every size, then download the ZIP.

Install it

1. Upload all the files from the ZIP to the top folder of your website, so that /favicon.ico works.
2. Paste the lines from head-snippet.html into the <head> of your pages. They look like this:

   <link rel="icon" href="/favicon.ico" sizes="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">

3. On WordPress, Wix, Shopify and many other builders there is a “Site icon” or “Favicon” setting. Upload the 512-pixel PNG there instead and the platform makes the other sizes.

If it does not show up

• Browsers cache favicons hard. After changing yours, open the site in a private window, or clear the cache, to see the new one. Search engines may take days or weeks to update the icon in results.
• Check the path. Open yoursite.com/favicon.ico directly. If you get a “not found” page, the file is in the wrong folder.
• Make sure the link tags are in the head, and not in the page body.
• Search results want a square icon whose size is a multiple of 48 pixels (48 × 48, 96 × 96 and so on) that Google can crawl. The favicon.ico declared as 48 × 48 in the snippet meets this.

One more option: an SVG favicon

Modern browsers also accept an SVG favicon, which stays sharp at any size and can even adapt to dark mode. If your logo is already an SVG, add a line such as <link rel="icon" href="/favicon.svg" type="image/svg+xml"> in addition to the ICO and PNG files, so older browsers still have something to show.

The image you upload stays on your device and is never sent to a server, as explained in Are online file converters safe?.