Skip to content
FaviconStudio

Free · No sign-up · Runs in your browser

Free Favicon Generator

A favicon maker for text, logos, emoji and icons. Create a favicon in under a minute and download a complete set: favicon.ico, PNG sizes from 16 to 512 px, an Apple touch icon and a web manifest.

Already have a logo? Use the image tab, or go straight to the favicon package generator, SVG to favicon, PNG to ICO or the favicon checker.

Check my current favicon

favicon.ico generator

Every download includes a multi-size favicon.ico (16, 32, 48, 64 px) plus PNG icons.

Only need the ICO? Favicon ICO generator →

Image to favicon

Upload a PNG, JPG, WebP or SVG logo, fit or crop it, and get every favicon size.

Image to favicon generator →

Apple & Android icons

180×180 Apple touch icon, 192 and 512 px Android Chrome icons and a site.webmanifest.

Mobile icon sizes explained →

Built for web developers, designers, and business owners

100% free
No watermarks, no paid tiers
Private
Images never leave your browser
< 60s
From idea to downloaded ZIP
9 sizes
16×16 up to 512×512 PNG
ICO + PWA
favicon.ico and manifest included
No sign-up
No account, no email required

Create Your Favicon

Choose your preferred method and customize your favicon with our intuitive tools

Text Favicon

1/3 characters

Preview

Preview

64x64 preview

Different Sizes

16x16

32x32

48x48

64x64

Preview in light and dark mode

Your Website Title
Dark OS taskbar / home screen
Pinned
Tip: some icons look great on white but disappear on dark — this preview helps you catch that before downloading.

HTML Code

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">

Download Options

Raster format

ICO mode keeps loose PNGs for the web; favicon.ico (16–64) is always added to the ZIP. PWA icons stay PNG.

Sizes

|
PWA manifest (site.webmanifest)
PWA ready
What is a web app manifest?
A site.webmanifest tells browsers which icons to use when your site is saved to a phone home screen or installed as a PWA.
Included in ZIP with 192×192 and 512×512 PNG icons.

📋 Usage Instructions

  1. 1. Download your favicon files
  2. 2. Upload them to your website's root directory
  3. 3. Add the HTML code from the preview panel to your <head>
  4. 4. Test your favicon in different browsers
File Information
Loose icons: PNG (ICO mode uses PNG for loose files)
Always included: multi-size favicon.ico (PNG frames)
Selected sizes: 7
ZIP: selected icons + favicon.ico + site.webmanifest + 192×192 + 512×512 PNG

How to Create a Favicon in 4 Steps

From blank canvas to a complete PNG + ICO + PWA manifest package in under one minute. No design skills, no software, no sign-up.

1

Choose Your Creation Method

Pick Text, Image, Emoji, or Icon — whichever matches your brand.

  • Text: turn any initial, abbreviation, or word into a favicon
  • Image: upload PNG, JPG, WebP, or SVG and scale to all sizes
  • Emoji: any emoji exported as a full favicon package
  • Icon: choose from 60+ Lucide icons
2

Customise Your Design

Adjust every visual property — colours, font, shape, and padding.

  • Background colour: use presets or enter any hex code
  • Text / icon colour: full custom colour picker
  • Border radius: 0% (sharp) → 50% (circle)
  • Font family and font size for text favicons
3

Preview in Light & Dark Mode

See your favicon in a real browser tab and a dark OS taskbar before downloading.

  • Live browser tab mock in light and dark themes
  • Dark taskbar / home-screen preview
  • Multi-size grid: 16, 32, 48, 64 px
  • Adjustments update the preview in real time
4

Download Your Favicon Package

Get a ZIP with PNG icons, a multi-resolution favicon.ico, and a PWA manifest.

  • PNG icons in all standard sizes (16–512 px)
  • favicon.ico with 16, 32, 48, 64 px layers
  • site.webmanifest with 192 and 512 px PWA icons
  • Copy-paste HTML snippet from the Preview panel

Ready to Create Your Favicon?

Create a professional favicon with FaviconStudio in under a minute. No design skills required, no sign-up, and every download is free.

The Complete Favicon Guide: Sizes, Formats & Best Practices

Everything you need to know about creating, implementing, and optimising favicons — from a 16×16 browser tab icon to a full PWA icon set.

What Is a Favicon?

