How to Create a Favicon for Your Website — Complete 2026 Guide with All Sizes
Learn how to create professional favicons for any website. Covers all required sizes, ICO vs PNG formats, PWA icons, manifest.json setup, and framework-specific implementation.
9 min read
··Updated: 24 May 2026·By Helperzy Team
A favicon is the small icon that appears in browser tabs, bookmarks, mobile home screens, and search results next to your website name. Despite being tiny, it plays a significant role in brand recognition, user trust, and professional appearance. In 2026, favicons have evolved far beyond a single 16×16 ICO file — modern websites need multiple sizes across different formats to look sharp on every device and platform. This guide covers everything you need to know about creating, optimizing, and implementing favicons correctly.
Why Favicons Matter More Than You Think
Favicons serve three critical purposes that directly impact your website's success:
Brand Recognition: When users have 20+ tabs open, your favicon is the only visual identifier. A distinctive favicon helps users find your tab instantly. Sites without favicons show a generic globe icon — making them look unprofessional and harder to locate.
Trust Signal: Search engines display favicons in mobile search results (Google has shown favicons in SERPs since 2019). A professional favicon next to your URL increases click-through rates by signaling legitimacy. Missing favicons can reduce CTR by 10-15% according to multiple SEO studies.
PWA Requirement: Progressive Web Apps require properly configured icons in manifest.json. Without them, your site cannot be installed on home screens, won't show splash screens, and loses the app-like experience that drives engagement.
Complete Favicon Size Guide for 2026
Here are all the favicon sizes you need for complete device coverage:
16×16 — Browser tab icon (the classic favicon size)
32×32 — Windows taskbar, bookmark bars, high-DPI browser tabs
48×48 — Windows desktop shortcut icon
96×96 — Google TV icon
128×128 — Chrome Web Store icon
180×180 — Apple Touch icon (iPhone/iPad home screen)
192×192 — Android Chrome icon, PWA manifest
256×256 — Opera Speed Dial, Windows 10 start
512×512 — PWA splash screen, Google Play Store listing
For most websites, the essential six are: 16, 32, 48, 180, 192, and 512. These cover browser tabs, desktop shortcuts, Apple devices, Android devices, and PWA requirements. The remaining sizes are for specific platforms you may or may not target.
Advertisement
ICO vs PNG vs SVG — Which Format to Use
Each favicon format has distinct advantages:
ICO (Image Container Object): The original favicon format, supported by every browser ever made. Its unique advantage is containing multiple resolutions in a single file — a 16×16, 32×32, and 48×48 image all packed together. The browser picks the best size automatically. Downsides: larger file size, no animation support, limited to 256×256 maximum.
PNG (Portable Network Graphics): The modern standard. Supports transparency, smaller file sizes than ICO, and works in all current browsers. Each size requires a separate file, but this gives you precise control. Use PNG for all sizes above 48×48.
SVG (Scalable Vector Graphics): The newest option (supported since Chrome 80, Firefox 41, Safari 15.4). A single SVG file scales perfectly to any size. Supports CSS media queries — you can make your favicon adapt to dark mode. Limitation: not supported in older browsers, so always include PNG/ICO fallbacks.
Recommended approach: Use favicon.ico (containing 16, 32, 48) as the universal fallback, individual PNGs for specific sizes, and optionally an SVG for modern browsers.
Creating Favicons from Different Sources
The source material significantly affects favicon quality at small sizes:
From Logo: Best approach for established brands. Use a simplified version of your logo — remove text, thin lines, and small details that disappear at 16×16. Many companies use just their logomark (the icon part) without the wordmark for favicons.
From Text/Initials: Perfect for startups, personal sites, and projects without a logo. Use 1-2 bold characters on a colored background. Choose a font with strong, distinctive letterforms (Inter, Poppins, or Montserrat work well). Ensure high contrast between text and background.
From Emoji: Quick solution for side projects, prototypes, and personal blogs. Emojis are universally recognizable and render well at small sizes. Note that emoji appearance varies across operating systems — what looks great on macOS may look different on Windows.
Design Tips for Small Sizes: Use bold shapes, high contrast, minimal detail. Test your favicon at actual 16×16 size — if you can't identify it, simplify further. Avoid gradients at sizes below 32×32 (they become muddy). Solid colors with simple shapes work best at the smallest sizes.
Implementing Favicons in HTML
The correct HTML markup for comprehensive favicon support:
Place these tags in your document's <head> section:
1. ICO fallback (works everywhere): <link rel="icon" href="/favicon.ico" sizes="48x48">
2. SVG for modern browsers: <link rel="icon" href="/favicon.svg" type="image/svg+xml">
3. Apple Touch icon: <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
4. PWA manifest: <link rel="manifest" href="/manifest.json">
For the manifest.json, declare your icons array with all PWA sizes (192 and 512 minimum). Set the purpose to 'any maskable' for icons that work with Android's adaptive icon system.
File placement: Put all favicon files in your website's root directory (/public in Next.js, root in static sites). Some older browsers only look for /favicon.ico at the root — having it there ensures universal compatibility.
Framework-Specific Favicon Setup
Next.js (App Router): Place favicon files in /app directory. Next.js 13+ automatically serves files named favicon.ico, icon.png, and apple-icon.png from the app directory. For custom sizes, use the metadata export in layout.tsx with an icons object specifying each size and path.
React (Vite/CRA): Place files in /public directory. Add link tags to index.html manually. For dynamic favicons, use react-helmet or a custom hook that updates document.head.
WordPress: Use the Site Identity section in Customizer (Appearance → Customize → Site Identity). Upload a 512×512 PNG and WordPress generates all required sizes automatically. For manual control, add link tags to header.php or use a plugin like RealFaviconGenerator.
Static HTML: Add link tags directly to your HTML head. Place favicon files in the root directory. Use absolute paths (/favicon-32x32.png) rather than relative paths for consistent behavior across all pages.
Common Favicon Mistakes to Avoid
Using only favicon.ico: Many developers stop at a single ICO file. This means Apple devices show no icon on home screens, Android shows a generic screenshot, and PWA installation fails. Always include PNG sizes for mobile devices.
Too much detail: A complex logo with thin lines and small text becomes an unrecognizable blob at 16×16 pixels. Simplify aggressively — your favicon should be identifiable at a glance, not a miniature reproduction of your full logo.
Wrong aspect ratio: Favicons must be square (1:1). Non-square images get stretched or cropped unpredictably across browsers. Always start with a square canvas.
Forgetting dark mode: On dark browser themes, a favicon with a dark background becomes invisible. Test your favicon on both light and dark backgrounds. Consider using SVG favicons with CSS media queries to adapt colors automatically.
Not testing at actual size: Designing at 512×512 and assuming it looks good at 16×16 is a common trap. Always preview your favicon at the actual display sizes — especially 16×16 and 32×32 where most users will see it.
Favicon SEO and Performance Impact
Google displays favicons in mobile search results, making them a subtle but real SEO factor. Google's requirements: favicon must be a multiple of 48×48, accessible to Googlebot (not blocked by robots.txt), and visually representative of your site. Inappropriate or misleading favicons can result in Google showing a generic globe instead.
Performance considerations: Favicon files are typically 1-5KB each — negligible for page load. However, declaring too many sizes in HTML can cause unnecessary HTTP requests. Stick to the essential sizes and let the browser choose. Use the sizes attribute in link tags so browsers can select without downloading all files.
Caching: Browsers cache favicons aggressively (Chrome caches for up to 30 days). This is good for performance but means updates take time to propagate. For immediate updates during development, clear browser cache or use incognito mode for testing.
A properly implemented favicon package requires multiple sizes (16, 32, 180, 192, 512 at minimum), multiple formats (ICO for legacy, PNG for modern, optionally SVG), and correct HTML markup including manifest.json for PWA support. Use Helperzy's Favicon Generator to create all required files from a single source image, text, or emoji — download the complete ZIP pack and drop it into your project's public directory.
Advertisement
Advertisement
Frequently Asked Questions
What is the minimum favicon size I need for a website?
At minimum, you need a 32×32 PNG and a favicon.ico file. However, for proper coverage across all devices and platforms in 2026, you should include 16×16 (browser tab), 32×32 (taskbar), 180×180 (Apple Touch), 192×192 (Android), and 512×512 (PWA splash). Helperzy's Web Essential pack generates all six critical sizes in one click.
Should I use ICO or PNG for my favicon?
Use both for maximum compatibility. ICO is the legacy format that works everywhere including older browsers — it can contain multiple resolutions in one file. PNG is the modern standard with better compression and transparency support. Link the ICO as fallback and PNG as primary in your HTML head section.
How do I make my favicon look sharp on retina displays?
Generate your favicon at 2× the display size. For a 16×16 browser tab on retina, provide a 32×32 PNG. For Apple Touch icons displayed at 60×60, provide 120×120. Most modern browsers automatically select the best available size from your declared icons.
Do I need a manifest.json for favicons?
If you want your site to work as a Progressive Web App (installable, home screen icon, splash screen), yes — manifest.json is required. It declares your icon sizes, theme color, and display mode. Even without PWA features, manifest.json helps Android Chrome select the correct icon for bookmarks and shortcuts.
How often should I update my favicon?
Only when your brand identity changes. Favicons are heavily cached by browsers (sometimes for weeks). If you need to force an update, change the filename (e.g., favicon-v2.ico) and update your HTML references. Adding a query parameter (?v=2) to the href also works in most browsers.
Can I use an SVG as a favicon?
Yes, modern browsers (Chrome 80+, Firefox 41+, Safari 15.4+) support SVG favicons via <link rel='icon' type='image/svg+xml' href='/favicon.svg'>. SVG favicons scale perfectly to any size and support CSS media queries for dark mode adaptation. However, always include PNG/ICO fallbacks for older browsers.
