Favicon Generator

Upload any image and generate a complete favicon set in all required sizes. Download as PNG files.

Drop image or click to upload

Best results: square PNG or SVG

Sizes to generate

16×16 — browser tab · 32×32 — taskbar · 180×180 — Apple touch · 192×192 — Android

Generated favicons
will appear here

What is a Favicon?

A favicon (short for "favourite icon") is the small image that appears in browser tabs, bookmarks, browser history, and on a device's home screen when a website is saved as a shortcut. Despite its tiny size — typically 16×16 or 32×32 pixels — the favicon is one of the most visible brand elements on the web. A missing favicon causes browsers to display a generic grey icon, which signals an unfinished or unprofessional site. A well-designed favicon reinforces brand recognition every time a user glances at their open tabs.

What Sizes Does a Favicon Need to Be?

16×16 px — The classic browser tab size. This is the baseline favicon all browsers expect.
32×32 px — Used by some browsers for higher-DPI displays and taskbar icons.
180×180 px (Apple Touch Icon) — Used when a user saves your site to their iOS home screen. Displayed as a full app-like icon.
192×192 px and 512×512 px — Used in Progressive Web App (PWA) manifests for Android home screen icons and splash screens.

How to Add a Favicon to Your Website

Download the generated favicon files and place them in the root of your website (e.g. the/public folder in Next.js). Then add the following tags inside your <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

How to Create a Favicon from a PNG or JPG

Upload your logo or image — a square PNG at 512×512 or larger gives the cleanest result.
The generator resizes it into every favicon size (16, 32, 180, 192, 512) automatically.
Download the sizes you need and drop them into your site's root or /public folder.
Add the <link> tags shown above to your <head>.

Frequently Asked Questions

What image should I use as the source?

Start with a square image at the highest resolution available — ideally your logo or a simplified version of it. The generator will resize it down to the required sizes. Avoid fine text or complex detail that will become unreadable at 16×16 pixels. Simple geometric shapes and bold single letters work best at small sizes.

Should I use .ico or .png for my favicon?

Modern browsers support PNG favicons natively, and PNG is simpler to generate and deploy. However, the .ico format is still recommended as a fallback because it is supported by every browser and email client without exception. The recommended approach is to serve a PNG as the primary favicon with an ICO fallback, as shown in the HTML snippet above.

Is my image uploaded to a server?

No. The favicon generator runs entirely in your browser using the Canvas API. Your image is processed locally and never sent to any server. You can safely use confidential logos or proprietary artwork.

Why does my favicon not update after I change it?

Browsers aggressively cache favicons. After updating your favicon, do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear your browser cache. You may also need to close and reopen the tab. Cached favicons on users' devices will update automatically the next time the cache expires, typically within a few days.

Does a favicon have to be square?

Yes — favicons are displayed in square slots, so a non-square source image will be stretched or letterboxed. Crop or pad your image to a 1:1 ratio before uploading for the best result. Bold, simple artwork reads far better at 16×16 than detailed logos.

What favicon sizes do I actually need in 2026?

A practical minimum is 32×32 (or a multi-size .ico) for browser tabs, 180×180 for the Apple touch icon, and 192×192 plus 512×512 if you ship a web app manifest. The generator produces all of these so you can pick what your project requires.