Developer Tools
Free Favicon Generator — Create Website Favicons in All Sizes
A favicon is the small icon in the browser tab beside your site name. Without one, browsers show a generic puzzle piece or leaf icon — an immediate signal that a site is not professionally finished.
Generate Favicon Free →All required favicon sizes in 2026
- 16×16 px: Browser tab
- 32×32 px: Browser tab on high-DPI displays
- 48×48 px: Windows shortcuts
- 180×180 px: Apple Touch Icon (iPhone home screen)
- 192×192 px: Android Chrome home screen
- 512×512 px: PWA splash screen and Google search results
How to add a favicon to your website
Add these lines inside your HTML <head> tag:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Favicon design tips
- Use a simple shape — a lettermark, symbol, or icon. Detail disappears at 16px
- Avoid thin lines that become invisible at small sizes
- High contrast between icon and background
- Test at actual 16px size before finalising
- SVG favicons work in all modern browsers and scale perfectly
Why is my new favicon not showing?
Browsers cache favicons aggressively. Do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). You may also need to clear browser cache. It can take hours for all visitors to see the new favicon.
Browse all Developer ToolsExplore Developer Tools →