Ttooleras
⭐

Favicon Generator

Image Tools

Generate favicons in all sizes — ICO, PNG, Apple Touch, Android Chrome. Free, private — all processing in your browser.

Upload a square image (at least 512×512px) for best results.

Advertisement

The Favicon Generator creates a complete favicon package for your website from a single image, logo, or text input. Generates all required sizes — 16×16 and 32×32 for classic browsers, 180×180 Apple Touch Icon for iOS, 192×192 and 512×512 Android Chrome icons for PWAs, and a multi-resolution .ico file containing 16/32/48 px versions. Also generates the manifest.webmanifest with proper icon declarations, and the HTML <link> tags to paste into your <head>. All processing runs in your browser — upload once, download a complete ZIP with every file you need.

A favicon is the tiny icon in the browser tab, bookmarks bar, and search results. Missing favicon makes your site look amateurish; small or pixelated favicon looks unprofessional; wrong dimensions cause iOS to show the default "globe" instead of your logo. Getting favicons right requires generating 8-12 different image files at exact dimensions, adding them to HTML correctly, and sometimes writing a Web App Manifest. This tool does all of that in one step.

Favicon Generator — key features

All sizes generated

16×16, 32×32, 48×48 (ICO), 180×180 (Apple Touch), 192×192 + 512×512 (Android/PWA), and more. Everything you need in one click.

Multi-resolution ICO

Classic favicon.ico contains 16/32/48 in a single file. Browsers pick the best size automatically.

Apple Touch Icon

180×180 PNG for iOS home screen. iOS handles rounded corners automatically.

Android Chrome / PWA

Maskable and non-maskable icons for Progressive Web Apps. Proper manifest.webmanifest generated.

SVG favicon option

Modern vector favicon supporting dark/light mode. Scales to any size.

Live preview across contexts

See your favicon rendered in browser tab, bookmark, search result, iOS home screen, Android launcher.

HTML snippet

Copy-paste ready `<link>` tags for your HTML head.

100% client-side

Image processing entirely in browser. Your logo is never uploaded.

How to use the Favicon Generator

  1. 1

    Upload your source image

    Drag or click to upload. Best source: square SVG or PNG, 512×512 or larger. Detailed images won't work at 16×16 — simplify for tiny sizes.

  2. 2

    Or generate from text

    No image? Type a letter or short word and pick colors. Tool generates a styled text favicon.

  3. 3

    Preview all contexts

    See how your favicon appears in browser tabs, bookmarks, home screens, and search snippets.

  4. 4

    Customize for PWA

    Set theme color, background color, and maskable icon padding for Android adaptive icons.

  5. 5

    Download package

    ZIP with all images, manifest.webmanifest, and HTML snippet. Extract to your project root.

  6. 6

    Paste HTML into head

    Copy the generated HTML snippet into your site's `<head>`. Favicon will appear after browser refresh.

Common use cases for the Favicon Generator

Websites

  • →Launch a new website: Every new website needs a favicon — it's the #1 forgotten branding element.
  • →Rebrand or logo refresh: Regenerate favicons from updated logo. Often needed when switching to new brand colors.
  • →Multi-site operation: Each site needs its own favicon package. Generate efficiently with this tool.
  • →Client websites: Web agencies need to generate favicons for every client delivery.

Progressive Web Apps

  • →PWA installability: PWAs need 192×192 and 512×512 icons in manifest. Without them, Add to Home Screen fails.
  • →Maskable icons for Android: Android adaptive icons need special padding. Generate maskable variants for optimal appearance.
  • →iOS home screen: When users add your PWA to iPhone home screen, the 180×180 icon is used. Blurry or missing icon = amateur.
  • →Splash screens: Large icons (512×512) used during PWA splash. Matching brand color for background.

SEO and UX

  • →Branded search results: Google shows favicons in mobile search results. Strong favicon = more recognizable, higher CTR.
  • →Social bookmark apps: Users bookmarking your site in Pocket, Raindrop, or browser bookmarks see your favicon.
  • →Browser tabs: Users with 20+ tabs rely on favicons to locate your site. Distinctive favicon = easier to find.

Favicon Generator — examples

Complete HTML head

Recommended HTML for all contexts.

Input
All favicon files generated
Output
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#4f46e5">

Web App Manifest

Required for PWA installability.

