Favicon Generator

A favicon generator turns a single logo, image, or piece of text into the complete set of icon files a website needs, at every size browsers and devices expect, and our free tool builds that whole set in your browser in a couple of seconds. Drop in a square PNG, an SVG, or type a couple of initials, and you get a favicon.ico, the PNG sizes for phones and app installs, a web app manifest, and the exact HTML tags to paste into your page. There is nothing to install, no account to create, and because the whole thing runs on your own device, your image is never uploaded to a server. That last point matters more than it sounds, and we come back to it below.

A favicon is the little icon that sits in a browser tab, next to a bookmark, on a phone home screen after someone saves your site, and in the app list when a web app is installed. It is a tiny piece of a website, but it is the piece people see dozens of times a day, and a site without one looks unfinished. The tricky part is that "a favicon" is no longer one file. A modern site needs the icon at several sizes and in a couple of formats, plus a few lines of HTML that tell each browser where to look. Doing that by hand means opening an image editor, exporting six or seven files at exact pixel sizes, naming them correctly, and writing the markup from memory. A favicon generator does all of it from one source, which is why it has become a standard step in setting up any new site.

What a favicon generator does and when you need one

At its simplest, a favicon generator resizes one source image down to each size a website uses, packages the classic sizes into a favicon.ico, exports the rest as PNG files, writes a small manifest for Android and installable web apps, and hands you the HTML to wire it all together. You give it one good image; it gives you a folder of correctly sized, correctly named files and the markup to match.

You need one whenever you are launching or refreshing a website. A new blog, a landing page, a company site, a documentation portal, a web app, or a client project all want a favicon so the tab shows a brand mark instead of a blank sheet. You also need it when you redesign a logo and have to refresh every icon size at once, or when someone points out that your site shows a plain page icon on their phone because the Apple touch icon is missing. In all of these, generating the full set from one source is faster and less error-prone than exporting sizes one at a time.

The reason a dedicated favicon generator exists, rather than just a resize tool, is the sheer number of targets. Browser tabs, bookmarks, the Windows taskbar, iPhone home screens, Android home screens, PWA splash screens, and search results all pull the icon from slightly different places at slightly different sizes. Miss one and the icon looks broken exactly where it matters. The generator knows the full list, so you do not have to memorize it.

The sizes a modern favicon set needs

It helps to see the actual sizes and what each one is for, because this is the part people get wrong when they try to make a favicon by hand.

• 16x16. The classic favicon size, shown in the browser tab and next to a bookmark on a desktop. It is tiny, which is why simple, bold artwork reads far better than fine detail at this size.
• 32x32. Covers higher-resolution tabs, the Windows taskbar, and many bookmark views. On a sharp display, the browser often reaches for the 32x32 rather than the 16x16, so both should look clean.
• 48x48. Used by Windows in a few places and by some browsers for larger tab and shortcut displays. It is a useful middle step between the tiny tab icon and the phone icons.
• 180x180. The Apple touch icon, the image an iPhone or iPad shows when someone adds your site to the home screen. Apple ignores the .ico and looks for this PNG specifically, so a site without it shows a dull screenshot thumbnail instead of a logo.
• 192x192. The primary Android home screen icon, read from the web app manifest. When a visitor installs your progressive web app or pins it to their Android home screen, this is the icon that appears.
• 512x512. The large icon Android and PWAs use for the splash screen and the app listing. It is also a handy master size, since many site builders accept a single 512x512 PNG and derive the smaller sizes themselves.

A favicon generator produces all of these from one source, so a browser tab, a bookmark, a Windows taskbar, an iPhone home screen, an Android home screen, and an installed web app each receive an icon built for the exact size they display. That is the whole point of the set: every place your icon can appear gets a version that was made to look sharp there, not a blurry downscale of the wrong file.

The HTML tags that go with your favicons

Files alone are not enough. A browser only knows which icon to use because your page tells it, and that is the job of a small block of link tags in the head of the document. A good favicon generator writes these for you, but it is worth understanding what they do so you can place them correctly.

