How to Make a Favicon for Your Website (ICO, PNG, Apple and Android Icons)

Short answer: start with a simple square image, run it through Imgovo’s Favicon Generator, download the ZIP, put the files in the root folder of your site and paste the provided HTML into the <head> of your pages. Site builders such as WordPress, Shopify and Wix usually have a “Site icon” setting where you can upload the 512 px PNG instead.

What a favicon is for

The favicon is the small icon in the browser tab. It also appears in bookmarks and browser history, and phones use related icons when someone adds your site to the home screen. A site without one shows a generic placeholder, which looks unfinished.

Because the icon is shown very small, the design matters more than the resolution.

Design for tiny sizes

• Keep it simple. A bold shape or one or two letters works. A detailed logo turns into a smudge at 16 × 16 pixels.
• Use strong contrast. Tabs can be light or dark.
• Prefer a square source. If your logo is wide, place it on a square canvas.
• Use a transparent background if you want the icon to blend with the tab. For photos, the generator crops to a square from the centre.
• Leave a little room. The padding and rounded corners settings can help the shape breathe.

If your logo has a background you do not want, Remove Background can make it transparent first. See How to remove the background from a photo. To give a square logo rounded corners or a circle, Round Image saves a transparent PNG.

Step by step

1. Open the Favicon Generator.
2. Add your image. PNG, SVG, JPG, WebP and more are accepted.
3. Choose how it is fitted: crop to a square from the centre, or fit the whole image.
4. Choose the background (transparent or a colour), padding and rounded corners. Defaults for padding and rounded corners are 0%. You can also enter an optional app name.
5. Check the previews.
6. Download the ZIP.

Undo and Redo work with Ctrl+Z and Ctrl+Shift+Z.

What is in the ZIP

File	Size	Used for
favicon.ico	16, 32 and 48 px in one file	Browser tabs, older browsers
favicon-16x16.png	16 px	Browser tabs
favicon-32x32.png	32 px	Browser tabs, high-density screens
apple-touch-icon.png	180 px	iPhone and iPad home screens
android-chrome-192x192.png	192 px	Android and installable web apps
android-chrome-512x512.png	512 px	Android and installable web apps, site icon uploads
site.webmanifest	–	Describes the icons for installable web apps

The Apple icon gets a solid background because iPhones and iPads show transparent areas as black.

Add the files to your site

1. Unzip the files into your site’s root folder, next to your index.html.
2. Copy the HTML from the generator’s “Copy HTML” box.
3. Paste it into the <head> of every page, or into the shared layout or template of your site.

A typical set of tags looks like this. Use the exact snippet the generator gives you, because it matches your file names:

<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">

On a website builder, find the “Site icon” or “Favicon” setting and upload the 512 px PNG. The builder then makes the other sizes itself.

If the new icon does not appear

Browsers cache favicons aggressively. After you upload new files:

• Reload the page with a hard refresh.
• Open the site in a private window or another browser.
• Check that /favicon.ico opens directly in the address bar.
• Wait. Search engines can take a while to show a new icon.

Create only an ICO

If you only need favicon.ico, use the “Download favicon.ico only” button. For other sizes, Resize Image can make a plain PNG at the exact dimensions you need. Format questions are covered in JPG vs PNG vs WebP vs AVIF.

Privacy

Your logo never leaves your computer. The icons are created in your browser, and the ZIP is built there too.

Do it now

Open the Favicon Generator, add your logo and download the full icon set.