How to Add an Image to Your Website’s Browser Tab
Add a favicon to your browser tab with HTML, PNG, SVG, Apple touch icons, PWA manifests, testing steps, and fixes for common problems.
The image shown in a website’s browser tab is called a favicon. Add it with a <link rel="icon"> element inside your document’s <head>:
<link rel="icon" href="/favicon.ico">The href must point to an image that your deployed website can serve. A root-relative URL such as /favicon.ico works when the file is at the site’s public root.
See the MDN <link> reference and its rel="icon" guidance for the browser selection rules.
1. Add the favicon to your HTML
Place the link before the closing </head> tag:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example site</title>
<link rel="icon" href="/favicon.ico">
</head>
<body>
<h1>Example site</h1>
</body>
</html>For a static site, copy the image into the folder that is published as the web root. For a framework, put it in the framework’s public or static directory so that /favicon.ico resolves after deployment.
2. Use PNG or SVG files for sharper icons
You can declare several formats and sizes. The browser uses the available media, type, and sizes values to choose an appropriate icon when multiple rel="icon" links exist.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">ICO
favicon.ico remains a convenient fallback because it is widely supported and can contain multiple resolutions. Serve it as an image rather than an HTML error page.
PNG
PNG is useful when you want predictable raster output. Common declarations include 16×16 and 32×32 pixels. Make sure the actual file dimensions match the declared sizes.
SVG
SVG scales cleanly at different display sizes. If you provide both SVG and raster files, keep a raster fallback for browsers or contexts that do not use SVG favicons.
3. Add a home-screen icon for iPhone and iPad
iOS Web Clips use the separate apple-touch-icon relation instead of ordinary favicon selection:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">Apple also documents a site-wide apple-touch-icon.png file in the root document folder. This icon affects a home-screen shortcut, not the normal browser-tab favicon.
4. Add icons to an installable PWA
Progressive web apps declare install metadata in a web app manifest:
<link rel="manifest" href="/app.webmanifest">{
"name": "Example site",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}The manifest’s icons are for installation contexts. Keep the HTML rel="icon" link as well for ordinary tabs and bookmarks.
5. Choose the right path for your site
| Site setup | Where the file goes | Typical link |
|---|---|---|
| Plain HTML | Published web root | /favicon.ico |
| React, Vue, or similar static build | Public/static directory | /favicon.png |
| Server-rendered app | Public assets directory | Root-relative URL |
| Subdirectory deployment | URL that includes the deployment prefix | /my-site/favicon.png or framework asset helper |
Open the final image URL directly in a browser. A successful response should display the image and have an image content type such as image/png, image/svg+xml, or image/x-icon.
6. Verify the icon after deployment
- View the deployed page source and confirm the icon link is inside
<head>. - Open every referenced icon URL directly.
- Check the browser’s network panel for a successful icon request.
- Test a new private window or a different browser profile.
- Check a bookmark and, if applicable, an installed PWA or iOS home-screen shortcut.
To inspect how the complete page renders, you can capture it with ScreenshotNeo. Its screenshot response can help you confirm that the deployed tab and page state are correct across URLs.
7. Troubleshooting favicon problems
The icon does not appear
Cause: The link is outside <head>, the URL is wrong, or the server returns a 404.
Fix: Use a root-relative or correct absolute path, open that URL directly, and inspect the request in developer tools.
The image works locally but not in production
Cause: The file was not copied into the deployed public directory, or the production site uses a subdirectory base path.
Fix: Confirm the asset exists in the deployment output and update href to include the deployment prefix when needed.
The browser shows an old icon
Cause: Favicons are commonly cached independently of the page.
Fix: Test in a private window or fresh profile, clear the site’s cached data, and wait for your CDN or service worker cache to expire. During development, you can temporarily version the URL, for example /favicon.png?v=2.
A broken-image symbol appears
Cause: The response is not a valid image, the MIME type is wrong, or the file is inaccessible because of permissions or routing.
Fix: Request the URL with the browser network panel or curl -I, verify the status is 200, and serve the correct content type.
The SVG favicon is ignored
Cause: The browser or embedding context does not support SVG favicons, or the SVG response is malformed.
Fix: Keep a PNG or ICO fallback and validate the SVG file and response headers.
The iPhone icon is missing
Cause: An ordinary rel="icon" link does not replace the Apple Web Clip relation.
Fix: Add rel="apple-touch-icon" and use a PNG at the intended size.
8. Performance, reliability, and security notes
- Keep icons small; a favicon is fetched frequently and does not need photographic detail.
- Serve the file over HTTPS from the same site or a trusted asset host.
- Use immutable, long-lived caching for versioned icon filenames. Change the filename when replacing an icon so clients can discover the new asset.
- Do not rely on JavaScript to add the favicon; a static link in the initial HTML is more reliable.
- Use a simple, high-contrast design that remains recognizable at 16×16 pixels.
Or skip the browser setup
If your goal is to capture the finished page rather than configure a favicon, ScreenshotNeo returns a screenshot or PDF from one request. The API accepts the same kinds of URL parameters used by other screenshot services, and the ScreenshotNeo docs list all options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf. You get 1,000 screenshots per month free without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
What is the difference between a favicon and a tab image?
They are the same thing in normal web development. “Favicon” is the established name for the small icon shown in browser tabs, bookmarks, and other browser UI.
Do I need every icon size?
No. A single ICO, PNG, or SVG can cover basic tab use. Add multiple sizes when you also support bookmarks, mobile shortcuts, or installed apps.
Can I use an emoji as a favicon?
Use an actual image file for predictable cross-browser behavior. Rendering an emoji through a data URL or generated SVG can vary by platform.
Why does the title show but the icon does not?
The title comes from the HTML <title>; the icon is a separate resource. Check the icon URL, response status, file format, and browser cache independently.
