Favicon Checker
Upload a favicon image and preview how it looks at every standard size, in browser tabs, bookmarks, and PWA screens.
About This Tool
The Favicon Checker is a free browser-based tool that lets you upload any image and instantly preview how it renders at every standard favicon size. Favicons are the small icons displayed in browser tabs, bookmark bars, mobile home screens, and progressive web app splash screens. Getting them right across all platforms is essential for a polished user experience.
This tool resizes your uploaded image to six standard dimensions: 16x16 (classic browser tab), 32x32 (retina browser tab), 48x48 (Windows taskbar), 180x180 (Apple Touch Icon), 192x192 (Android Chrome), and 512x512 (PWA splash screen). It uses the HTML Canvas API for high-quality downscaling with bicubic-like smoothing, so you can see exactly how your icon will appear in production.
Beyond simple resizing, the tool includes three realistic mockup previews. The browser tab mockup shows your favicon in an active tab alongside inactive tabs, replicating the Chrome or Firefox tab bar. The bookmark bar mockup displays your icon next to bookmarked sites. The PWA / mobile home screen mockup simulates how your icon appears on a smartphone home screen with rounded corners.
All processing happens entirely in your browser. No data is uploaded to any server, no accounts are required, and your images remain completely private. If you need to create a favicon from scratch, try the Favicon Generator. For checking how your site appears on social media, see the Open Graph Preview tool. To generate the full set of meta tags for your site, use the Meta Tag Generator.
How to Use
- Click the upload area or drag and drop an image file (PNG, SVG, ICO, JPEG, or WebP).
- The tool instantly resizes the image to all six standard favicon sizes and displays them in a grid.
- Review each size preview to check for blurriness, clipping, or loss of detail at smaller sizes.
- Scroll down to see the Browser Tab Preview showing your favicon in a realistic tab bar mockup.
- Check the Bookmark Bar Preview to see how it looks alongside other bookmarked sites.
- View the PWA / Mobile Home Screen Preview to see how your icon appears on a phone.
- Click Copy HTML to copy the required
<link>tags for all sizes to your clipboard. - Click Download on individual sizes or All PNGs to download every resized version.
- Use keyboard shortcut Ctrl+Shift+C to quickly copy the HTML tags.
Popular Favicon Examples
FAQ
Is my data safe when using this tool?
Yes. All image processing runs entirely in your browser using the HTML Canvas API. Your images are never uploaded to any server, stored, or logged. You can safely check favicons for private or unreleased projects.
What image formats can I upload?
You can upload PNG, SVG, ICO, JPEG, WebP, and most other browser-supported image formats. PNG is recommended for favicons because it supports transparency. SVG is also an excellent choice for resolution independence.
Why does my favicon look blurry at 16x16?
At 16x16 pixels, there is very little detail available. Complex logos or images with fine text will appear blurry. For best results at small sizes, use simple, bold designs with high contrast. Consider creating a simplified version specifically for small sizes.
What sizes do I actually need?
At minimum, you need 16x16 and 32x32 for desktop browsers, 180x180 for Apple devices, and 192x192 for Android. Adding 512x512 is recommended if your site is a Progressive Web App. The 48x48 size is used by Windows for taskbar and shortcut icons.
Should my favicon be square?
Yes. Favicons should always be square. If you upload a non-square image, this tool will stretch it to fit each square size, which may distort the appearance. Crop your image to a 1:1 aspect ratio before uploading for best results.
What is the difference between favicon.ico and PNG favicons?
The ICO format is the legacy standard that can contain multiple sizes in a single file. Modern browsers support PNG favicons via <link> tags, which offer better compression and transparency. Most developers now use PNG files for each size and optionally include an ICO file for older browser compatibility.
How do I add favicon tags to my HTML?
Click the Copy HTML button to get the complete set of <link> tags for all sizes. Paste them into the <head> section of your HTML document. For Next.js or other frameworks, place the favicon files in your public directory and add the tags to your layout component.
Related Tools
Favicon Generator
Generate favicons from text or emoji with custom background colors. Export multiple sizes for web use.
Meta Tag Generator
Generate HTML meta tags, Open Graph, and Twitter Card tags with live SNS preview.
Open Graph Preview
Preview how your URL appears on social media. Fetch and display Open Graph and Twitter Card meta tags.
Image Resizer
Resize images in the browser with custom dimensions. Maintain aspect ratio, choose output format, and batch process multiple files.
Image Compressor
Compress images in your browser with quality and resize controls. Compare file sizes before and after.