Input
Site name + icons
Output
{
  "name": "My Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Theme-aware SVG favicon

Switches color based on user's OS theme.

Input
Letter T, dark/light mode support
Output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    text { fill: #000; font: bold 28px sans-serif; }
    @media (prefers-color-scheme: dark) { text { fill: #fff; } }
  </style>
  <text x="4" y="26">T</text>
</svg>

Maskable icon with padding

Android adaptive icon with safe area.

Input
Logo centered in 512×512, with 80px padding
Output
Logo fills only the central 352×352 (safe zone)
Surrounding 80px padding ensures logo isn't clipped by any mask shape

File list in favicon package

Contents of generated ZIP.

Input
Downloaded package contents
Output
favicon.ico          (16+32+48 multi-res)
favicon-16.png       (16×16)
favicon-32.png       (32×32)
favicon.svg          (scalable vector)
apple-touch-icon.png (180×180)
icon-192.png         (192×192)
icon-512.png         (512×512)
icon-maskable.png    (512×512)
manifest.webmanifest
README.html          (HTML snippet)

Technical details

Modern favicons require multiple files for different contexts:

The classic ICO file:

``
/favicon.ico — 16×16, 32×32, 48×48 multi-resolution ICO
``

Browsers automatically request /favicon.ico from the domain root if no favicon is declared in HTML.

Modern PNG favicons:

``html
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
``

Higher resolution than classic ICO, cleaner on HiDPI displays.

Apple Touch Icon (iOS home screen):

``html
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
``

Shown when users add your site to their iPhone/iPad home screen. iOS automatically rounds the corners. Provide 180×180 — iOS scales down as needed.

Android Chrome / PWA icons:

Declared in manifest.webmanifest:

``json
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
``

- 192×192 — standard Android home screen icon.
- 512×512 — splash screen and high-DPI displays.
- Maskable icons — images with padding for Android adaptive icons (circles, squares, etc.).

SVG favicon (newest, 2021+):

``html
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
``

Scales to any size, supports theme switching via CSS prefers-color-scheme:

``svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path fill="black" d="..."/>
</svg>
``

Supported in all modern browsers (Chrome 80+, Firefox 41+, Safari 15+).

Theme color (browser chrome color):

``html
<meta name="theme-color" content="#4f46e5">
``

Sets the browser toolbar color on mobile — complements the favicon.

Complete recommended HTML:

```html
<!-- classic -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- SVG favicon (scalable, theme-aware) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.webmanifest">

<!-- Theme color -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
```

File size recommendations:

- favicon.ico: under 100 KB
- PNG favicons: 5-20 KB each
- SVG favicon: 1-5 KB (vector)
- Total favicon bandwidth per page load: ~50 KB max

Common problems and solutions

⚠Detailed logo at 16×16 looks like mush

Complex logos don't work at tiny sizes. Simplify: use a single bold letter, a simple shape, or a stylized initials. Test at 16×16 in actual browser before committing.

⚠Forgetting Apple Touch Icon

Without it, iOS shows a generic globe when users add your site to home screen. Always include the 180×180 apple-touch-icon PNG.

⚠Maskable icon doesn't show padding

Android applies various mask shapes (circle, square, squircle). Your logo should fill only the central 80% (safe zone) — the surrounding 20% is padding that may get clipped.

⚠Old favicon cached

Browsers aggressively cache favicons. After updating, users may see the old one for days. Workarounds: hard refresh (Ctrl+Shift+R), add a version query (`?v=2`), or restart the browser.

⚠Missing manifest.webmanifest

Required for PWA installability, also helps Android Chrome pick the right icon. Without it, Android might show a low-quality favicon as the home screen icon.

⚠Transparent background issues on Android

Icons on Android often appear on colored background. Transparent favicons may look washed out. For Android icons, consider solid backgrounds — or use maskable icons with a fill.

⚠SVG favicon with external fonts

SVG favicons can't load external fonts or images. They must be self-contained. Use web-safe fonts, embedded paths, and inline styles.

⚠Favicon.ico not in root

Browsers check `/favicon.ico` at the domain root by default. If you put it elsewhere, you MUST declare it in HTML — or browsers get 404s.

Favicon Generator — comparisons and alternatives

ICO vs PNG favicons: ICO is the classic, universally supported, multi-resolution format — but old and limited (uses bitmap data). PNG favicons are modern, support better compression, higher quality. Use both — provide PNG for modern browsers and fall back to ICO for legacy.

PNG vs SVG favicon: SVG scales perfectly to any size and supports theme switching via CSS. Only supported in modern browsers (Chrome 80+, Firefox 41+, Safari 15+). For compatibility, provide PNG fallback along with SVG.

Square vs Maskable icons: Regular Android icons appear as-is; Android may crop them to match the launcher theme. Maskable icons explicitly have padding for the system to mask. Use maskable for professional Android appearance.

Favicon generator vs hand-crafted: Hand-crafting favicons gives pixel-perfect control at each size — important for tiny icons. Generators resize from a single source, which is faster but may not be optimal at 16×16. For logo-heavy sites, consider hand-crafting the 16×16 and 32×32 specifically.

Favicon vs touch icon vs app icon: Favicon is for browsers. Touch icon is for mobile home screens (iOS) and tablets. App icon is for PWA and native mobile apps. Each has specific sizes and design considerations.

Theme-aware favicon vs static: Static favicon uses one color regardless of OS theme. Theme-aware favicon (SVG with CSS media query) adapts to dark/light mode. Modern touch — but optional.

Frequently asked questions about the Favicon Generator

▶What sizes do I need for my favicon?

Minimum: favicon.ico (16+32 multi-res) in site root. Recommended: also add PNG variants 32×32 and 180×180 (Apple Touch), plus 192×192 and 512×512 for PWA. Modern: add SVG favicon for scalability. This tool generates all of these from one source.

▶Where should I put my favicon files?

Put favicon.ico at your site's root (example.com/favicon.ico). Browsers look there by default. Other formats (PNG, SVG) can be anywhere — just reference them correctly in your HTML.

▶What is a maskable icon?

A maskable icon is an Android Chrome icon designed to be cropped to various shapes (circles, squares, squircles) by the launcher. Include padding around your logo (use the central 80% for content). Without maskable support, launchers may crop your logo poorly.

▶Do I need all these sizes?

Modern best practice recommends yes — minimum: favicon.ico, 32×32 PNG, 180×180 Apple Touch. Without them, iOS and Android may show generic icons. For PWA installability, you also need 192×192 and 512×512.

▶How do I make the favicon appear in dark mode?

Use an SVG favicon with CSS media query: @media (prefers-color-scheme: dark) { path { fill: white; } }. Automatically switches between dark and light modes. Or provide two versions and switch via JavaScript.

▶Why isn't my new favicon showing up?

Browsers cache favicons aggressively. Try: hard refresh (Ctrl+Shift+R or Cmd+Shift+R), add a version query (<link rel="icon" href="/favicon.ico?v=2">), or clear browser cache. Can take 24+ hours for search results to update.

▶Can I have a different favicon on different pages?

Yes. Use <link rel="icon"> in each page's HTML head. But it's unusual — most sites use a consistent favicon sitewide for brand recognition.

▶Does the favicon affect SEO?

Indirectly yes. Google shows favicons in mobile search results — a good favicon can increase click-through rate. Favicons themselves aren't a ranking factor, but they affect how your result appears and how memorable your brand is.

▶Should I use SVG favicon in 2026?

Yes, with PNG fallback. SVG is supported by all modern browsers (Chrome 80+, Firefox 41+, Safari 15+). Use SVG as primary, PNG as fallback for old Safari / legacy browsers. Size is tiny, scalability is perfect.

▶What about legacy Internet Explorer?

IE11 supported favicon.ico well. If you must support IE (some corporate/government contexts), include favicon.ico at root — everything else is ignored. Most modern sites don't support IE; you can skip legacy concerns.

Additional resources

Advertisement

Related tools

All Image Tools
🗜️

Image Compressor

Compress JPG, PNG, WebP images — reduce file size by up to 90%

📐

Image Resizer

Resize PNG, JPG, WebP images by pixels or percentage with aspect lock

🖼️

Image to Base64

Convert any image to Base64-encoded data URI for embedding directly in HTML src, CSS background, or JSON data fields.

🌐

Image to WebP Converter

Convert PNG, JPG, GIF images to WebP format — 25-35% smaller files

🏷️

Meta Tag Generator

Generate SEO meta tags, Open Graph, Twitter Cards, and canonical tags

🖼️

Placeholder Image Generator

Generate placeholder images with custom dimensions, colors, and text labels for mockups, wireframes, and development.

Learn more

How to Resize Images Without Losing Quality: A Complete Guide

22 min read

SEO Meta Tags: The Complete Guide to Title, Description, and Open Graph

22 min read

WebP vs PNG vs AVIF: The Best Image Format for Web in 2026

16 min read

Explore more tools

200+ free tools that run in your browser.

Browse all tools →