Favicon Generator

A favicon is the tiny icon that represents your website in browser tabs, bookmarks, history listings, and the home screen when someone adds your site to their phone.

Despite being only a few pixels wide, it is one of the most visible pieces of branding a website has. A well-crafted favicon makes your site instantly recognizable among dozens of open tabs, and a missing or pixelated one makes your site look unfinished. This favicon generator takes any square image (or a short text label) and produces the complete modern set of favicon files in one click.

Favicon requirements have grown considerably since the original 16×16 ICO days. Modern browsers, iOS, Android, and Progressive Web Apps each ask for different sizes: 16 and 32 pixels for desktop tabs, 180 for the Apple touch icon, 192 and 512 for Android and PWA manifests, and a multi-resolution ICO for legacy compatibility. Generating these by hand in an image editor is tedious and error prone.

This tool runs entirely in your browser. Your image never leaves your device, there is no account, and nothing is stored. Upload a PNG, JPG, or SVG, or type one or two letters, and the tool builds every required size plus a ready-to-paste HTML snippet and a downloadable ZIP.

What Is a Favicon

A favicon (short for "favorites icon") is a small square graphic that identifies a website in places where the full page is not shown. The most visible location is the browser tab, where the favicon sits to the left of the page title. Other places include the bookmarks bar, the history dropdown, the back/forward menu tooltips, search engine result pages that show site icons, and the icon a phone uses when a user adds a website to their home screen.

The original favicon format was a single 16×16 pixel ICO file that browsers fetched from /favicon.ico at the site root. That format still works as a fallback, but modern browsers prefer PNG files at larger sizes to render crisply on high-DPI displays and when used as app icons.

Required Favicon Sizes in 2026

The modern favicon package includes six PNG sizes plus one ICO:

• 16×16 PNG — tiny size used in browser tabs on low-DPI displays.
• 32×32 PNG — the workhorse desktop tab size on standard and high-DPI monitors.
• 48×48 PNG — used by some Windows contexts and ICO files.
• 180×180 PNG — the apple-touch-icon, used when iOS users add your site to their home screen.
• 192×192 PNG — Android home-screen icon, referenced in site.webmanifest.
• 512×512 PNG — large Android splash icon and PWA installation icon.
• favicon.ico — multi-resolution container holding the 16, 32, and 48 variants, for legacy and Windows shortcut compatibility.

Serving all of these sizes costs a few kilobytes and ensures your icon looks sharp in every browser, operating system, and use case.

Generating from an Image vs from Text

Upload a logo when you have a finished brand mark that will still read clearly at 16 pixels square. Detailed images with fine lines, gradients, or small text tend to turn into indistinct blobs at tiny sizes, so square, high-contrast logos work best. Vector SVG inputs are ideal because they can be rasterized cleanly at every target size.

Use the text favicon mode when you do not have a logo yet, or when a single initial will be more legible than the full mark at 16 pixels. One or two uppercase letters on a solid background with a rounded or circular shape is the same approach used by Google, Slack, Figma, and most SaaS products for their in-app tab icons. This mode produces a favicon you can ship today and replace later.

Privacy First: This Tool Runs in Your Browser

Many online favicon services ask you to upload an image to their server, where it is resized and returned. That approach exposes your image to an unknown third party, often keeps a copy, and is unnecessary for this kind of processing. Favicon resizing is a trivial Canvas API operation that every modern browser handles natively.

This generator loads nothing but the HTML, CSS, and JavaScript of the page itself, plus a small ZIP-building library from a public CDN. No image you upload or letter you type is sent anywhere. You can verify this by opening your browser’s network tab and watching what happens when you click Generate. The only network activity is the initial page load.

ICO File Format Explained

The ICO format is a container file designed by Microsoft in 1995 to hold multiple versions of the same icon at different sizes and color depths. A single ICO can hold 16×16, 32×32, 48×48, and larger variants so the operating system can pick the best one for a given context.

