Practical Tools
Image

Favicon Generator

Click or drag your logo here

Square PNG with transparent background works best

A favicon is the small icon that appears in browser tabs, bookmarks, and search results. Getting the right set of sizes used to require a design tool or a paid service. Upload your logo or icon image and get the complete set of favicon sizes in one ZIP, ready to drop into your website.

No signupRuns in your browserFormula explained belowGeneral information only

How to use this tool

  1. 1Upload your logo or icon image. For best results, use a square image with a simple design that is recognisable at small sizes. PNG with a transparent background works best.
  2. 2Check the previews at each size to make sure the icon is clear and recognisable at 16x16px - the smallest browser tab size.
  3. 3Click 'Download ZIP' to get all sizes: 16x16, 32x32, 48x48, 180x180 (Apple Touch Icon), and 192x192 (Android/PWA).
  4. 4Add the files to your website's root directory and link them in the HTML head using the code snippet shown after download.

Example

Developer adding a favicon to a new website

Upload a 512x512 PNG logo with transparent background. Download ZIP with all five sizes. Add to the project root. Paste the provided HTML snippet into the head of the layout file. Favicon now appears in browser tabs, bookmarks, and Google search results.

Small business owner updating a website favicon

Current favicon is blurry and pixelated. Upload a clean vector-exported PNG of the logo. Download the favicon set. Replace old files on the server. New sharp favicon appears within minutes after a hard refresh.

Common use cases

  • Web developers generating the standard favicon set when launching a new website
  • Small business owners adding or updating a favicon on a DIY website
  • Freelancers preparing favicon assets to hand off to clients with a website build
  • Bloggers and content creators who want their site to look polished in browser tabs
  • App developers generating the PWA icon sizes for a Progressive Web App manifest
  • Anyone replacing a blurry or outdated favicon with a crisp up-to-date version

Common mistakes

  • Using a complex or detailed logo as the source - at 16x16px, fine detail disappears. Use a simplified version or just the initial/icon element of your logo.
  • Using a rectangular image - favicons are square. A wide logo will be squeezed or padded. Crop or create a square version first.
  • Forgetting to add the HTML link tags - placing the favicon files in the root is not enough. The browser needs the link tags in the head to find them.
  • Not clearing the browser cache after updating - old favicons are aggressively cached. Use Ctrl+Shift+R (or Cmd+Shift+R on Mac) to see the new one.

Frequently asked questions

What sizes are included in the download?

16x16px (browser tab), 32x32px (taskbar and high-DPI tabs), 48x48px (Windows site icon), 180x180px (Apple Touch Icon for iOS home screen), and 192x192px (Android and PWA). These cover the standard requirements for modern browsers and devices.

Do I need an ICO file or are PNG files enough?

Modern browsers support PNG favicons. However, including an ICO file (which can embed multiple sizes) ensures compatibility with older browsers like Internet Explorer. This tool provides PNG files at all standard sizes. Name one 'favicon.ico' or use a separate ICO converter if you need the ICO format specifically.

What is the Apple Touch Icon?

The 180x180px PNG is used by iOS when someone adds your website to their home screen. It appears as the app icon. Without it, iOS uses a screenshot of the page, which looks poor. The 192x192px size serves the same role for Android and Progressive Web Apps.

Are my images uploaded to a server?

No. All processing runs in your browser using the Canvas API. Your images never leave your device.

What is the best source image format?

A square PNG with a transparent background at 512x512px or larger gives the best results. Transparent backgrounds ensure the icon looks clean against any browser theme.

How do I add the favicon to my website?

Place all files in your website root directory and add these tags to the head of your HTML: <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>, <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, and <link rel='manifest' href='/site.webmanifest'> for the PWA icon.

Related tools

Last updated