Favicon Generator
Create favicons from text, emoji, or image upload. Generate all sizes for browsers, iOS, Android, and PWA — with live browser tab preview and dark mode testing. 100% free.
Preview
16px
32px
48px
Download
Installation Code
HTML <head>
<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">
site.webmanifest (PWA)
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#3b82f6",
"background_color": "#3b82f6",
"display": "standalone"
}Frequently Asked Questions
Why Every Website Needs a Favicon
A favicon is small but mighty — it appears everywhere your brand does online.
16–32px
Browser Tabs
Helps users find your site among dozens of open tabs. The most common use of favicons.
180px+
Mobile Home Screen
When users save your site to their phone, your favicon becomes the app icon.
SERPs
Google Results
Google shows favicons in mobile search results. A professional icon boosts click-through rates.
Trust
Brand Recognition
Consistent branding across tabs, bookmarks, and PWAs builds credibility and recognition.
Favicon Sizes Explained
Different platforms require different sizes. Here is what each one is used for.
| Size | Format | Used By | Required? |
|---|---|---|---|
| 16×16 | PNG | Browser tab (standard) | Essential |
| 32×32 | PNG | Browser tab (retina), taskbar | Essential |
| 48×48 | PNG | Windows desktop shortcut | Recommended |
| 180×180 | PNG | Apple Touch Icon (iOS home screen) | Essential |
| 192×192 | PNG | Android Chrome, PWA icon | Essential |
| 512×512 | PNG | PWA splash screen, high-res displays | Recommended |
| Any | SVG | Modern browsers (Chrome, Firefox, Edge) | Optional |
| 16×16 | ICO | Legacy IE, PDF viewer tabs | Optional |
How to Install Your Favicon
Generate your favicon
Use the tool above to create your favicon from text, emoji, or an image. Download all sizes.
Upload files to your website
Place the PNG files in your website's root directory (or /public folder for Next.js, Nuxt, etc.).
Add HTML to your <head>
Copy the HTML snippet from the tool and paste it into your website's <head> tag.
Add the web manifest
Save the site.webmanifest file to your root directory for PWA support and Android icons.
Test it
Clear your browser cache and check your site. The favicon should appear in the browser tab within seconds.
Need help with your website? Our web design team and web developers handle favicon implementation, performance optimisation, and much more. Check your site with our Website Speed Test.
Need a Professional Website?
A favicon is just the start. Hand On Web designs and builds beautiful, fast websites for UK businesses — complete with SEO, accessibility, and all the technical details handled for you.