How to Make a Favicon in 2026 (Without Photoshop, Without Pain)

A favicon is the tiny icon that shows up in your browser tab. You've seen thousands of them. The little Twitter bird, the Reddit alien, the Google G. They're so small you barely register them, but a missing or broken favicon is one of those things that quietly screams "this website is unfinished."

Making one used to be straightforward. You'd open Photoshop, make a 16x16 square, save as .ico, done. In 2026, it's both easier and more complicated. Easier because you don't need Photoshop. More complicated because there are now seven or eight different favicon files you arguably should have, depending on which devices you care about.

This guide will walk you through what's actually needed, what's overkill, and how to make the whole set without paying for software.

What a Favicon Actually Is

A favicon is just a small image displayed in places where your website needs to be recognized at a glance: browser tabs, bookmark lists, mobile home screens, search results.

For most of internet history, favicons were specifically .ico files at 16x16 pixels. ICO is an old Microsoft format that can store multiple sizes inside one file, which was useful when Windows wanted icons at different resolutions for different contexts. The .ico format still works today and every browser still supports it.

But modern browsers, especially on mobile devices, want more than that 16x16 icon. iOS wants a 180x180 PNG for when someone adds your site to their home screen. Android wants its own sizes. Browsers on high-DPI displays want larger versions to avoid looking blurry. Search engines sometimes use favicons in results pages and prefer higher resolution.

The practical result is that a "modern favicon" is really a collection of files, not a single icon. The minimum useful set in 2026 looks like this:

• A 32x32 PNG (default for most browsers)
• A 180x180 PNG (Apple touch icon for iOS home screen)
• A 192x192 and 512x512 PNG (Android home screen)
• An .ico file containing 16x16, 32x32, and 48x48 (legacy support)
• An SVG version (optional but increasingly recommended)

That sounds like a lot. The good news is you can make all of them from a single high-quality source image without too much trouble.

Start With the Right Source Image

The single most important decision is your source image. Get this wrong and every favicon you make from it will be slightly off.

The source should be square. Not "almost square," exactly square. Browser tabs allocate a perfect square for your favicon. If your source is rectangular, it'll either get stretched or shown with empty space on the sides, and neither looks good.

The source should be at least 512x512 pixels. Smaller than that and you'll see quality degradation in the larger Android sizes. Larger is fine, you can always scale down. Going up is what hurts quality.

The design itself should be readable at very small sizes. This is the part most people get wrong. A logo that looks great at 200 pixels can become an unrecognizable blob at 16 pixels. Test by zooming out: if your design becomes mush, simplify it. Most successful favicons are basically a single letter, symbol, or extremely simplified shape. Twitter is a bird silhouette. Spotify is three lines. YouTube is a play button. They're all dead simple because anything more complex stops working at favicon scale.

If you're starting from a complex logo, consider making a simplified version specifically for the favicon. Take the most distinctive element, isolate it, and use just that. Apple uses just the bitten apple, not the full word.

The Easiest Path: PNG to ICO

If you already have your design as a PNG, you only need a few minutes to make a usable favicon set.

For the .ico file itself, you need to convert your PNG to ICO format containing multiple sizes. This used to require desktop software, but in 2026 you can do it in your browser. Drop your 512x512 PNG into our PNG to ICO converter and you'll get back a multi-size .ico file ready to upload to your site. The conversion happens locally in your browser, the file never goes anywhere else.

For the various PNG sizes (32x32, 180x180, 192x192, 512x512), you can use our Image Resizer to generate each one from the same source. Start with your 512x512 master image and resize down. Don't go the other way (resizing up from a small image will look terrible).

For checking that your .ico file actually contains all the sizes you expect, drop it into our ICO Viewer. It'll show you every size embedded in the file, which is useful for verifying that the conversion worked correctly before you upload.

That's the whole workflow. Source PNG, convert to ICO for legacy support, resize to multiple PNG sizes for modern browsers, verify with the viewer. Maybe ten minutes once you've got the source image ready.

What HTML Tags You Actually Need

Once you have the files, you need to tell browsers where to find them. This goes in your site's <head> section.

The bare minimum that works almost everywhere:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

This is the only line you absolutely need. Every browser supports it. If you only do this and nothing else, your site will have a favicon.

The recommended modern setup:

<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">

The first two lines give modern browsers a clean PNG favicon. The third line handles iOS home screen icons. The fourth line points to a web manifest file that describes your Android home screen icons.

A minimal site.webmanifest looks like this:

{ "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

Place all these files in the root of your site, add the HTML tags, and you've covered every major browser and device on every major platform.

Common Mistakes to Avoid

Using a rectangular image and hoping it'll look fine. It won't. The browser will distort it or center it with empty space. Always make your source perfectly square.

Making the favicon too detailed. At 16x16 pixels you have 256 pixels total to communicate your brand. That's not much. Strip the design down to its essence before scaling.

Forgetting transparency. If your favicon is going to sit on different backgrounds (light mode, dark mode, various browsers), use transparent PNG or make sure the background is intentional. A white square favicon on a dark browser theme looks like a glitch.

Using only the .ico file. It works, but you'll get blurry icons on retina displays and mobile devices. The full modern set is worth the extra five minutes.

Caching surprises. Browsers aggressively cache favicons. When you update yours, you might still see the old one for days. To force a refresh during testing, append a query string to the file path in your HTML, like favicon.ico?v=2. Or just clear your browser cache.

Forgetting to test on dark mode. Many browsers and platforms now have dark themes. Open your site in both light and dark mode to make sure the favicon is visible in both. If your icon is dark, it'll disappear on a dark browser background.

Do You Actually Need All These Sizes?

Honestly, for most small projects, no. You can ship a perfectly functional favicon with just an .ico file and an apple-touch-icon, and most users will never notice anything missing.

The full set matters more if:

• You expect significant mobile traffic, especially iOS where the home screen icon is highly visible
• Your site is going to be added to home screens as a Progressive Web App
• You care about looking polished on high-DPI displays
• You're working on a project where attention to detail is part of the brand promise

For a quick personal project or a prototype, the .ico file alone is fine. You can always add the rest later when you're ready to polish things.

A Word on SVG Favicons

Modern browsers (Chrome, Firefox, Safari, Edge in their current versions) now support SVG favicons. This is great because SVG is vector, so it scales infinitely without quality loss, and you can include light and dark mode variants directly in the file.

The catch is that older browsers don't support it, and you still need PNG/ICO fallbacks. So adding an SVG favicon means more files, not fewer. It's worth doing if you're aiming for the highest quality, but skippable if you just want something that works.

If you want to add it, the HTML looks like this:

<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" href="/favicon-32x32.png">

The browser will use the SVG if it can, fall back to PNG if not.

The Quick Recipe

For anyone who just wants the fastest path:

1. Make a square image at 512x512 in whatever tool you're comfortable with (Figma, Canva, even Microsoft Paint if it's simple enough)
2. Convert to ICO using a PNG to ICO converter
3. Resize to 180x180 and 32x32 using an image resizer
4. Upload all three files to your site root
5. Add the HTML tags from the section above
6. Test in Chrome, Safari, and on your phone

That covers maybe 95% of real-world use cases. The remaining 5% is polish for sites where favicon quality genuinely matters, and you can add that later if you need to.

Favicons are one of those small details that nobody notices when they're done right and everyone notices when they're done wrong. Spending fifteen minutes to do it properly is one of the cheapest improvements you can make to a website's perceived quality.