Favicon Generator
Generate favicon files in all required sizes from any image.
Reviewed by the ToolNestr Editorial Team — July 2026
How favicon sizes work
Different platforms and contexts request different favicon sizes. Starting from one high-resolution source image, favicon generators create multiple scaled versions so your icon looks sharp everywhere — from a tiny browser tab to a full-screen mobile splash screen.
Different platforms use different sizes
There is no single favicon size that works everywhere. Each platform and context has its own preferred dimensions, and browsers request the size that best matches the display context. Understanding which size is used where helps you prioritize and debug favicon issues.
| Size | Used by | Context |
|---|---|---|
| 16×16 | All browsers | Browser tab icon, address bar, history |
| 32×32 | All browsers | Bookmarks, Windows taskbar, browser tabs (HiDPI) |
| 48×48 | Internet Explorer | Desktop shortcuts, favorites menu |
| 64×64 | Safari, Opera | Reader view, site icons |
| 128×128 | Chrome Web Store | Extension and app icons in the store |
| 192×192 | Android / PWA | Home screen icon, install banner icon |
| 512×512 | PWA | Splash screen icon, maskable icon |
Website branding
Your favicon is the most visible brand element in a browser. It appears in the tab bar, bookmarks, history, and address bar. A clean, recognizable favicon helps users find your site among dozens of open tabs and reinforces brand identity every time someone navigates their browser.
PWA and mobile icons
Progressive Web Apps require 192×192 and 512×512 icons for the manifest file. These icons appear on the user's home screen, app launcher, and splash screen when the PWA starts. Without properly sized icons, your PWA will not pass the installability criteria and users cannot add it to their home screen.
Browser tabs and bookmarks
The 16×16 and 32×32 favicons are the most frequently requested by browsers. They appear in tab headers, bookmark menus, and the browser's history view. On high-DPI (Retina) displays, the 32×32 size is preferred for clarity. These small sizes must be crisp and readable at a glance.
Mobile bookmarks
When users bookmark your site on iOS or Android, the system uses your favicon as the bookmark thumbnail. Safari uses a 64×64 icon for this purpose, while Android may use 192×192. Providing the correct sizes ensures your icon does not appear as a blurry, low-resolution placeholder on mobile home screens.
The history of favicon sizes
Favicons were introduced in Internet Explorer 5 (1999) with the ICO format and a single 16×16 size. The ICO format could hold multiple images in one file, and browser vendors gradually added support for larger sizes. Firefox 3 (2008) added support for 32×32, and by 2010 most browsers requested 16×16 and 32×32 depending on the context. The shift to high-DPI displays accelerated the need for even larger favicon sizes. iOS introduced 57×57 icons for the home screen in 2007 with the original iPhone. Google's launch of the Chrome Web Store in 2010 required 128×128 icons. The PWA movement, starting around 2015, formalized the requirement for 192×192 and 512×512 icons in the web app manifest. Today, providing seven sizes (16, 32, 48, 64, 128, 192, and 512) has become the standard best practice for comprehensive favicon coverage.
Tips for creating favicons
Start with a square high-resolution image
Favicons are always square. Begin with a source image that is at least 512×512 pixels and has a 1:1 aspect ratio. If your logo is not square, center it on a square canvas with padding. High source resolution ensures the downsampled versions retain sharp edges and legible details.
Keep it simple for small sizes
At 16×16 pixels, you have only 256 pixels to work with. Complex logos with fine text, gradients, or multiple elements become unrecognizable at this size. Design your favicon to work at 16×16 first by using bold shapes, high contrast, and minimal detail. If your full logo is complex, create a simplified favicon version.
Test on all browsers
Different browsers handle favicons differently. Chrome prefers PNG, Firefox uses ICO or PNG, Safari is particular about sizes, and Edge follows Chrome's lead. Test your favicons in Chrome, Firefox, Safari, and Edge at minimum. Check both light and dark browser themes, as some browsers invert favicons in dark mode.
Use the correct HTML markup
Each favicon size needs its own <link> tag with the sizes attribute. Place these tags in the <head> of your HTML. Also include a /favicon.ico file in your root for legacy browsers that automatically request it. The order of tags does not matter — browsers pick the best match.
How to use this favicon generator
Upload your image
Select a square PNG or JPG image from your device. Higher resolution source images produce better results — aim for at least 512×512 pixels.
Generate all sizes
Click the generate button. The tool creates seven favicon sizes (16×16 through 512×512) using canvas drawing. Everything runs in your browser — no uploads to any server.
Download and deploy
Download individual favicons or all as a ZIP. Copy the generated HTML tags and paste them into your site's <head>. Place icon files in your root or assets folder.
Related tools
Frequently asked questions
What favicon sizes do I need for my website?
At minimum you should provide 16×16, 32×32, and 48×48 for browser tabs and bookmarks. For modern web apps, also include 192×192 and 512×512 for Progressive Web App (PWA) support, 128×128 for the Chrome Web Store, and 64×64 for Safari. This tool generates all seven sizes at once.
What format should my favicon be?
PNG is the most widely supported format for favicons across all modern browsers. The older ICO format can hold multiple sizes in one file but is no longer necessary. SVG favicons are supported in some browsers but not universally. PNG gives you the best compatibility.
Can I use any image for a favicon?
Yes, any square PNG or JPG image works. For the best results, start with a high-resolution square image at least 512×512 pixels so the smaller sizes have enough source data to downsample cleanly. Non-square images will be stretched to fit the square canvas.
Why do I need so many different sizes?
Different parts of the operating system and browser request different favicon sizes. Browser tabs use 16×16 or 32×32, bookmarks use 32×32, the Windows taskbar uses 32×32, Safari uses 64×64, iOS home screen uses a large icon, and Android PWAs require 192×192 and 512×512 for splash screens. Providing all sizes ensures your icon looks crisp everywhere.
Do favicons help with SEO?
Indirectly, yes. A recognizable favicon helps users identify your website tab among many open tabs, increasing return visits. Google displays favicons next to search results, which can improve click-through rates. Having proper favicons across all platforms contributes to a professional, trustworthy appearance.
Where do I put favicon files on my server?
Place the favicon files in your website root or an assets directory. Reference them in your HTML <head> using <link> tags with the correct sizes attribute. Most browsers will also automatically request /favicon.ico from your root, so you may want to place a 32×32 favicon there as well.