A favicon (short for "favourite icon") is the small image that appears in browser tabs, bookmarks, browser history, address-bar suggestions, and — crucially — Google mobile search results. The name dates to Internet Explorer 5, but favicons now appear in every major browser and operating system.

Modern websites need favicons in multiple sizes and formats because different contexts demand different assets. A browser tab uses a 16×16 or 32×32 PNG. An iOS home screen icon requires a 180×180 Apple Touch Icon. A PWA install prompt on Android needs 192×192 and 512×512 entries in a site.webmanifest. A Windows taskbar shortcut reads from a multi-resolution favicon.ico.

FaviconStudio generates all of these from a single design — PNG, ICO, and the manifest JSON — in one ZIP download.

Why Favicons Matter for SEO and Brand Trust

  • 1.
    Google shows favicons in search results. Google displays your favicon next to your site name in search results. It must be square, at least 8×8 pixels (Google recommends larger than 48×48), and crawlable — see Google's favicon guidelines. A clear, recognisable icon helps your result stand out from the ones around it.
  • 2.
    Tab identification and return-visits. When many tabs are open, titles get truncated and the favicon is often the only thing left to identify your site. A missing favicon (the grey globe default) is easy to lose in that row.
  • 3.
    Trust and professionalism signals. A missing or blurry favicon makes a site look unfinished, even if the rest of the design is excellent. It is a small detail, but it is visible on every page view, bookmark, and shared link preview.
  • 4.
    PWA and home-screen presence. When users add your site to their iOS or Android home screen, the 180×180 Apple Touch Icon and the web manifest icons (192×192 and 512×512) become the app icon. A high-resolution favicon package makes your site look like a native app.
  • 5.
    Bookmarks and browser-history recognition. When a user bookmarks your page or searches their history, the favicon is their primary visual anchor. Brand colours in the favicon reinforce recall every time the user opens their bookmark bar.

Complete Favicon Sizes Guide (2026)

Different browsers and platforms request different icon sizes. The table below covers every standard favicon size and where it's used. FaviconStudio generates all of them in one download. For the full deep-dive, see our complete favicon sizes guide.

SizeFormatWhere it's used
16×16ICO / PNGStandard browser tab, bookmarks bar
32×32ICO / PNGHigh-DPI browser tab, Windows taskbar shortcut
48×48ICOWindows site icon (inside favicon.ico)
64×64ICOWindows high-DPI site icon (inside favicon.ico)
96×96PNGGoogle TV, Android Chrome older
180×180PNGiOS / iPadOS home screen (Apple Touch Icon)
192×192PNGAndroid Chrome home screen, PWA manifest
512×512PNGPWA install splash screen, Google Play

Tip: Start with a vector design at 512×512 and let FaviconStudio scale down — this guarantees every size is crisp.

Favicon Formats Explained: ICO vs PNG vs SVG

The right format strategy balances maximum browser support with modern quality. See our detailed favicon formats comparison for benchmarks and code.

ICO — the legacy backbone

A .ico file is a container that holds multiple PNG frames (16, 32, 48, 64 px). Every browser dating back to IE supports it. Place a favicon.ico at your domain root and legacy browsers will find it automatically — no <link> tag required. FaviconStudio includes a multi-frame ICO in every ZIP download. You can also convert any PNG to ICO with our standalone tool.

PNG — the modern standard

PNG favicons are supported by all modern browsers via <link rel="icon" type="image/png">. They support full transparency and render crisply at all sizes. The 32×32 PNG is the de-facto primary icon for modern Chromium-based and Firefox browsers.

SVG — the 2026 recommendation

SVG favicons are now supported by Chrome, Firefox, and Edge. Their key advantages are infinite scalability (pixel-perfect at any DPI) and native dark mode support via CSS @media (prefers-color-scheme). Use SVG to favicon or upload your SVG directly in FaviconStudio. Always include PNG fallbacks for Safari.

WebP and AVIF — not yet

Despite excellent compression, WebP and AVIF are not yet universally supported as favicon formats. Stick with the ICO + PNG + SVG stack for now.

How to Create a Professional Favicon

A professional favicon doesn't require a designer or paid software. FaviconStudio supports four creation methods:

Text-based favicons

Enter 1–3 characters — an initial, abbreviation, or brand word. Choose font, size, colour, and border radius. The generator exports every size including a text-to-ICO file. Read the text favicon guide.

