Favicon and app icon generator

How to make a favicon and app icons in four steps

1. Choose your logo or type letters. Upload a logo as a PNG, JPG, WebP or SVG, or type 1 to 3 letters and pick a background color.
2. Adjust color, padding and corners, then check the previews. Set the background color, letter color, padding and rounded corners. Turn on the fill option to give every icon a background. Then check the previews: a browser tab on a light and a dark theme, a phone home screen, a search-result size and the maskable icon in three masks.
3. Download the ZIP. One ZIP holds every file, plus the snippet. You can also download files one by one, or only the .ico.
4. Upload the files to your site and paste the snippet. Put the files in the root folder of your site, or follow the steps for your platform below. Then copy the snippet into the head of your pages.

The small set of files a site needs

Older guides ask for dozens of sizes. A short set now covers browsers, phones and installable web apps.

Designing an icon that still reads at 16 pixels

A favicon is shown at 16 to 32 pixels. Thin lines, small text and a full wordmark turn to mush, so the icon has to be simpler than your logo.

• Use 1 to 3 bold letters, or one bold symbol cut from your logo.
• Pick high contrast between shapes and background. Use our color contrast checker to test your pair.
• Fill most of the square. Small padding keeps the mark large.
• Test it on a light and a dark browser tab. A dark logo on a transparent background disappears on a dark theme, so give it a background.

Letters are the fastest choice. A logo works when its main shape is simple, such as a monogram or a leaf. If yours has fine detail, crop to the part that stands out.

App icons and the maskable safe zone

When someone installs your site as an app, Android may crop the icon into a circle or rounded square, depending on the phone. A maskable icon is built for this.

A maskable icon must be opaque, with no transparent pixels. Keep everything important inside a centered circle whose radius is 40% of the icon width. Anything outside can be cut. The tool shows the safe-zone ring over the icon in circle, rounded-square and square masks, so you can see what survives.

In the manifest, keep the purposes separate: icon-192.png and icon-512.png as "any", and icon-maskable-512.png as "maskable". Do not write "any maskable" on one file, because one image cannot suit both.

The head snippet and the ICO sizes trap

The tool writes a paste-ready snippet with a comment above each line. It links favicon.ico with sizes="32x32", then icon.svg if you have one, then the Apple icon and the manifest.

The sizes attribute matters. Without it, Chrome can pick the wrong frame from the .ico and show a blurry icon. The SVG comes second, so browsers that read it use it.

Paste the snippet inside the head of every page, or in your shared layout. Upload the files to the paths it uses, usually the root, such as /favicon.ico. If you use another folder, change the paths.

Adding the icons to a Next.js site

In the App Router, file conventions are simplest. Check the current Next.js docs for your version, since details change.

• Put favicon.ico in the app folder. Next.js adds the link tag for you.
• Optionally add icon.svg or icon.png, and apple-icon.png, in the same folder. Each gets its own tag.
• For a manifest, add app/manifest.ts, or place site.webmanifest in public/.
• Prefer public/? Put the files there and set the icons field in the metadata, or paste the snippet into your layout.

Restart the dev server, then load /favicon.ico to confirm it is served. Keep only one copy.

Adding the icons to WordPress

WordPress has a Site Icon setting that makes the sizes for you. Menus differ by version.

• Open Appearance, then Customize, then Site Identity, and find Site Icon.
• With a block theme, the same setting may sit in the Site Editor or the Customizer, depending on your version.
• Upload a square image of at least 512 by 512 pixels. Use icon-512.png from the ZIP.
• Save and publish, then open your site in a private window to check.

You do not need the snippet. WordPress adds its own tags.

Adding the icons to Wix

On Wix, changing the favicon needs a Premium plan with a connected domain. Menu names change, so check Wix's help page.

• In the dashboard, open Settings and look for Favicon.
• Upload the PNG from the ZIP, for example icon-512.png.
• Save, and publish your site.

The icon can take a few minutes to a few days to appear. Wix handles the head, so skip the snippet.

Adding the icons to Squarespace

Squarespace calls it a Browser Icon, under Design. Menu names change, so check its help page.

• Open Design and look for Browser Icon.
• Upload one PNG of about 100 to 300 pixels, under 100 KB. It does not accept an .ico file.
• Use icon-192.png from the ZIP, or resize a PNG to that range.
• Save, then check in a private window.

It takes one image for the tab, so skip the snippet.

Why your favicon is not showing

Browsers cache favicons hard, so an old icon often lingers. Work through this list.

• Open the icon's address directly, such as yoursite.com/favicon.ico. If you see an error, the file is in the wrong place or blocked.
• Hard-refresh the page, or open it in a private window.
• Check the path in the link tag. A typo or a missing leading slash is the most common cause.
• Make sure the file is reachable by everyone and not behind a login or blocked by a rule.
• Be patient with search engines. Their icon needs a square image of at least 8 by 8 pixels (larger than 48 by 48 is recommended) at a stable address they can crawl. It may take days or weeks, and we cannot promise it will show.

The share image and meta tags

The same page makes a 1200 by 630 pixel share image, the picture shown when someone shares your link. Social platforms advise at least 1200 by 630 pixels (about 1.91 to 1), a minimum of 200 by 200 and up to 8 MB.

Some large cards use a 2:1 ratio, so edges may be cropped: keep text away from them. The tool shows the contrast ratio of your text, and our color contrast checker goes deeper.

The tool also writes meta tags: og:title, og:type, og:url, og:image, og:image:alt and the twitter: card tags. The image address is a placeholder. After you upload the image, replace it with the real absolute https address.

Platforms cache previews, so an old image can linger after you change it. The tool does not fetch or check any other site.

Your logo stays in your browser

Everything runs in your browser. Your logo is not uploaded, you need no account, and it works offline after the first load. An SVG you add is cleaned of scripts and event handlers and only ever shown as a picture.

Frequently asked questions