How to Make a Favicon for Your Website

Create a favicon package from one image: favicon.ico, PNG icons, an Apple touch icon and a web manifest. Learn which sizes you need and how to add them to a site.

What a favicon is and where it appears

A favicon is the small icon that represents your website. Browsers show it in tabs, bookmarks, history and the address bar. Phones use a larger version when someone adds your site to their home screen, and search engines can display it next to your pages in results. A clear favicon makes your site easy to find among a dozen open tabs and makes it look finished and trustworthy.

Because the icon appears at many sizes, from 16 pixels in a browser tab to 512 pixels on an app launch screen, a modern favicon is not a single file but a small set of files plus a few lines of HTML.

Designing an icon that works at 16 pixels

The smallest favicon is 16 × 16 pixels, just 256 pixels in total. Full logos with words become an unreadable smudge at that size. Good favicons are simple:

• Use a single letter, a monogram or a simplified symbol from your logo rather than the full wordmark.
• Choose strong contrast between the icon and its background, and check it on both light and dark browser themes.
• Use bold shapes and thick lines. Fine details disappear when the image is scaled down.
• Start from a square source image of at least 512 × 512 pixels, or an SVG, so the larger icons stay sharp.

If your source is not square, crop it first with the Image cropper using the 1:1 ratio. If you only have a vector logo, the Favicon generator accepts SVG files directly.

What a favicon package contains

The Favicon generator creates every file most sites need from one image:

• favicon.ico: a classic multi-size icon file containing 16 × 16, 32 × 32 and 48 × 48 versions, used by browsers and tools that look for /favicon.ico automatically.
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png and favicon-64x64.png: PNG icons for browser tabs and bookmarks.
• apple-touch-icon.png: a 180 × 180 icon used when someone adds your site to the home screen on an iPhone or iPad.
• android-chrome-192x192.png and android-chrome-512x512.png: icons for Android home screens and installed web apps.
• site.webmanifest: a web app manifest that points to the Android icons.
• head-tags.html: the HTML link tags to paste into your pages.

Google Search asks for a square favicon whose size is a multiple of 48 pixels. The 48 × 48 and 192 × 192 files in the package meet that recommendation.

How to create your favicon step by step

1. Open the Favicon generator and drop your logo or icon image onto the page. PNG and SVG sources work best.
2. Choose Fit. Contain keeps the whole image visible, while Cover fills the square and trims anything that sticks out.
3. Set Padding from 0% to 30% to add breathing room around the icon. The default is 8%.
4. Keep Transparent ticked for a transparent background, or untick it and pick a Background color.
5. Preview the result, then select Download ZIP, or download individual files from the list.

Transparent or solid background?

Transparent icons look elegant in browser tabs, but home-screen icons are different. iOS does not keep transparency in Apple touch icons, so transparent areas can appear black or filled in by the system. If you want a transparent tab icon and a solid home-screen icon, run the generator twice: once with Transparent ticked for the favicon files and once with a background color for apple-touch-icon.png.

Adding the favicon to your website

1. Unzip the package and upload the image files and site.webmanifest to the root folder of your site, so that favicon.ico is available at https://your-domain/favicon.ico.
2. Open head-tags.html and copy its lines into the head section of every page, or into the shared layout or template your site uses.
3. Open site.webmanifest in a text editor and replace the placeholder name and short_name values, which are set to Website, with your site’s name.
4. If you placed the files in a subfolder instead of the root, update the paths in the link tags and in the manifest to match.

The tags reference favicon.ico for browsers that prefer it, the 32 × 32 PNG for modern tabs, the Apple touch icon for iOS and the manifest for Android. Most content management systems also have a site icon setting that accepts a single square image; in that case, upload the 512 × 512 PNG.

Testing your favicon

Browsers cache favicons aggressively, so a new icon may not appear straight away even when it is installed correctly. Open the site in a private window, or visit /favicon.ico directly to confirm the file is reachable. Check the tab in both light and dark browser themes, add the site to a phone’s home screen to see the large icon, and bookmark a page to see the small one. Search engines update favicons on their own schedule, which can take from days to weeks.

Frequently asked questions

Do I still need favicon.ico?

Modern browsers can use PNG or SVG icons, but some tools, feed readers and older browsers still request /favicon.ico automatically. Including it avoids missing-icon errors in your logs.

Is my logo uploaded to generate the icons?

No. All sizes, the ICO file and the ZIP are created in your browser, so the image never leaves your device.

Can I make favicons for several sites at once?

Yes. Add several images and the generator creates a separate package for each, which you can download together as a ZIP.