How to Add a Favicon to Your Website (And Create One in Seconds)
That tiny icon in the browser tab does more for your brand than you think. Here's what a favicon is, why it matters, and exactly how to add one — no design skills needed.
Timothee
You've spent hours on your website. The layout is clean, the copy is sharp, the colors are on brand. Then someone opens your site in a browser full of tabs — and yours shows a blank grey square where every other site has a recognizable icon.
That's a missing favicon. It's a small thing that signals to visitors — and to Google — whether your site is finished or not. The good news: adding one takes under five minutes.
What Is a Favicon?
A favicon (short for "favorite icon") is the small image that appears next to your page title in browser tabs, bookmarks, browser history, and increasingly in Google search results next to your domain name.
It's typically 16×16 or 32×32 pixels — tiny, but surprisingly visible. Users don't consciously notice a good favicon, but they absolutely notice a missing one.
Since 2019, Google displays favicons next to every result in mobile search. A well-designed favicon directly improves how your brand appears in search results — before anyone even clicks your link.
What Sizes and Formats Do You Need?
This used to be complicated — generators would produce 20+ files for every possible device. In 2026, you realistically need three things to cover all modern browsers and devices:
| File | Size | Used for |
|---|---|---|
favicon.ico | 32×32px | Legacy browsers, PDF tabs |
favicon.png | 32×32px | Modern browsers, Google search |
apple-touch-icon.png | 180×180px | iOS home screen shortcuts |
If you're building a PWA, add a manifest.webmanifest file with 192×192 and 512×512 PNG icons too. But for a standard website, the three above cover 99% of use cases.
Use a square image with a transparent background, at least 512×512px as your source. Let the generator handle the resizing. Simple, high-contrast designs work best — fine details disappear at 16px.
Step 1: Create Your Favicon
You don't need Figma or Photoshop. If you have a logo, upload it directly. If you don't have one yet, use a simple letter, symbol, or emoji as a starting point.
Create Your Favicon in Seconds
Upload any PNG, JPG, or SVG — our free Favicon Generator resizes it to 16×16, 32×32, and 48×48 instantly. No account needed.
Try the free Favicon Generator →Once you've downloaded your files, you'll have a folder with PNG files at each size. Now it's time to add them to your site.
Step 2: Add the Favicon to Your Site
Place your favicon files in the root directory of your project (same level as your index.html), then add the following lines inside your <head> tag:
<!-- Standard favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple devices -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Legacy fallback -->
<link rel="shortcut icon" href="/favicon.ico">That's it for plain HTML sites. For frameworks, see the section below.
Adding a Favicon in Popular Frameworks
/public/. Add <link> tags inside your base layout's <head>. Astro serves the public folder statically.favicon.ico directly in the /app folder. Next.js picks it up automatically. For more control, use the metadata export./public/ and add <link> tags via nuxt.config.ts under the head option, or in your root layout component.favicon.ico in /src/. It's already referenced by default in angular.json. Swap the file to update your favicon.Browsers cache favicons aggressively. If you don't see your new icon, open an incognito window or hard-refresh with Ctrl+Shift+R. It can also take a few days for Google Search to pick up a new favicon after you deploy.
Step 3: Verify It's Working
After deploying, check your favicon is live and displaying correctly:
- Open your site in a fresh browser tab and look at the tab icon
- Add your site to your phone's home screen and check the shortcut icon
- Use RealFaviconGenerator's checker to verify across browsers and platforms
- Use Google Search Console's URL Inspection tool to request re-indexing if you want the favicon to appear in search results sooner
Tips for a Great Favicon
- Keep it simple. A single letter, a minimal logo mark, or a bold symbol works far better than a detailed illustration at 16px.
- Use high contrast. It needs to be visible on both light and dark browser chrome.
- Use a transparent background. Solid backgrounds can look clunky depending on the browser theme.
- Start from a large source file. At least 512×512px gives the generator enough quality to downscale cleanly.
- Match your brand. Your favicon should use the same primary color as your logo — it's a micro-branding moment.
Ready to Create Yours?
Upload your logo or image and download perfectly sized favicon files in seconds — free, no account required.
Create your favicon →The Bottom Line
A favicon takes five minutes to add and lasts the lifetime of your website. It's one of those tiny details that separates a finished, professional site from one that's still a work in progress — and it now appears directly in Google search results next to your domain.
If you haven't added one yet, now is the time. Use the Favicon Generator to create yours, follow the code snippets above, and you're done.