What is a Favicon?
A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks, history lists, and other areas of the browser interface. Favicons help users quickly identify your website among multiple open tabs. They are an essential part of your site's branding and user experience, appearing at sizes as small as 16x16 pixels and as large as 512x512 for Progressive Web Apps.
Favicon Sizes Explained
16x16 pixels
Classic favicon size used in browser tabs and the address bar. This is the most basic and widely supported size.
32x32 pixels
Used in browser tabs on higher-DPI screens, taskbar shortcuts on Windows, and Safari's "Read Later" sidebar.
48x48 pixels
Used by Windows for site shortcuts and pinned tiles. Also common for various browser UI elements.
180x180 pixels
Apple Touch Icon used when users add your website to their iOS home screen. Required for proper iOS web app support.
512x512 pixels
Used by Progressive Web Apps (PWA) for splash screens, app install prompts, and the Android home screen icon.
How to Add a Favicon to Your Website
- Generate your favicon using the tool above and download all sizes.
- Place the downloaded PNG files in the root directory of your website (or a subdirectory of your choice).
- Copy the HTML tags provided above and paste them inside the
<head>section of your HTML file. - Update the
hrefpaths if you placed the files in a subdirectory. - Deploy your site and verify the favicon appears in the browser tab.
Favicon Formats: ICO vs PNG vs SVG
| Format | Pros | Cons |
|---|---|---|
| ICO | Universal browser support; can contain multiple sizes in one file | Larger file size; legacy format; harder to create without tools |
| PNG | Excellent quality; small file size; supported by all modern browsers | Requires separate files for each size; not supported by very old IE versions |
| SVG | Infinitely scalable; single file for all sizes; small file size | Limited browser support as favicon; no Safari support; cannot represent photos |
Frequently Asked Questions
Yes, completely free with no limitations. There is no signup required, no watermarks, and no usage limits. The tool runs entirely in your browser, so your images and data never leave your device.
At minimum, you should generate 16x16 and 32x32 PNG files for browser tabs. For full compatibility, also include 180x180 for Apple Touch Icon (iOS home screen) and 512x512 for Progressive Web Apps. The 48x48 size is useful for Windows shortcuts and taskbar pins.
Yes! Simply switch to the Text/Emoji tab and paste any emoji character. The tool will render it on a customizable background. This is a popular choice for personal blogs, side projects, and quick prototypes where you need a distinctive icon without designing one from scratch.
Not anymore. All modern browsers support PNG favicons specified with the <link> tag. ICO files were necessary for Internet Explorer, which is no longer supported by Microsoft. PNG favicons are smaller in file size and easier to manage. If you still need legacy IE support, you can place a favicon.ico file in your site root as a fallback.
Browsers aggressively cache favicons. Try clearing your browser cache, or open your site in an incognito/private window. Also verify that the file paths in your HTML <link> tags correctly point to where you placed the favicon files. Some hosting providers may also cache the old favicon at the CDN level.
The Apple Touch Icon is a 180x180 pixel PNG used by iOS devices when a user adds your website to their home screen. Without it, iOS will take a screenshot of your page instead, which typically looks poor. It is specified using <link rel="apple-touch-icon"> in your HTML head.
No. This tool is 100% client-side. All image processing happens directly in your browser using the HTML5 Canvas API. No data is transmitted to any server. You can verify this by checking your browser's network tab while using the tool.
For best results, use a square PNG or SVG image with a transparent background. The source image should be at least 512x512 pixels to ensure high quality at all output sizes. If your image is not square, the tool will center-crop it automatically.