or click to browse
Favicons appear in browser tabs, bookmarks, and history. They help users quickly identify and find your site among dozens of open tabs.
When users add your site to their phone's home screen, the Apple Touch Icon (180×180) or Android icon (192×192) is what they see. A missing icon looks unprofessional.
Google shows favicons next to your site in mobile search results. A distinctive icon increases click-through rates and brand recognition in SERPs.
Progressive Web Apps require a 512×512 icon for the splash screen. Without proper favicons in all sizes, your PWA will fail validation checks.
| Size | Name | Where it shows |
|---|---|---|
| 16 × 16 | favicon | Browser tabs (standard density) |
| 32 × 32 | favicon HD | Browser tabs (retina/HiDPI), bookmarks |
| 48 × 48 | Windows icon | Windows desktop shortcuts, Google Search results |
| 180 × 180 | Apple Touch Icon | iPhone/iPad home screen when bookmarked |
| 192 × 192 | Android Chrome | Android home screen, app drawer |
| 512 × 512 | PWA icon | Progressive Web App splash screen, install dialog |
At 16px, fine details are invisible. Use a single letter, symbol, or shape. If your logo is complex, use an abbreviated version.
Your icon needs to work on both light and dark browser themes. Test against white, dark gray, and blue (active tab) backgrounds.
Design at 512×512 or larger, then verify it still looks recognizable when displayed at 16×16. Simplify if needed.
All favicon sizes are generated from your single source image using high-quality downscaling. For sharp results, start with a square PNG of at least 512×512 pixels, ideally with a transparent background. The HTML code snippet is ready to paste into your website's <head> section.
How to add favicons to your website: After downloading your generated favicons, upload all the PNG files to your website's root directory. Then add the HTML code snippet (provided by Vectowl after generation) to the <head> section of every page. If you use a CMS like WordPress, you can usually set the favicon in the theme settings or customizer without editing code directly.
My favicon is not showing up: The most common causes are browser caching, incorrect file paths, and missing HTML tags. First, hard-refresh your browser with Ctrl+Shift+R. Check that the favicon files are accessible by navigating directly to your-domain.com/favicon-32x32.png. Verify that the HTML link tags in your page source have the correct paths. If using a CDN, ensure the favicon files are not being blocked or redirected.
Do I need a .ico file? For modern websites, PNG favicons are sufficient. The .ico format was necessary for Internet Explorer, but all current browsers support PNG favicons natively. PNG files offer better compression, simpler implementation, and easier updates. If you need to support very old browsers (IE10 and earlier), you can convert your 32×32 PNG to .ico format using online tools, but this is rarely necessary in 2026.
What about SVG favicons? SVG favicons are the most modern approach, supported by Chrome, Firefox, and Safari. They scale perfectly to any size and support dark mode adaptation via CSS media queries. However, browser support is not yet universal, so it's recommended to provide PNG favicons as a fallback. You can include both: an SVG favicon for modern browsers and a PNG fallback for older ones.