What is a favicon and where does it appear?

A favicon is the small icon that appears in browser tabs, bookmarks, browser history, and mobile home screens. It is typically your logo or a simplified version of it. Without a favicon, browsers show a generic globe or blank icon, which looks unprofessional and makes your site harder to find among open tabs.

What favicon sizes do I need?

The essential sizes are: 16x16 (browser tabs), 32x32 (taskbar shortcuts), 48x48 (Windows site icons), 180x180 (Apple touch icon for iOS home screens), 192x192 (Android Chrome), and 512x512 (Android splash screen). The favicon generator creates all of these plus an ICO file from a single image upload.

What image format should I upload?

PNG works best because it preserves transparency. JPEG works too but does not support transparent backgrounds. Upload the highest resolution version of your logo or icon you have — the generator will resize it down to each required size. A source image of at least 512x512 pixels produces the best results.

What is the difference between ICO and PNG favicons?

ICO is a legacy format that can contain multiple resolutions in a single file — older browsers and Windows shortcuts require it. PNG favicons are used by modern browsers and mobile devices. You need both: ICO for maximum compatibility, PNG for modern platforms. The generator creates both.

Do favicons support transparent backgrounds?

Yes, if you upload a PNG with a transparent background, the transparency is preserved in all generated PNG sizes and the ICO file. However, Apple touch icons do NOT support transparency — iOS adds a white background behind transparent icons on the home screen.

How do I add a favicon to my website?

Add these HTML tags inside your <head> section: <link rel="icon" type="image/x-icon" href="/favicon.ico"> for the ICO file, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> for PNG sizes, and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS. Upload all files to your site root directory.

Why is my favicon not showing up?

The three most common reasons: (1) Wrong file path — the favicon files must be accessible at the URL specified in your HTML link tags. (2) Browser cache — hard refresh with Ctrl+Shift+R or clear your cache. (3) Missing HTML tags — just placing a favicon.ico in your root directory works in some browsers but adding the link tags ensures universal support.

Can I create a favicon from text or emoji?

This generator converts an uploaded image into favicon sizes. It does not create icons from text, emoji, or letters. For text-based favicons, design your icon in a graphic editor first (even a simple colored square with a letter works), save as PNG, then upload it to generate all the required sizes.

Free Favicon Generator — Create Website Icons from Any Image Instantly

Last updated: April 20268 min readGenerator Tools

A favicon is the tiny icon in your browser tab that tells you which site you are looking at. Without one, your site shows a generic globe icon — indistinguishable from every other unbranded page. A favicon generator takes any image you upload and creates every size your website needs, packaged in a single zip download.

What a Favicon Is and Where It Appears

Favicons show up in more places than most people realize:

Location	Size Used	What Visitors See
Browser tab	16x16	Tiny icon next to your page title — the most visible placement
Bookmarks bar	16x16	Icon next to saved bookmark name
Browser history	16x16	Icon in history list
Windows taskbar	32x32	Pinned site shortcut icon
Desktop shortcut	48x48	Windows site shortcut on desktop
iOS home screen	180x180	Apple touch icon when someone adds your site to home screen
Android home screen	192x192	Chrome shortcut icon on Android
Android splash screen	512x512	Loading screen when opening as a web app

Every Favicon Size Explained

Size	Format	Where It Is Used	Required?
16x16	PNG	Browser tabs, bookmarks, history	Yes — the core favicon size
32x32	PNG	Windows taskbar, high-DPI tabs	Yes — crisp on modern displays
48x48	PNG/ICO	Windows desktop shortcuts	Recommended
180x180	PNG	Apple touch icon (iOS home screen)	Yes — Apple devices need this
192x192	PNG	Android Chrome home screen icon	Yes — Android devices need this
512x512	PNG	Android splash screen, PWA icon	Yes — progressive web apps
favicon.ico	ICO	Legacy browsers, universal fallback	Yes — maximum compatibility

The favicon generator creates all of these from a single image upload. No manual resizing needed.

How to Use the Generator

Upload your image — use your logo or a simplified version. PNG recommended (preserves transparency). Minimum 512x512 for best quality.
Download the zip — contains every favicon size listed above plus the ICO file.
Upload files to your website — place them in your root directory (where index.html lives).
Add HTML tags — paste the link tags into your <head> section (code below).

HTML Code to Install Your Favicon

Add these tags inside the <head> of every page on your site:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

Common Favicon Mistakes

Using a full photo as your favicon — photos become unrecognizable at 16x16 pixels. Use a simple icon, logo mark, or single letter with high contrast.
Forgetting the apple-touch-icon — without it, iOS shows a screenshot thumbnail when someone saves your site to their home screen. Looks terrible.
Only including favicon.ico — ICO alone works for browser tabs but misses mobile home screens entirely. Include the PNG sizes too.
Using JPEG source with expected transparency — JPEG does not support transparent backgrounds. Use PNG if you need transparency.
Not clearing browser cache after updating — browsers aggressively cache favicons. Hard refresh (Ctrl+Shift+R) or clear cache to see your new icon.

Prepare Your Image Before Generating

The generator resizes your image — it does not redesign it. For the best results:

Crop your image to a perfect square before uploading
Remove the background if you want a transparent favicon
Resize to at least 512x512 for the sharpest output across all sizes
Compress the output PNGs if file size matters for your server
Use your meta tag generator to set up the rest of your site metadata while you are at it

What This Generator Does NOT Do

Transparency on limitations:

Does not create icons from text, letters, or emoji — you need an image file to upload
Does not generate SVG favicons — SVG favicons are a newer standard with limited browser support
Does not create animated favicons — no browser reliably supports animated favicons
Does not generate a web manifest file — you will need to create that separately if building a progressive web app

Upload your image, download every favicon size in one zip.

Open Favicon Generator

Free Favicon Generator — Create Website Icons from Any Image Instantly

What a Favicon Is and Where It Appears

Every Favicon Size Explained

How to Use the Generator

HTML Code to Install Your Favicon

Common Favicon Mistakes

Prepare Your Image Before Generating

What This Generator Does NOT Do

Related Posts

Favicon Generator — No Signup

How to Create a Favicon

Favicon Sizes Guide

Favicon for WordPress & Shopify