MockupShelf / Free Tools / Favicon Generator
Drop your image here
or click to browse files
JPG  ·  PNG  ·  WebP  ·  SVG
or
Use Text / Emoji →
— Files
— Formats
— Status

What's Inside Your Favicon Package

7 files — everything a modern website needs to display correctly on every device and browser.

favicon.ico
16 × 16 · 32 × 32 · 48 × 48
The original favicon format. Supported by every browser including IE. Contains three sizes in a single file.
favicon-16x16.png
16 × 16 px
Used by modern browsers in the tab bar. PNG favicons are preferred over .ico by Chrome, Firefox, and Edge.
favicon-32x32.png
32 × 32 px
Used by browsers on high-DPI (retina) displays where the tab is rendered at 2× resolution.
apple-touch-icon.png
180 × 180 px
The icon shown on iPhone and iPad home screens when someone adds your site as a shortcut. iOS applies rounding automatically.
android-chrome-192x192.png
192 × 192 px
Used by Android Chrome when adding your site to the home screen as an app-like shortcut.
android-chrome-512x512.png
512 × 512 px
Used for the PWA splash screen on Android and as the high-resolution icon in the Play Store when installed as a PWA.
site.webmanifest
JSON
Links your Android icons and configures your site as a Progressive Web App. Sets the name, theme color, background color, and display mode.

Free Favicon Generator — Create a Complete Favicon Package

Stop searching for the right icon sizes. This tool generates every file your website needs — from the legacy favicon.ico to high-resolution PWA icons — in one click. Upload your logo or create a favicon from text or an emoji, customize the background and shape, and download a complete ZIP ready to drop into your site.

How to Add a Favicon to Your Website

01
Upload your logo or create from text Upload a PNG, JPG, SVG, or WebP — or switch to Text/Emoji mode and type a letter or emoji to generate a favicon instantly.
02
Customize background and shape Choose a background color, pick Square, Rounded, or Circle shape, and adjust padding to get exactly the look you want.
03
Download the favicon package Click Download and receive a ZIP containing all 7 files — favicon.ico, 5 PNG sizes, and site.webmanifest.
04
Install on your website Extract the ZIP to your website's root folder (same level as index.html), then copy the HTML snippet and paste it into the <head> of every page.

Upload Image vs Text / Emoji

Upload Image
Best when you already have a logo or icon. Supports JPG, PNG, WebP, and SVG. For best results upload a square image at least 512×512 pixels.
Text / Emoji
Create a favicon instantly from a letter, number, or emoji. Pick a font, weight, text color, and background. Perfect for quick branding like Notion, Linear, or personal sites.

Frequently Asked Questions

A favicon is the small icon displayed in your browser tab, bookmarks bar, browser history, and on mobile home screens. It's a key part of your website's visual identity and helps users identify your site among many open tabs.
Different devices and browsers use different icon sizes. favicon.ico covers legacy browsers, PNG files cover modern browsers, apple-touch-icon.png is used when saving to an iPhone or iPad home screen, and the Android Chrome icons are used for home screen shortcuts and PWA splash screens. One size does not fit all.
Yes, 100% free. No account, no watermark, no file size limits. Everything runs in your browser — no files are ever uploaded to a server.
No. All processing happens entirely in your browser using the Canvas API. Your images never leave your device — no data is sent anywhere.
Yes. Switch to Text/Emoji mode in the sidebar, type up to 4 characters, choose a font (Inter, Serif, Mono, or Heavy), font weight, text color, and background color. The mockup preview updates instantly.
At least 512×512 pixels for the best quality at all output sizes. Square images work best — if your logo is not square, use the padding control to add whitespace around it. The tool handles all resizing automatically.
site.webmanifest is a JSON file that links your Android Chrome icons and configures your site as a Progressive Web App (PWA). It sets your app name, theme color, background color, and display mode. You reference it in your HTML with <link rel="manifest" href="/site.webmanifest">.
Extract the downloaded ZIP to your website's root directory (the same folder as your index.html). Then copy the HTML snippet from the tool and paste it inside the <head> tag of every HTML page on your site. That's it — your favicon will appear immediately.
apple-touch-icon.png is the 180×180 image shown on iPhone and iPad home screens when someone taps "Add to Home Screen" for your website. Without it, iOS takes a low-resolution screenshot of your page instead. iOS applies rounded corners automatically — you don't need to add them yourself.
Square uses sharp 90° corners. Rounded uses iOS-style rounding (~22% radius) which is the standard for app icons. Circle uses a full 50% radius. Note: iOS applies its own rounding to apple-touch-icon regardless, so the shape setting mainly affects how the icon looks in the browser tab and Android.