The file starts with a six-byte header: two reserved bytes set to zero, two bytes identifying this as an icon file (value 1), and a two-byte count of images. Each image then gets a 16-byte directory entry listing its width, height, color palette size, number of planes, bits per pixel, data size, and data offset. After the directory entries come the raw image bytes, which can be either old-style BMP data or, since Windows Vista, embedded PNG data. This tool uses the PNG-in-ICO variant, which every modern browser supports and which keeps file size small.

The 256×256 corner case is handled by encoding the dimension as zero in the one-byte width and height fields, since one byte cannot hold the value 256. Smaller sizes (16, 32, 48, 64, 128) are written directly.

The HTML to Paste in Your <head>

The generated snippet includes seven lines. The first is a traditional <link rel="icon" type="image/x-icon" href="/favicon.ico"> that works as a universal fallback. The next three declare the PNG variants at 16, 32, and 48 pixels for browsers that respect size hints. The apple-touch-icon line tells iOS which image to use when the user taps "Add to Home Screen." The 192 and 512 PNGs are declared both as icons and are referenced again inside the site.webmanifest file for Android and PWA installation flows. Finally a theme-color meta tag lets you color the phone status bar when your site is installed as an app.

Place all the generated files in the root of your site (so /favicon.ico resolves correctly), paste the snippet into every HTML page’s <head>, and the browser will pick the best icon for each context automatically.

Testing Your Favicon

Browsers aggressively cache favicons, sometimes for days, so the most common "my favicon is not updating" issue is actually a caching issue. Force a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), clear the browser cache, or append a version query string like /favicon.ico?v=2 to the snippet to bypass the cache. Tools like realfavicongenerator.net provide a third-party checker that fetches your site and reports which icons are declared correctly. Your browser’s Developer Tools > Network tab also shows exactly which favicon file the browser requested and whether it returned a 200 or a 404.

Frequently Asked Questions

Do I still need a favicon.ico file in 2026?

Yes, but mainly as a fallback. Modern browsers prefer PNGs at declared sizes, but older browsers, legacy Windows shortcuts, and some feed readers still request /favicon.ico directly. Including one costs almost nothing and prevents 404 errors in server logs.

What size should my apple-touch-icon be?

180×180 pixels is the current recommended size. Apple’s guidance has changed over the years (57, 72, 114, 152, 180), but a single 180×180 PNG is scaled down cleanly on all current iOS devices. You do not need the older smaller sizes unless you are supporting very old iPhones.

Why isn’t my favicon showing up?

Nine times out of ten it is browser caching. Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), or open the site in a private window. If that does not help, check that the files are actually uploaded (request /favicon.ico directly in your browser) and that the HTML snippet is in the <head> on every page. Some servers also need a MIME type configured for .ico files.

Can I use an SVG as my favicon?

Modern browsers (Chrome, Firefox, Safari, Edge) all support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG gives you a single file that renders crisply at every size. However, iOS Safari still needs a raster apple-touch-icon for the home screen, and some older RSS readers only understand PNG or ICO, so the best practice is to ship both an SVG and a PNG fallback.

What is the difference between favicon.ico and favicon-16.png?

favicon.ico is a multi-resolution container holding 16, 32, and 48 pixel versions in one file; older browsers and Windows prefer it. favicon-16.png is a single PNG at 16×16 pixels that modern browsers pick via the sizes="16x16" attribute. Shipping both ensures compatibility across every browser and OS.

Do Progressive Web Apps need different favicon sizes?

PWAs use the icons declared in site.webmanifest, which conventionally references 192×192 and 512×512 PNGs. Android uses the 192 version for the home screen and the 512 version for the splash screen and install prompt. This generator produces both and includes a sample site.webmanifest in the ZIP.

Is it safe to upload my logo to an online favicon generator?

It depends on whether the site actually sends your image to a server. This generator does not — all processing happens in your browser, and you can verify that in the network tab of your browser’s developer tools. Many other online tools do upload to a server and may retain copies. If your logo is confidential, stick with a client-side tool or a local image editor.

Data accurate as of: April 2026