Image to favicon

Upload a PNG, JPG, WebP, or SVG logo. FaviconStudio scales and centres it into all required sizes. Adjust padding and border radius. Use our PNG to ICO tool or the SVG to favicon converter for dedicated workflows.

Emoji favicons

Pick any emoji and export it as a full favicon package. Works surprisingly well at 16×16 and is popular for personal blogs, side projects, and content sites. Choose a solid background so the emoji stands out in dark browser themes.

Icon library

Browse 60+ icons organised by category — Business, Technology, Navigation, Security, and more. Select an icon, pick your background and icon colour, and download. The icon renders correctly in the ICO and all PNG sizes.

Favicon Design Best Practices

Most design advice focuses on how things look at full size. Favicons are different — the 16×16 pixel version is what actually matters. Designs that look great at 200 px often become unreadable at 16 px.

  1. One dominant element. The most effective favicons use a single strong shape: one letter, one geometric form, one icon. Google's G, Apple's apple, GitHub's Octocat — all are single-element designs. Two elements at 16 px fight each other.
  2. Maximum contrast. Contrast matters more than colour accuracy at small sizes. A white mark on a vivid background holds up far better than subtle colours on a light background. Test on a dark browser theme — Chrome dark mode shows tabs on near-black.
  3. Use a solid background colour. Fully transparent favicons become invisible against certain browser backgrounds. A coloured square or circle anchors the icon visually. FaviconStudio defaults to a rounded blue background for this reason.
  4. One or two colours maximum. More colours add complexity without clarity at tiny sizes. Your primary brand colour plus white is the classic high-impact combination.
  5. Add 20% border radius. Rounded corners look at home next to other tabs on macOS and Windows 11. FaviconStudio's default 20% radius is intentional — it matches the visual language of the modern desktop.
  6. Preview in dark mode before downloading. FaviconStudio's live preview includes both a light browser tab mock and a dark OS taskbar view. Adjust your design until it looks sharp in both contexts.
  7. Match your brand colours. Consistency across all touchpoints — your website, social profiles, email signature, and favicon — reinforces brand recognition. Use your exact brand hex codes via the colour input fields.

How to Add a Favicon to Your Website

After downloading your FaviconStudio ZIP, upload all files to your site's public root directory and paste this code into your HTML <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If you also have an SVG logo, add <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Keep sizes="32x32" on the ICO line — with sizes="any" Chrome picks the ICO over the SVG. For platform-specific guides, see:

HTML & all platforms guide →WordPress guide →Shopify guide →

Favicon Not Showing? Common Fixes

If your favicon isn't appearing after upload, work through this checklist before digging deeper. Use the favicon checker to diagnose automatically, or follow our complete fix guide.

Hard-refresh your browser: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) bypasses cache.
Check the file path: Open /favicon.ico in your browser address bar. If it 404s, the file isn't uploaded correctly.
Use absolute paths: href="/favicon.ico" not href="favicon.ico" — the leading slash prevents path errors on subpages.
Clear CDN / hosting cache: Cloudflare, Vercel, Netlify, and most hosts cache static files. Purge the cache after uploading new icons.
Check the <link> tag order: Place favicon link tags before other external resources in <head> to prevent race conditions.
Test in incognito mode: Incognito windows start with a clean cache, making it easier to see the fresh favicon.

Create Your Favicon for Free — Right Now

No sign-up. No watermarks. No file size limits. Generate a complete favicon package — PNG, ICO, and PWA manifest — in under one minute.

Open the Favicon Generator →

Favicon Generator FAQ

Sizes, formats, converting SVG and PNG, and fixing a favicon that will not show up

