Free Tool
Create professional favicons in seconds. Type your brand initial, paste an emoji, or upload an image. Customize colors and shape, preview in a real browser tab mockup, and download PNG in all standard sizes — 16, 32, 180, 192, 512 and more. Free forever, no signup, runs entirely in your browser.
The Basics
A favicon (short for “favorites icon”) is the small graphic that appears in your browser tab, bookmark bar, and mobile home screen alongside your website name. It is one of the first things people notice when they have multiple tabs open — and one of the first things they notice is missing when it is not there.
Beyond browser tabs, favicons appear in search engine results on mobile devices, in reading-list bookmarks, in PWA (Progressive Web App) install prompts, and on iOS and Android home screens when users save your site as a shortcut. A missing favicon shows a generic globe icon or blank space — a subtle but clear signal that the site is unfinished or low-quality. Adding a favicon is one of the simplest ways to make your website look polished, professional, and trustworthy.
Step-by-Step Guide
Choose your input mode
Select Text to type 1-3 characters (your brand initial works great), Emoji to paste any emoji, or Image to upload an existing logo, photo, or SVG file.
Pick your shape and colors
Choose Square, Rounded, or Circle. Select a background color from 10 curated presets or use the custom color picker. In Text mode, pick a font and text color too.
Preview at real sizes
The live preview shows your favicon at 256px alongside small-size previews at 16px, 32px, and 48px. The browser tab mockup shows exactly how it looks in a Chrome tab.
Download your favicon
Pick a size from the dropdown (32x32 for standard, 180x180 for Apple, 192x192 for Android) and click Download PNG. Or expand the size grid to download every standard size individually.
Add to your website
Place the downloaded PNG files in your site's public directory. Click 'Copy HTML Tags' to get all the link tags you need — paste them into your HTML head and you are done.
Size Reference
Different browsers and devices request different favicon sizes. Here is what each standard size is used for and when you need it.
16 × 16
The classic favicon size. Used in browser tabs on standard-resolution screens and in the address bar on older browsers.
32 × 32
Used in browser tabs on retina/high-DPI screens, taskbar shortcuts on Windows, and bookmark icons. This is the most commonly requested size.
48 × 48
Used by Windows for desktop shortcuts and by some browsers for tab previews. A good middle-ground size.
64 × 64
Used in some browser extension panels and high-resolution bookmark managers. Optional but provides extra sharpness.
128 × 128
Used in Chrome Web Store listings and some operating systems for application icons. Useful for web apps.
180 × 180
The Apple Touch Icon — displayed when someone saves your website to their iPhone or iPad home screen. Required for iOS.
192 × 192
The standard Android Chrome icon. Used when a user adds your site to their Android home screen or installs your PWA.
512 × 512
Used in PWA install prompts, splash screens, and some app store listings. Required for Progressive Web Apps.
Implementation Guide
Plain HTML
Place your favicon PNG files in the root or public folder. Add <link> tags in the <head> section of your HTML — one for each size. The 'Copy HTML Tags' button in this tool generates all the tags you need.
Next.js / React
Drop your favicon files in the /public directory. In your root layout or _document file, add the link tags inside <Head>. Next.js also supports placing a favicon.ico in /app for automatic detection.
WordPress
Go to Appearance → Customize → Site Identity → Site Icon. Upload your 512x512 PNG and WordPress generates all the smaller sizes automatically.
PWA (Progressive Web App)
Add your 192x192 and 512x512 icons to the 'icons' array in your manifest.json file. Set 'purpose' to 'any maskable' for Android adaptive icon support.
Shopify / Squarespace
Upload your favicon through the platform's built-in settings panel — usually under Site Settings or Theme Customization. Use the 32x32 or 180x180 size.
Design Tips
Keep it dead simple
A favicon is displayed at 16 pixels in most browsers. Fine details, gradients, and small text will become an unreadable blob. Use a single letter, a bold icon, or a simple geometric shape.
Use bold, contrasting colors
Light colors on light backgrounds disappear in browser tabs. Choose a strong background color and a high-contrast foreground. Test your favicon against both light and dark browser themes.
Test at 16 × 16
Design at 512px but always check the 16px preview. If your favicon is not recognizable at 16 pixels, simplify the design. The small-size previews in this tool show you exactly how it looks.
Match your brand identity
Your favicon should feel like a natural extension of your brand. Use your primary brand color as the background and your logo mark or initial as the content. Consistency builds recognition.
Provide multiple sizes
Do not just upload one size and call it done. Browsers are better at downscaling than upscaling. Download 32x32 and 180x180 at minimum — or use the individual-size grid to grab all eight standard sizes.
100% Free · No Hidden Charges
Is this favicon generator really free — no signup, no watermarks?
Yes. The myeasypage favicon generator is completely free. No account creation, no watermarks, no ads, and no usage limits. Your favicons are generated entirely in your browser using the HTML Canvas API — no images or data are ever uploaded to a server. Create unlimited favicons, download them at any size, and use them for personal or commercial projects. Free forever.
Ready to turn tools into traffic?
Combine your links, shop, bookings, and content into one conversion-focused profile.