Favicon Generator: Create Favicons in Multiple Sizes from Any Image
Upload any image and generate favicons in 16x16, 32x32, 48x48, and 64x64 sizes. Download as PNG files ready to add to your website head.
Try the free online tool
Runs entirely in your browser — no signup, no uploads.
A favicon is the small icon that appears in a browser tab, bookmarks bar, and browser history next to your website's name. Despite its modest 16x16 pixel default size, the favicon plays an outsized role in brand recognition and professional polish — a missing or blurry favicon immediately signals an unfinished or unpolished site. Modern browsers and progressive web app standards also require favicons in larger sizes (32x32, 48x48, and 192x192) for high-DPI displays, Windows taskbar pinning, and PWA home screen icons.
Creating favicons correctly means producing multiple size variants from your source image, using the right file format (PNG for modern browsers, ICO for legacy compatibility), and adding the correct HTML link tags to your document head. Getting all of these details right from scratch involves graphics software, format conversion tools, and knowledge of current browser expectations — a significant barrier for developers who just want to add an icon to their site.
This generator takes any image you upload, scales it to all standard favicon sizes using high-quality bicubic resampling, and produces downloadable PNG files for each size. The tool works entirely in the browser using the Canvas API, so your image is never sent to a server, and it generates the exact HTML tags you need to copy into your document head.
What Is a Favicon and Why Does It Matter?
A favicon (short for 'favorite icon') is a small image associated with a website that browsers display in various contexts: the browser tab title area, the bookmarks/favorites menu, browser history lists, address bar prefixes, and on mobile devices when a user saves a page to their home screen. The name comes from its original purpose — being shown in the Internet Explorer 'Favorites' menu in the late 1990s.
Modern favicon requirements have expanded significantly beyond the original 16x16 ICO file. Progressive web applications require 192x192 and 512x512 PNG icons for Android home screen shortcuts. Apple devices use apple-touch-icon files at 180x180 pixels for Safari bookmarks. Windows tiles use 144x144 PNG files. Browsers on high-DPI (Retina) displays prefer 32x32 or higher resolution PNGs over the legacy 16x16 ICO.
A well-configured favicon setup uses a combination of sizes declared via link tags in the HTML head, a web app manifest file for PWA use cases, and an ICO file in the site root for legacy browser fallback. This tool handles the size generation; the rest is HTML configuration.
How to Use This Tool
Generating a favicon set takes about a minute:
- 1
Upload your source image
Click the upload area or drag and drop any image file. For best results use a square image with your logo or icon at a minimum of 64x64 pixels. SVG and PNG with transparency are ideal source formats.
- 2
Preview all sizes
The tool generates previews of your image at 16x16, 32x32, 48x48, and 64x64 pixels. Review each preview to confirm the icon is legible at small sizes — complex images often need simplification for small favicon use.
- 3
Download individual PNGs
Click Download next to each size to save that variant as a PNG file, or use Download All to get a ZIP archive containing all sizes at once.
- 4
Add the HTML link tags
Copy the generated HTML snippet into the <head> section of your HTML file. This includes the correct rel, type, and sizes attributes for each favicon size.
- 5
Test in a browser
Open your site in Chrome, Firefox, and Safari and confirm the favicon appears in the tab. Clear the browser cache if the old icon persists after updating.
Common Use Cases
Favicons are needed in virtually every web project. Here are the most common contexts:
- Adding a professional brand icon to a new website, web application, or SaaS dashboard being built from scratch
- Replacing a default browser globe favicon on a site that previously did not have a custom icon
- Creating multiple sizes from an existing logo for a site being upgraded to support PWA installation on Android and iOS
- Generating icons for a browser extension that appear in the Chrome or Firefox extension toolbar and management page
- Producing the required icon set for an Electron desktop application that uses web technologies for its UI
Tips and Best Practices
A good favicon is legible at tiny sizes. Follow these guidelines for the best result:
- Use a simple, bold design with high contrast. Complex logos with fine details, thin lines, or multiple colors become unrecognizable at 16x16 pixels. Consider a simplified version or just your brand initial.
- Start with a square source image. Non-square images will be cropped or letterboxed, potentially cutting off important parts of your icon at small sizes.
- Use a PNG with transparency as your source so the favicon respects the browser tab background color rather than showing a white or black box behind your icon.
- Place a favicon.ico file in the root of your site (accessible at /favicon.ico) as a legacy fallback. Many older tools, RSS readers, and email clients look for this file directly rather than reading the HTML link tags.
- Include the web app manifest link tag and a manifest.json file if your site is or will become a PWA. The manifest references 192x192 and 512x512 PNG icons required for Android home screen installation.
Frequently Asked Questions
What is the minimum recommended source image size for a good favicon?
For this tool, any image works but a minimum of 64x64 pixels is recommended to ensure the downscaling algorithm has enough data to produce clean results. For modern multi-size favicon sets including 192x192 and 512x512 PWA icons, start with at least a 512x512 pixel source image.
Should I use ICO or PNG format for my favicon?
Use both for maximum compatibility. A PNG favicon declared in the HTML head is used by all modern browsers. An ICO file at /favicon.ico (which can contain multiple size variants) serves as a fallback for legacy browsers, RSS readers, and tools that look for the icon at that specific URL. Modern browsers that find a link tag will use the PNG and ignore the ICO.
What HTML tags do I need to add for favicons?
At minimum: '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">'. For comprehensive support also add the 16x16 variant, an apple-touch-icon link for Safari, and a link to your web app manifest for PWA support. The generated HTML snippet from this tool includes all required tags.
Why is my updated favicon not showing in the browser tab?
Browsers cache favicons aggressively. After updating your favicon files, open DevTools, right-click the browser tab, and select 'Force reload,' or open the favicon URL directly and hard-refresh. In Chrome you can also clear the favicon cache via chrome://settings/clearBrowserData and selecting 'Cached images and files'.
What size does Apple require for touch icons?
Apple recommends 180x180 pixels for the apple-touch-icon PNG (used for Safari bookmarks on iPhones). Older devices used 152x152 (iPad Retina) and 120x120 (iPhone Retina). Declare the 180x180 version with '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">' and it will scale down for older devices.
Does my image need to be square?
Yes, for best results your source image should be square (equal width and height). Non-square images are either cropped to a square or scaled with letterboxing (padding), which usually produces suboptimal results at favicon sizes. If your logo is rectangular, consider designing a square icon variant specifically for favicon use.
Ready to use this tool?
Free, instant, no account required. Runs entirely in your browser.