The core tags point a browser at the icons. One link tag references favicon.ico for the broadest compatibility, another can reference an SVG icon for browsers that prefer a crisp, scalable image, and an apple-touch-icon link points iPhones and iPads at the 180x180 PNG. A manifest link connects to a small web app manifest file, usually named site.webmanifest or manifest.json, which lists the 192x192 and 512x512 PNGs along with your app name and colors.

A typical block looks like this in spirit: a link with rel="icon" for the .ico, a link with rel="icon" and type="image/svg+xml" for the SVG, a link with rel="apple-touch-icon" for the Apple image, and a link with rel="manifest" for the manifest. You paste that block into the head of every page, usually through a shared template or layout so it appears site-wide, and drop the icon files where the tags say they live, often the site root. From there each browser reads the tags, picks the version it wants, and shows your favicon.

The generator's job is to make sure the files it exports and the paths in the tags line up, so you are not left editing markup to match filenames. Paste the tags, upload the files to the matching location, and the wiring is done.

How to use the ToolFiddle favicon generator

We built the favicon generator so you can get a complete, correctly named icon set without reading a manual. The flow is short whether you start from an image or from text.

• Add your source. Drag a square image onto the page, click to browse your device, or paste from the clipboard. A PNG or SVG at least 512 pixels on each side gives the sharpest result because it has detail to spare when the tool scales down. If you would rather start from text, switch to the text option, type a letter or a couple of initials, and pick a background color and a font.
• Preview the sizes. The favicon generator shows you how the icon looks at the small tab sizes and the larger phone sizes, so you can catch a mark that turns to mush at 16x16 before you ship it. If the tiny version looks crowded, simplify the source and try again; this preview is the cheapest place to fix a readability problem.
• Generate and download. The tool builds the favicon.ico, the PNG sizes, and the web app manifest, and packages them for download along with the HTML tags to paste into your page. Your original image is never changed, and because none of this touches a server, the set is ready the instant you ask, with no upload and no queue.
• Add the files to your site. Upload the icon files to your site, usually the root folder, and paste the link tags into the head of your pages. On a site builder, upload the 512x512 or 32x32 PNG in the site icon setting instead. Either way, the favicon appears once the browser refreshes.

A worked example: a favicon from a logo image

Say you have just finished a logo for a small coffee roaster and you want it in the browser tab before launch. The logo is a bean shape with the shop's initials, exported as a 1024x1024 PNG on a transparent background.

You open the favicon generator, drag in the PNG, and glance at the preview. At 512x512 and 180x180 the mark looks great. At 32x32 it is still clear. At 16x16 the initials inside the bean are starting to blur, because two letters plus a bean outline is a lot to fit in 16 pixels. So you go back, export a simpler version of the logo that drops the initials and keeps just the bold bean, and feed that in instead. Now the 16x16 reads cleanly as a bean, which is exactly what you want in a tab.

You generate the set. Out comes a favicon.ico holding the small sizes, PNG files at 32x32, 180x180, 192x192, and 512x512, a manifest listing the Android sizes, and a block of link tags. You upload the files to your site root, paste the tags into your layout template, and do a hard refresh. The bean now sits in the tab, on the bookmark, and on your phone home screen when you save the page. Total time, a few minutes, and the transparent background means the icon looks right on both light and dark tabs.

A worked example: a favicon from text

Now say you are spinning up a personal blog and you do not have a logo yet, but you still want a real favicon rather than a blank page. You switch the favicon generator to its text mode, type your first initial, choose a deep navy background, and pick a clean bold font. The preview shows a white letter on a navy square, sharp even at 16x16 because a single bold glyph is about the most legible thing you can put in a tiny icon.

You generate the set exactly as before and get the same full range of sizes plus the HTML. You drop the files into your static site folder, paste the tags, and your blog now has a crisp lettermark in the tab. Later, when you commission a proper logo, you run the image through the generator and swap the files. The text favicon carried you cleanly through launch, which is often all a new project needs.

Real-world use cases for a favicon generator

The tool earns its place across a range of everyday web work, and the thread through all of them is getting a correct, complete icon set without fuss.

