Upload your logo or icon and instantly generate all favicon sizes: 16×16, 32×32, 48×48, and 180×180 Apple touch icon. Download as a ZIP with favicon.ico and an HTML snippet entirely in your browser, no server uploads.
Generates 16×16, 32×32, 48×48, 180×180 and favicon.ico in one click
Canvas API resizes images on your device — nothing ever uploads to a server
Download all files in one ZIP, including a ready-to-paste HTML implementation
Upload any image — PNG, JPG, SVG, or WEBP. Our tool resizes it to every standard favicon dimension and packages everything into a ready-to-deploy ZIP.
Drop your logo or icon here
or click to browse
PNG, JPG, SVG, WEBP — Max 10 MB
Tip: Use a square image at 512×512px or larger for best quality
No account required — 100% free forever
A favicon (short for "favorite icon") is the small image that browsers display in the tab next to your page title, in bookmark lists, browser history, and on mobile home screens when someone saves your site. The name comes from Internet Explorer 5, which introduced the feature in 1999 and stored the icons in a browser's "Favorites" menu.
Despite its tiny size — typically 16×16 pixels in browser tabs — the favicon is one of the most visible brand touchpoints on the web. Every time someone opens a tab to your site, the first thing they see is your favicon. It's the icon that helps users identify your tab among dozens of others. A missing or generic favicon is an immediately noticeable signal of an unfinished or low-quality website.
Favicons serve three practical purposes that directly affect your website's success:
Browsers and operating systems request different favicon sizes depending on where they display them. Here's exactly what each size does:
favicon-16x16.pngStandard browser tab icon. The most commonly requested size across all browsers. Keep this one sharp — it's what people see 90% of the time.
favicon-32x32.pngHiDPI / Retina display tab icon. Chrome and Firefox request this on high-resolution screens. Doubles the pixel density of the 16×16 for crisp display on modern monitors.
favicon-48x48.pngWindows taskbar and pinned sites. Internet Explorer and Edge use this size when a user pins your site to the Windows taskbar or creates a website shortcut on the desktop.
favicon-180x180.pngApple touch icon for iOS. Used when someone adds your site to their iPhone or iPad home screen. Without this, iOS takes a low-quality screenshot of your page.
The favicon.ico file is a legacy format that can contain multiple sizes embedded in a single file. Modern browsers prefer PNG, but favicon.ico in the root of your site ensures compatibility with older browsers and tools that request it automatically — including feed readers, crawlers, and password managers.
/public in Next.js) and paste the HTML snippet into your <head>.After downloading your favicon package, place all files in your website root (or /public directory in Next.js / Nuxt), then add this to the <head> of every page:
HTML — paste inside <head>
<head> <title>Your Page Title</title> <!-- Standard favicon.ico for legacy browser support --> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <!-- PNG favicons for modern browsers --> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" /> <!-- Apple touch icon — used when saving to iOS/iPadOS home screen --> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" /> </head>
For Next.js App Router, you can place favicon.ico directly in the /app directory and Next.js will automatically serve it. For the other sizes, use the metadata API or place them in /public and reference them in a custom layout.js.
PNG is the best source format — it supports transparency and lossless compression. Start with a PNG at 512×512px or larger. SVG also works well if your browser version supports it. Avoid JPEG because it doesn't support transparent backgrounds, which leaves your favicon with an ugly white rectangle in browsers that use a dark theme.
You need both for maximum compatibility. Modern browsers (Chrome, Firefox, Safari) prefer PNG files because they offer better quality control and transparency. However, favicon.ico remains essential for backward compatibility — it's what many RSS readers, link scrapers, and older enterprise tools automatically request from your domain root. This generator creates both formats for you.
Browsers aggressively cache favicons — sometimes for days. To force an update during development, open DevTools (F12), go to the Network tab, check "Disable cache", and hard-reload the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). In production, you can bust the cache by adding a version query string to your favicon links, such as href="/favicon.ico?v=2".
The Apple touch icon (apple-touch-icon) is the 180×180 image that iOS and iPadOS use when a user adds your website to their home screen. Without it, Apple devices fall back to taking a screenshot of your full page and scaling it down, which looks terrible. If any of your users are on iPhones or iPads, you need this icon. This generator always creates it automatically.
No — your images never leave your device. This tool uses the HTML5 Canvas API to resize your image entirely inside your browser tab. There is no server involved in the processing step. The only network request is loading this web page itself. This makes the tool completely private and also much faster than server-based alternatives since there is no upload or download round-trip.
Whether you're launching a new website, refreshing a brand identity, or building your hundredth Next.js project — you need a proper favicon. Skip the Photoshop workflow, the command-line ImageMagick commands, and the paid subscriptions. Upload your image above and download a complete, production-ready favicon package in under 10 seconds.
Free forever · No account needed · 100% private
Every tool runs entirely in your browser no uploads, no servers, no accounts. Fast, private, and free forever.
Colors, typography, CSS, SVG & more
Generate beautiful color schemes using color theory algorithms monochromatic, complementary, triadic, and more.
Build stunning CSS gradients visually linear, radial, and conic and copy production-ready code instantly.
Discover expert Google Fonts combinations curated for optimal readability and aesthetic harmony.
Generate production CSS visually flexbox, grid, typography, border, and box shadow with live preview.
Upload, edit, optimize, and convert SVG files entirely in your browser. Export clean SVG or React JSX.
Images, accessibility, spacing & readability
Compress images up to 90% smaller WebP, AVIF, JPEG, PNG with filters, cropping, and rotation. 100% private.
Remove image backgrounds instantly using on-device AI no uploads, no account. Download transparent PNG.
Generate a mathematically consistent shadow elevation system and export CSS variables or Tailwind config.
Build a harmonious spacing scale based on mathematical ratios and export it as CSS or Tailwind config.
Preview and compare border radius values in real time across multiple shapes and sizes.
URLs, QR codes, tracking & security
Shorten any URL instantly with browser history, QR code export, and zero server tracking.
Custom QR codes for URLs, WiFi, vCards & more. Add colors, logo, download PNG or SVG.
Build GA4-ready UTM tracking URLs with smart presets, validation, and CSV history export.
Strip 50+ tracking parameters (UTM, fbclid, gclid, msclkid) with before/after comparison.
See how your URL appears on Twitter, Facebook, LinkedIn & WhatsApp. Check OG metadata.