Favicon Generator Online

Upload your image and get a complete favicon package — ready for any browser, device, or platform.

Click to upload or drag and drop PNG, JPG, SVG up to 5MB

Everything you need in one zip

What Is a Favicon and Why Does It Matter?

A favicon (short for "favourite icon") is the small image that appears in your browser tab, bookmarks bar, and search results. It is one of the first visual elements users notice when they visit or return to your website. A well-designed favicon builds brand recognition, improves user experience, and signals that your site is professional and trustworthy.

Without a favicon, browsers display a generic grey globe icon — which can make your site look unfinished or untrustworthy. Adding a favicon takes just a few seconds with the right tool, and the impact on your site's perceived quality is immediate.

Favicon Sizes Explained

Different browsers, operating systems, and devices require different favicon sizes. Here is a breakdown of the most important ones:

Size Format Used By
16×16 PNG / ICO Browser tab, address bar
32×32 PNG / ICO Browser tab (high-DPI), taskbar shortcut
48×48 PNG / ICO Windows site icons
180×180 PNG Apple Touch Icon (iPhone, iPad home screen)
192×192 PNG Android Chrome home screen shortcut
512×512 PNG Android Chrome splash screen, PWA

Our generator creates all of these sizes automatically from a single image upload. You do not need to resize anything manually.

How to Install Your Favicon

Once you have downloaded your favicon package, follow these steps to add it to your website:

  1. Extract the ZIP file — You will find several PNG files, a favicon.ico, and a site.webmanifest file.
  2. Upload the files — Place all files in the root directory of your website (the same folder as your index.html).
  3. Add the HTML tags — Copy the following code into the <head> section of every page on your site:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

After uploading and adding the tags, clear your browser cache and reload your site to see the new favicon in the browser tab. Changes may take a few minutes to appear in all browsers.

What Is a site.webmanifest?

The site.webmanifest file is a JSON configuration file that tells browsers how your website should behave when installed as a Progressive Web App (PWA) on a mobile device. It includes your app's name, theme colour, background colour, and icon paths. Our generator creates this file automatically with sensible defaults, so you can use it immediately without any manual editing.

Frequently Asked Questions

What is a favicon and why do I need one?

A favicon is a small icon that appears in browser tabs, bookmarks, and address bars. It helps users quickly identify your website among multiple open tabs and adds a professional touch to your brand identity.

What favicon sizes should I use?

Modern websites need multiple favicon sizes: 16×16, 32×32, and 48×48 for browsers; 180×180 for Apple devices; and 192×192 and 512×512 for Android. Our tool generates all these sizes automatically in one download.

Can I use PNG, JPG, or SVG files?

Yes! Our favicon generator accepts PNG, JPG, and SVG image formats up to 5MB. The tool automatically converts your image to all required formats and sizes.

Do I need to sign up or pay to use this tool?

No. Favicon Generator Online is completely free with no account required. Simply upload your image, customise if needed, and download your favicon package instantly.

What's included in the download package?

You'll receive a ZIP file containing: favicon.ico, multiple PNG sizes (16×16 to 256×256), Apple Touch Icon (180×180), Android Chrome icons (192×192 and 512×512), and a site.webmanifest file ready to use.

How do I add the favicon to my website?

Upload all files from the ZIP to your website's root directory, then add the provided HTML link tags to the <head> section of your pages. Full installation instructions are included in the section above.

Is my uploaded image stored on your servers?

No. Your image is processed entirely in your browser using JavaScript. Nothing is uploaded to or stored on our servers. Your files remain private at all times.

What is a site.webmanifest file?

It is a JSON file that configures how your site behaves when added to a mobile home screen as a Progressive Web App (PWA). It defines your app name, icons, theme colour, and display mode. Our generator creates this file automatically.