• Launching a new website. Every fresh site, from a portfolio to a startup landing page, wants a favicon so the tab shows a brand instead of a blank document. Building the set from the logo is one of the last polish steps before going live.
• Rebranding an existing site. When a company updates its logo, every icon size has to change together, or visitors see the old mark in the tab and the new one on the page. A favicon generator regenerates the whole set from the new logo in one pass, so nothing is left stale.
• Building progressive web apps. An installable web app needs the 192x192 and 512x512 icons and a manifest, or the install prompt and home screen icon look wrong. The generator produces exactly those files and the manifest that references them.
• Client and agency work. If you build sites for other people, generating a proper favicon set for each project is a small touch that makes the delivery feel finished, and doing it from one source keeps it quick across many clients.
• Fixing the "no icon on iPhone" complaint. A site can have a working tab favicon and still show a plain thumbnail when someone saves it on an iPhone, because the 180x180 Apple touch icon is missing. Running the logo through the generator adds that file and the matching tag, and the home screen icon appears.
• Documentation sites, internal tools, and dashboards. Even a site with no marketing purpose reads as more trustworthy and is easier to find among a wall of tabs when it has a distinct favicon, so teams generate one for internal apps too.

Tips and common mistakes

A few habits make favicon sets come out clean, and a couple of errors are easy to avoid.

• Start from a square, high-resolution source. A 512x512 or larger square image gives the generator room to scale down sharply to every size. A small or oddly shaped source forces the tool to stretch or pad, and the tiny sizes suffer for it. If yours is off-square, the crop image tool squares it up first, and the image resizer gets it to an exact 512.
• Simplify for the small sizes. The 16x16 icon is the acid test. Fine detail, thin text, and busy backgrounds turn to mush at that size. If your logo is intricate, use a simplified version, a single symbol or a bold initial, for the favicon, and keep the full logo for larger spots.
• Use a transparent PNG or an SVG when you can. Transparency lets the icon sit cleanly on any tab color, light or dark. A JPG source has no transparency, so it brings a solid rectangle with it, which can look boxy against a dark tab. The background remover clears a backdrop when your only file is flattened.
• Do not skip the Apple touch icon or the manifest. These are the files people forget, and they are exactly the ones that make phone home screens and installed web apps look right. The generator includes them, so keep them in your upload.
• Place the tags site-wide, not on one page. Put the link tags in a shared template or layout so every page carries them. A favicon that only appears on the home page looks broken as soon as a visitor lands on an inner page from search.
• Expect the browser cache to fight you. Favicons are cached aggressively, so a new icon may not show until you hard refresh, clear the cache, or open a private window. A missing update is usually the cache, not a mistake in your files.

A closer look at the favicon standard

It is worth understanding a little history, because it explains why a favicon is a set rather than a single file. The favicon began as one file, favicon.ico, that browsers automatically requested from the root of a site. ICO is a Windows icon container that can hold several images at different sizes and color depths inside one file, which let a single favicon.ico carry both a 16x16 and a 32x32 version. For years that was the whole story.

Then the web spread onto phones and app platforms, and one small .ico was no longer enough. Apple introduced the touch icon so saved sites could show a proper image on the iPhone home screen. Android and the web app manifest arrived, defining larger PNG icons for home screens and splash screens. High-resolution displays pushed the useful sizes upward. More recently, browsers gained support for SVG favicons, which scale to any size from one small vector file and can even adapt to light and dark modes. Each step added a target, and the modern favicon set is simply the sum of all of them.

That is why a favicon generator is genuinely useful rather than a convenience. Producing the .ico with its embedded sizes, the separate PNG files for phones and web apps, the optional SVG, the manifest, and the correct link tags is a fiddly, easy-to-botch job by hand. A generator encodes the current standard so your icon shows up correctly everywhere it can appear, from a decade-old browser asking for favicon.ico to a brand-new phone installing your web app. The ICO piece is still the dependable base of the set, and if you ever want to build or convert just that file on its own, the PNG to ICO converter and the ICO converter handle it directly.

Your image never leaves your device

Here is the part that sets this favicon generator apart from most of the field, and it deserves a moment because file tools are exactly where privacy tends to slip. Most online favicon generators work by uploading your logo to a server, processing it there, and sending the icons back. That means a copy of your image, brand artwork you may not have published yet, travels across the internet and sits, at least briefly, on a machine you do not control.