What size should a favicon be?
Ship a favicon.ico with 16, 32 and 48 px layers, a 32×32 PNG for browser tabs, a 180×180 apple-touch-icon.png for iPhone and iPad, and 192×192 plus 512×512 PNGs in your web manifest for Android. Google Search recommends a square icon larger than 48×48. The generator exports all of these in one ZIP. Every size and what it is for: favicon sizes guide.
Should my favicon be ICO, PNG or SVG?
Use all three for different jobs. favicon.ico at your site root is what browsers, Windows and many crawlers request by default. PNG files cover Apple touch icons and Android manifest icons. An SVG favicon is optional: it stays sharp at any size and can switch colours in dark mode in Chrome, Edge and Firefox. If you only ship one file, ship favicon.ico. Side-by-side comparison with HTML for each: ICO vs PNG vs SVG.
How do I create a favicon for free?
Open the generator on this page, pick Text, Image, Emoji or Icon, adjust colours, font, padding and corner radius, check the live preview at 16 and 32 px, then click Download. You get a ZIP with favicon.ico, PNG icons, an Apple touch icon and site.webmanifest. There is no sign-up and no watermark.
How do I make a favicon.ico file?
Every download from the generator includes a multi-size favicon.ico with 16, 32, 48 and 64 px layers, so it works as a favicon.ico generator for text, images, emoji and icons. If you already have a PNG logo, the PNG to ICO converter lets you choose exactly which layers (16 to 256 px) go into the file.
Can I convert an SVG logo to a favicon?
Yes. Upload the SVG in the Image tab or on the SVG to favicon converter. It is rendered to PNG at every size you select and packed into favicon.ico, so browsers and apps that ignore SVG favicons (older Safari versions, feed readers, many crawlers) still get a crisp icon. If you also want an SVG favicon, keep your original file as favicon.svg alongside the downloaded files.
Can I make a favicon from text or initials?
Yes. The Text tab turns one to three characters into a favicon. Pick a heavy font, a high-contrast background and preview it at 16 px before downloading. One or two letters stay readable in a browser tab; three is the practical maximum. Worked examples: text to favicon guide.
What icons do iPhone and Android need?
iPhone and iPad use a 180×180 Apple touch icon linked from your HTML head. Android Chrome reads 192×192 and 512×512 PNGs from site.webmanifest, and a maskable icon if you add one. The generator creates all three PNGs and the manifest.
How do I add a favicon to my website?
Upload the files from the ZIP to your site root, then add this to your HTML <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Platform guides: any website, WordPress, Shopify.
Why is my favicon not showing?
Usually it is browser cache, a wrong file path or a missing link tag. Open yourdomain.com/favicon.ico directly to confirm it loads, hard-refresh with Ctrl+Shift+R or Cmd+Shift+R, and purge any CDN cache. In Google Search, a new favicon can take weeks to appear because Google recrawls it on its own schedule. The favicon checker tests all of this for a URL; for each fix in detail, see the favicon not showing guide.
Is FaviconStudio free, and are my images uploaded?
Every tool is free for personal and commercial use, with no account and no watermark. Images are processed in your browser with the HTML5 canvas and are never uploaded to a server.

Why Use FaviconStudio

Professional tool with everything you need. Build website icons, app icons, and brand icons in seconds. No design skills required.

Lightning Fast Generation

Create professional favicons in seconds with our optimized tools and algorithms.

  • Instant preview updates
  • Real-time customization
  • Dark mode preview — see exactly how your favicon looks in both light and dark browser themes before you download.
  • No waiting times
  • Optimized performance

100% Free & Secure

No watermarks, no subscriptions, no hidden fees. Your data stays private and secure.

  • No registration required
  • No watermarks added
  • Privacy-focused design
  • Images are processed in your browser, not uploaded

Multiple Creation Methods

Create favicons from text, images, emojis, PNG, SVG, or choose from our icon library.

  • Text-based favicons
  • PNG to favicon conversion
  • SVG to favicon conversion
  • Emoji integration
  • Icon library access

All Sizes, ICO & PWA

Download PNG or JPG, plus a multi-resolution favicon.ico and a ready-to-use PWA manifest in one ZIP.

  • PNG, JPG, or ICO-focused packs
  • favicon.ico with 16–64 px layers in every ZIP
  • All standard sizes (16×16 to 512×512)
  • site.webmanifest + 192×192 and 512×512 icons

Mobile Responsive

Perfect experience on all devices - desktop, tablet, and mobile.

  • Touch-friendly interface
  • Responsive design
  • Mobile-optimized tools
  • Cross-device compatibility

Browser Compatible

Works perfectly across all modern browsers and platforms.

  • Chrome, Firefox, Safari support
  • Cross-platform compatibility
  • Modern web standards
  • Future-proof design
100% Free
No hidden costs
No Registration
Start creating instantly
All Sizes Included
16×16 to 512×512 + PWA manifest
Instant Download
Ready in seconds