Free Favicon Generator: ICO, PNG and web manifest

Turn one image into a complete favicon set for your website: favicon.ico, PNG icons, an apple-touch-icon and a web manifest. It runs in your browser, and your image is not uploaded.

Complete icon set
.ico, PNG and PWA manifest
Next.js install snippet
No sign-up

1Add one square image (512×512+ is best)
2Pick a background and site name
3Download all icons or a single ZIP

What you get: favicon.ico (16 + 32 + 48 px), PNG icons in 6 sizes, an apple-touch-icon, two Android sizes, a site.webmanifest, and the exact HTML snippet to paste into your site. All made in your browser — nothing uploaded.

Processed on your device. Your image is never uploaded. How we keep it private

Runs in your browser
No upload
Icon set + manifest
No sign-up

Quick answer

ToolDeck Favicon Generator turns one image into the favicon files a website needs: favicon.ico, PNG icons, an apple-touch-icon and a web manifest. It runs in your browser, needs no sign-up, and your image is not uploaded. It also gives you an install snippet for Next.js.

Price: free, no account needed
Input: one image, ideally square
Output: favicon.ico, PNG icons, apple-touch-icon, web manifest
Install help: snippet for Next.js and standard HTML
Privacy: image is processed in your browser, not uploaded
Not included: logo design or image editing

Need the logo at an exact size first? Use the Image Resizer. Working on SEO tags for the same site? Try the Meta Tag Generator.

Why you need a full favicon set

A favicon is the small icon people see in the browser tab, in bookmarks and in history. It also shows up when someone adds your site to a phone home screen. A single tiny file is not enough for that: it can look blurry on high-density screens, and an Android or iOS home screen needs larger icons.

This generator creates the files for those different places from one image, plus the web manifest that installable web apps use.

Favicon sizes and files explained

What each file is for. Platform recommendations change over time, so check the current guidance for anything critical.

File	Size	Used for
favicon.ico	16, 32 and 48 px	Classic browser tab icon, bookmarks and history
PNG icons	16x16 and 32x32	Browser tabs on high-density screens
apple-touch-icon	180x180	iPhone and iPad home screen
Android / PWA icons	192x192 and 512x512	Android home screen, install prompts and splash screens
site.webmanifest	JSON file	Lists your icons, name and theme colors for installed web apps

How to create a favicon

1
Choose your image
Select the logo or image you want to turn into a favicon. A simple, square image with a clear shape works best.
2
Generate the icon set
The tool creates favicon.ico, PNG icons, an apple-touch-icon and a web manifest from your image, right in your browser.
3
Download and install
Download the files, upload them to your site and add the install snippet to your pages or to your Next.js layout.

How to add favicons to your website

For plain HTML, WordPress themes or other sites, put the files in your site's root and add link tags like these inside the head of your pages. This is an example. Match the file names and paths to what you actually upload.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Using Next.js with the App Router? Put favicon.ico in the app folder, and use the install snippet from the tool for the rest. Related: set your page title and description with the Meta Tag Generator.

What works well and what to keep in mind

A short, honest look at what this generator does and where you need to take care.

Works well for

Turning a logo into every common favicon size in one go
Getting a web manifest and Android icons for a PWA or installable site
Adding icons to a Next.js, WordPress or plain HTML site
Working on private brand assets that you do not want to upload

Keep in mind

Favicons are tiny. Detailed logos and long text become unreadable at 16 pixels, so use a simple mark.
This tool creates files from your image. It does not design or edit the logo for you.
Browsers cache favicons hard. After you change the icon you may need a hard refresh or a new file name to see it.
Google Search can take days or longer to show a new favicon, and it follows its own favicon guidelines.
Check the generated file names against the snippet you paste, since your own site may use different paths.

How this compares to other favicon generators

Favicon generators differ in what they output and how they handle your image. Some design tools also let you draw or edit a logo, which this page does not.

Feature	TToolDeck	Typical online generators
Runs in your browser	Yes	Varies
Image not uploaded to a server	Yes	Varies
No sign-up or email	Yes	Varies
favicon.ico, PNG and web manifest together	Yes	Varies
Next.js install snippet	Yes	Varies
Logo design or image editing	No	Varies

General comparison against types of tools, not specific products. "Varies" means it depends on the tool. Features differ between tools and can change.

Questions people ask

What is a favicon?

A favicon (favorite icon) is the small icon shown in the browser tab, bookmarks and history next to your page title. It helps people recognize your site at a glance.

How do I create a favicon from an image or logo?

Choose your image in the tool, generate the set, then download the files. Start with a simple, square image. The tool creates favicon.ico, PNG icons, an apple-touch-icon and a web manifest for you.

What size should a favicon be?

There is no single size. Browser tabs use 16x16 and 32x32, iOS home screens use 180x180, and Android and PWA icons use 192x192 and 512x512. For Google Search, the guidance is a square icon in a size that is a multiple of 48 pixels. Generating a set covers these uses together.

Why do I need multiple sizes?

Different devices and platforms ask for different sizes. Browsers use small icons in tabs, iOS uses 180x180 for the home screen, and Android uses 192x192 and 512x512 for home screen and install icons. A full set keeps your icon sharp in each place.

What is a .ico file?

ICO is an image format that can hold several sizes (for example 16, 32 and 48 pixels) in one file. It is the traditional favicon format and is still widely supported.

What is site.webmanifest?

The web manifest is a JSON file that tells browsers, especially on Android and for Progressive Web Apps, how your site should look and behave when installed. It lists your icons, name, theme color and display mode.

Is my image uploaded?

No. The icons are generated in your browser with the HTML5 Canvas API, so your image stays on your device. You can confirm this by watching your browser network tab while you use the tool.

How do I add a favicon to my website?

Upload the generated files to your site, usually the root folder, then add link tags to the head of your pages that point to them. A typical set is a link rel="icon" for favicon.ico and the 32x32 PNG, a link rel="apple-touch-icon" for the 180x180 icon, and a link rel="manifest" for site.webmanifest. Make sure the paths match where you uploaded the files.

How do I install the favicons in Next.js?

With the App Router, place favicon.ico in the app folder and Next.js picks it up automatically. For the other icons, use the install snippet from the tool to add them to the metadata in your layout.tsx, and put the files in your public folder.

Why is my favicon not showing or not updating?

Browsers cache favicons aggressively. Try a hard refresh, open the icon URL directly, or clear the site data. Also check that the file path in your link tag is correct, and consider adding a version to the file name when you change it. Google Search can take days or longer to refresh the icon it shows.

Should I use PNG or ICO for a favicon?

Use both. ICO is the long-standing format that older browsers expect, and PNG icons give crisp results on modern high-density screens. The tool generates both so you can include each in your site.

What makes a good favicon design?

Keep it simple. Use a bold shape or a single letter, strong contrast and few colors, and avoid fine detail or small text. Test it at 16 pixels, since that is how small it often appears in a browser tab.

Can I use a transparent background?

Yes, you can use a PNG with a transparent background. Remember that tabs can be light or dark, so check your icon on both. Some platforms, such as iOS home screens, may show a solid background behind transparency.

Your images stay on your device

There is no upload step and no account. Your browser creates the icons using the HTML5 Canvas API, and the files save straight to your downloads. Read how we keep it private.