Our generator does not work that way. Every step, reading your source, resizing to each size, building the .ico, writing the manifest, runs directly in your browser, on your own device, using your own hardware. There is no upload, no copy left on a server, and no log of what you made. You can switch off your internet connection after the page has loaded and the generator keeps working exactly the same, which is the plainest proof that your file is staying with you.

This is not a hypothetical worry. In 2025 the FBI's Denver field office warned the public that a wave of free online file-tool and converter sites were quietly harvesting the files people uploaded, and in some cases planting malware on their computers, all while appearing to work normally. A tool that takes your logo is a natural target, since brand assets and unreleased designs have real value. The surest defense is for the file never to reach anyone's server in the first place. On-device processing gives you that by design: your image is not exposed in transit, not stored where a breach could leak it, and not fed into anything you did not agree to, because it never leaves your hands.

Genuinely free, with nothing held back

The second thing that separates this favicon generator from much of the field is that it is free in the plain sense of the word. A lot of favicon sites are really a funnel toward a paid plan. The tool builds your icons, and then a watermark appears on the preview, or the high-resolution sizes are reserved for members, or the download is locked until you make an account and hand over an email address.

None of that happens here. There is no sign-up and no account, and we do not ask for your email. We do not stamp a watermark on your icons or hold back the large sizes to push you toward a paid tier, because there is no paid tier. There is no daily counter and no cap on how many sets you can generate. You can build a favicon for one project today and a different one tomorrow, and never hit a wall. Rival generators routinely gate the full set, the .ico, or the manifest behind a subscription. We built the opposite, on the view that a basic step in shipping a website should simply work for everyone.

Instant and unlimited by design

The third advantage falls straight out of running on your device. Because your image is never uploaded or downloaded, there is nothing to wait for. You do not watch a progress bar crawl while a large logo is sent over a slow connection, and you never sit in a queue behind other people at a busy moment. The favicon generator builds the whole set the instant you add your source, about as fast as your device can read and resize it.

The same design removes the artificial ceilings that server tools impose to control their costs. There is no small maximum file size to bump into, and no limit on how many favicon sets you can generate in a day. Because the page is not weighed down with the heavy advertising and tracking scripts that clog so many free tool sites, it opens quickly and stays responsive. The whole thing is meant to feel like a utility you own, not a service you are borrowing for a moment.

Works on any device, even offline

The favicon generator runs on a phone, a tablet, or a computer, in any current browser, and the layout adapts to whatever screen it finds. That matters more than it might seem, because a lot of people set up a site or tweak a logo on the go. You can generate a favicon set from your phone with no app to install, and because the work happens on the device, there is no slow upload of your image over a cellular connection. Once the page has loaded you do not need a live connection at all, so a patchy signal on a train or in a cafe will not stop you, and nothing depends on a particular brand of browser.

Related tools on ToolFiddle

Building a favicon is often one step in a short set of icon jobs, and the neighboring tools finish the rest. If all you need is a single .ico file from one PNG image, the PNG to ICO converter is the quicker, narrower path, since it focuses on that one conversion and lets you pick the sizes to embed. If you are working with ICO more broadly, converting a JPG or other format into an icon, or turning an existing .ico back into a PNG, the ICO converter handles conversion in both directions. And when your source logo needs to be squared off or trimmed before it becomes an icon, the crop image tool and the image resizer get it to the right shape and size first. If the master file is heavier than it needs to be, the image compressor trims it before you generate. Every one of these runs in your browser the same way this generator does, so your files stay with you across the whole workflow.

The short version

A favicon generator turns one image or a piece of text into the complete set of icon files a website needs, at every size browsers and devices expect, and produces the HTML tags to wire them in. That set covers the tab sizes like 16x16 and 32x32, the 180x180 Apple touch icon for iPhones, and the 192x192 and 512x512 icons for Android and installable web apps, packaged with a favicon.ico and a manifest. Start from a square, high-resolution source, simplify anything that turns to mush at 16 pixels, add the files and tags to your site, and clear the cache to see the result. Do all of it here, where your image never touches a server, there is no sign-up, watermark, or limit, and the whole set is ready the moment you ask.