Favicon Generator
Generate favicons in all sizes from an image or custom text
Upload Image
Or Create from Text
HTML Code
<!-- Favicon --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Related Tools
HTML Entity Encoder
Encode and decode HTML entities to prevent XSS and ensure proper rendering
HTTP Status Codes
Complete list of HTTP status codes with explanations and troubleshooting
IP Address Lookup
Find geolocation and network details for any IP address
JWT Decoder
Decode and debug JSON Web Tokens (JWT) without sending them to a server
Open Port Checker
Check if specific ports are open and reachable on your server or IP
SQL Formatter
Format and beautify SQL queries for better readability
What is a Favicon?
A favicon (favorite icon) is a small icon that represents your website in browser tabs, bookmarks, history, and other UI elements. It's a crucial part of web branding that helps users identify and find your site quickly among many open tabs.
This free favicon generator creates all the icon sizes you need for modern browsers, mobile home screens, and PWAs. Upload an image or create a simple text-based icon instantly—no design skills required.
Favicon Sizes Explained
| Size | Purpose |
|---|---|
| 16x16 | Browser tab icon |
| 32x32 | Taskbar, bookmarks (Windows) |
| 180x180 | Apple Touch Icon (iOS home screen) |
| 192x192 | Android Chrome, PWA manifest |
| 512x512 | PWA splash screens, high-DPI displays |
Favicon Best Practices
- Use a square image: Favicons must be square. Non-square images will be distorted.
- Start large: Use 512x512 or larger source image for best quality when scaling down.
- Keep it simple: Details are lost at 16x16. Use bold shapes and high contrast.
- Test dark mode: Ensure your icon is visible on both light and dark browser themes.
- Use PNG format: PNG with transparency works best for modern browsers.
How to Add Favicons
1. Download the generated icons
Click "Download All" to get all favicon sizes as PNG files.
2. Place in your project root
Put the files in your public/ or root directory.
3. Add HTML to your head tag
Copy the HTML code above and paste it in your page's head section.
Frequently Asked Questions
Do I still need favicon.ico?
For legacy browser support, yes. Most modern browsers prefer PNG, but IE and some older apps still look for favicon.ico in the root.
Why isn't my favicon showing?
Try clearing your browser cache (Ctrl+Shift+R). Favicons are heavily cached. Also check that paths in your HTML match where files are located.
What about SVG favicons?
SVG favicons are supported in modern browsers and scale perfectly. Add with: link rel="icon" type="image/svg+xml" href="/icon.svg"