Favicon Generator — Text-Based, 6 Standard Sizes
Generate all standard favicon sizes as PNG with customizable text, colors, and shapes. Download 16×16 to 256×256 for complete browser support.
Preview (128px)
Download all standard sizes:
You're on 7BusyBoss — 300+ free tools that run instantly in your browser. No signup, nothing uploaded.
A favicon is a set of images, each with a specific job
A favicon is not one image—it's six sizes for different devices:
- 16×16 px — browser tab
- 32×32 px — bookmark bar
- 48×48 px — desktop shortcuts
- 64×64 px — Windows taskbar
- 128×128 px — Android
- 256×256 px — PWA and high-res
This tool generates all six as PNG files, each rendered fresh at its target size rather than resampled from the preview, so the 16 px file is drawn at 16 px and stays crisp.
Design for small sizes first, don't just shrink
The biggest mistake is scaling a complex logo to 16 pixels—detail becomes noise. Instead, design for what survives at 16 pixels. This tool uses letter marks and solid colors—simple designs legible at every size. Text is capped at three characters and the type scales with the count (one letter fills 60% of the tile, two 45%, three 32%), so a three-letter mark is noticeably tighter than a monogram. Shapes (square, rounded, circle) complete the design. Use the size buttons under the preview to check legibility at 16 px before you download—that is the size that decides whether the icon works.
HTML markup to install your favicon
Place PNG files in your root directory, then add these tags in <head>:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-256x256.png" sizes="256x256">
<link rel="apple-touch-icon" href="/favicon-256x256.png">
The sizes attribute lets browsers choose the right PNG per context. apple-touch-icon targets the iOS home-screen shortcut. Apple's preferred size is 180×180, which this tool does not emit—pointing the tag at the 256 px file and letting iOS downscale is the standard workaround, and at these flat letter-mark designs the difference is invisible.
Limits and caching
Generates: Six PNG files (16–256 px). Browser-based—no uploads.
Doesn't generate: .ico files, and no 180 px Apple size. Older systems check /favicon.ico at root; convert a PNG to ICO using our converter if needed. Browsers cache favicons aggressively and often ignore a normal reload—hard refresh (Ctrl+Shift+R) after uploading, or open the PNG URL directly to confirm the new file is actually being served.
How to use the Favicon Generator
Takes about a minute. No signup, no download, your data stays in your browser.
- 1Open the tool. Scroll up to the Favicon Generator above — it loads instantly in your browser, no install needed.
- 2Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
- 3Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.
Frequently asked questions
Common questions about the Favicon Generator.
What size should a favicon be?
A favicon should be multiple sizes. This tool generates six: 16×16 for tabs, 32×32 for bookmarks, 48×48 for desktop, 64×64 for Windows, 128×128 for Android, and 256×256 for high-res displays. Most modern websites use all six sizes to support every platform and context.
Why isn't my favicon showing on my website?
Browsers cache favicons aggressively and frequently ignore an ordinary reload. After uploading new PNG files, perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R). If it still shows the old icon, open the PNG URL directly in a tab to confirm the new file is being served, then verify the paths in your link tags match the actual file locations and that the tags sit inside the head element.
Do I still need favicon.ico?
Not required for modern browsers. Current browsers read PNG files from link tags. Some legacy systems may check /favicon.ico at the root, so creating one is optional but safe. If needed, convert a 32×32 PNG to ICO format using an image converter tool.
What about the Apple touch icon at 180×180?
This tool generates 16 to 256 px and does not emit a 180×180 file, which is Apple's preferred size for iOS home-screen shortcuts. Point your apple-touch-icon tag at the 256×256 PNG instead and iOS will downscale it. For flat letter-mark icons like the ones this tool produces, the downscale is not noticeable.
How do I add a favicon to my website?
Download the PNG files and place them in your root directory. Add link tags with rel="icon", type="image/png", href (file path), and sizes (dimensions) inside your HTML head. Include a separate apple-touch-icon link for iOS support. See the markup section above for exact code to copy.
Community rating
Discussion (0)
No comments yet. Start the discussion.
Keep exploring
Related tools across 7BusyBoss — all free, all instant.
More in Design Generators
- Gradient Text Generator
- CSS Animation Generator
- Glassmorphism Generator
- CSS Flexbox Generator
- CSS Text Shadow Generator
- CSS Button Generator
- Neumorphism Generator
- QR Code Reader