β Favicon Generator
One upload β multi-size ICO, PNG set, Apple touch icon, and the HTML snippet.
Every Favicon Size, Generated in One Click
A favicon is the tiny icon in browser tabs, bookmarks, and phone home screens, and it does outsized work for brand recognition. Users spot their tabs by icon long before reading titles. This tool turns any logo into the complete modern favicon set: a multi-resolution ICO file (16, 32, and 48 px in one file), individual PNGs for browsers that prefer them, a 180 px Apple touch icon for iOS, and the exact HTML snippet to paste into your pages. Everything renders in your browser from your upload; nothing is sent anywhere.
Understanding the File Set
Browsers are picky in different ways, which is why one file is not enough. The ICO file is the veteran: every browser requests /favicon.ico by default, and bundling three resolutions in it covers standard tabs, high-DPI displays, and Windows shortcuts. PNG favicons with explicit <link rel="icon"> tags give you crisper rendering in modern browsers and let you specify exact sizes. The Apple touch icon (180x180, PNG) is what iOS uses when someone adds your site to their home screen; without it, iPhones show an ugly screenshot thumbnail instead.
Designing a Favicon That Works at 16 Pixels
Sixteen pixels is brutally small. Detailed logos turn to mush, thin lines vanish, and text becomes noise. The best favicons are ruthlessly simple: a single bold letter, a simplified mark, or two high-contrast colors. If your full logo is complex, do not shrink it whole; extract the most recognizable element. Preview the 16 px version in this tool before you ship, and squint-test it: if you cannot tell what it is at arm length, simplify. Padding matters too: give the mark breathing room inside the square so it does not touch the edges.
Installing on Your Site
Upload favicon.ico to your website root: most browsers and many tools look for /favicon.ico automatically. Place the PNGs in the same folder or an images folder, then paste the generated snippet into the <head> of every page (or your site template). The snippet includes the ICO link, PNG links with sizes attributes, and the Apple touch icon link. After deploying, bust the cache: browsers cling to old favicons, so hard-refresh or test in a private window to confirm the new icon appears.
Going Further
For a polished setup, add a 192 px and 512 px PNG for the Android web app manifest if you ship a PWA, and consider a maskable icon with extra padding for adaptive Android icons. A theme-color meta tag tints the browser chrome on mobile to match your brand. And keep the source logo file: when you rebrand, you will regenerate the whole set in seconds with this tool.
Frequently Asked Questions
How do I make a favicon from an image?
Upload a square image (your logo works best), and the tool instantly generates every size you need: a multi-resolution ICO file plus 16, 32, 48, and 180-pixel PNGs. Download the files, drop them in your website root folder, paste the provided HTML snippet into your page head, and every browser and device will show your icon.
What is an ICO file and do I still need one?
ICO is the classic Windows favicon format that can bundle multiple resolutions (16, 32, 48 px) in a single file. Modern browsers accept PNG favicons too, but ICO remains the safest universal choice: it works in every browser ever made, including old ones, and it is what browsers request by default at /favicon.ico. This tool bundles all three sizes into one ICO, so one file covers every desktop scenario.
What sizes should my favicon include?
The essential set: 16x16 (browser tabs), 32x32 (retina tabs and taskbar), 48x48 (Windows desktop shortcuts), and 180x180 (Apple touch icon for iOS home screens). This tool generates exactly that set. Android Chrome uses larger icons from the web app manifest (192 and 512 px), which you can create by scaling up the 180 px PNG if you ship a PWA.
My logo is not square. What should I do?
Favicons must be square, so the tool center-crops your image to a square automatically, keeping the middle. For best results, start with a square source: pad wide logos with transparent or brand-colored margins rather than squashing them. Test the 16 px preview carefully, since fine detail vanishes at tab size; many brands use a simplified mark or single letter for the favicon.
Where do I put the favicon files?
Place favicon.ico in your website root directory (example.com/favicon.ico): browsers check there automatically even without any HTML. Put the PNG files alongside it or in an /img/ folder, then paste the generated <link> tags into the <head> of your pages. Clear your browser cache (or hard-refresh) after deploying, because browsers cache favicons aggressively.
Why does my new favicon not show up?
Almost always caching. Browsers can hold onto the old favicon for days. Hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac), or open the favicon URL directly and refresh that. Also double-check the file paths in your <link> tags and that the ICO actually uploaded to your server. If it works in a private window, it is definitely just cache.