The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Use an HTML <img> when an icon communicates information in page content, CSS when it is purely decorative, <link rel="icon"> for a browser-tab favicon, and a web app manifest for icons used after installation. The correct method depends on where the icon appears and whether people need its meaning.
Choose the icon type before writing code
“Website icon” can mean several different things. Decide which result you need first:
| Need | Use | Important consideration |
|---|---|---|
| An icon in visible page content | <img> with a meaningful alt |
Describe the icon’s meaning or action, not its shape. |
| A visual embellishment or section background | CSS background-image, or <img alt=""> |
Do not place information users need only in a CSS background. |
| An icon in browser tabs or bookmarks | <link rel="icon"> in <head> |
Browser selection and supported formats vary. |
| An icon shown when a web app is installed | icons entries in a web app manifest |
Provide suitable sizes and image types, then validate loading. |
| Direct color or path styling for an SVG | Inline SVG | It is highly controllable but is not cached as a separate file. |
Add an icon to page content with HTML
Basic image icon
Place the file in a directory served by your site and reference its URL with src. A root-relative path starts at the website root:
<img src="/images/search.svg" alt="Search" width="24" height="24">The width and height attributes communicate the intended aspect ratio before the image finishes loading. That lets the browser reserve space and helps prevent layout shifts. The path must match the deployed location, including capitalization on case-sensitive hosts. In many frameworks, files in a public or static directory are exposed from the site root.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Write useful alternative text
Alternative text is the accessible name for a meaningful image. Name the function: “Search” is usually better than “magnifying glass.” If the icon is inside a link or button, describe the action or destination:
<a href="/account">
<img src="/icons/account.svg" alt="Open account settings" width="24" height="24">
</a>Do not rely on the HTML title attribute as a replacement for alt. Use visible text or a caption when users need a longer explanation.
When the image repeats visible text
If an icon sits next to a visible label and adds no separate information, make its alternative text empty. The image remains in the page, but screen readers do not announce the same meaning twice:
<button type="button">
<img src="/icons/save.svg" alt="" width="20" height="20">
Save
</button>An omitted alt and an empty alt="" are not equivalent. Meaningful images need a value; intentionally decorative images need the empty value.
Free tools Windows power users keep installed
One-click scans. No signup required.
Responsive image icons
For icons that change size or source by viewport, use srcset and sizes, or a <picture> element:
<img
src="/icons/feature-32.png"
srcset="/icons/feature-32.png 32w, /icons/feature-64.png 64w"
sizes="(max-width: 600px) 32px, 64px"
alt="Featured article"
width="64"
height="64">Keep the intrinsic dimensions proportional across files. Do not use a responsive technique to hide a meaningful icon from assistive technology.
Use CSS for decorative icons and backgrounds
A purely visual pattern, flourish or background belongs in CSS:
.hero {
background-image: url("/images/hero-pattern.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}CSS backgrounds do not expose alternative text. Therefore, use this method only when removing the image would not remove information. If the visual is content, use an HTML image instead.
You can also use a decorative HTML image with an empty alternative:
<img src="/icons/sparkle.svg" alt="" width="16" height="16">Make icon-only controls accessible
An icon does not automatically give a button or link an accessible name. Prefer a visible label:
<button type="button" class="menu-button">
<svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24">
<path d="M3 6h18M3 12h18M3 18h18"></path>
</svg>
<span>Menu</span>
</button>If the design requires an icon-only button, provide a visually hidden text label and hide the decorative SVG from assistive technology:
<button type="button" aria-label="Open navigation">
<svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24">...</svg>
</button>For an SVG that conveys information by itself, expose an accessible name instead of using aria-hidden. When an SVG file is embedded through <img>, web.dev guidance recommends role="img" for a VoiceOver announcement issue; check current browser and assistive-technology behavior before standardizing that pattern.
Choose between external and inline SVG
External SVG with <img>
<img src="/icons/download.svg" alt="Download report" width="24" height="24">The file can be cached separately and keeps page markup small. Styling internal paths from the containing page is more limited than with inline SVG.
Inline SVG
<svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" class="icon">
<path d="M12 3v12m0 0 5-5m-5 5-5-5M5 21h14" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>.icon { color: #2457d6; }Inline SVG allows CSS color, animation and path control and avoids a separate image request. The markup is not cached as a separate file, so repeated icons can increase document size. Hide it from screen readers when a surrounding control already has its name; give it an accessible name when it is meaningful content.
Rank #3
Add a favicon for browser tabs
A favicon is separate from an in-page icon. Put the asset at a served URL and add this element inside the document <head>:
<link rel="icon" href="/favicon.ico" type="image/x-icon">ICO, GIF and PNG files are commonly used. Many browsers automatically look for a root-level /favicon.ico, but an explicit link is useful when the file has another path. If you need a separate home-screen image for Apple devices, add an apple-touch-icon reference and verify the target platforms. Favicon selection can differ by browser and context, so inspect the final page and clear cached favicon data when testing replacements.
Add icons to an installable web app
Installable applications use a web app manifest rather than the favicon declaration alone. Create a manifest with source paths, dimensions and MIME types:
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Link it from the page head:
<link rel="manifest" href="/manifest.json">Current web.dev guidance says Chromium requires at least 192×192 and 512×512 pixel icons for this use case. Those dimensions are app-install guidance, not a universal requirement for every webpage icon. Chromium-based browsers support SVG manifest icons, but a raster fallback is recommended for browsers without SVG support. Open browser developer tools to confirm that the manifest and each image load successfully.
Verify paths, accessibility and rendering
- Open each image URL directly in a browser. A 404 means the path, filename or deployment directory is wrong.
- Inspect the rendered element and confirm the final
src, dimensions and response status. - Check that meaningful icons have concise functional
alttext and decorative images havealt="". - Test keyboard focus and screen-reader output for every icon-only control.
- Inspect the page
<head>for favicon and manifest links. - Use developer-tools application or manifest panels to check icon dimensions, MIME types and failed requests.
- Test at narrow and wide viewports if you use
srcset,sizesor<picture>.
Common mistakes and fixes
The icon is broken
Check whether the URL is root-relative or relative to the current document. Confirm filename case, extension, deployment location and the server’s content type. A framework’s source directory is not necessarily its public URL.
The icon is announced incorrectly
Replace shape descriptions such as “blue circle” with the function, such as “Open notifications.” Add an empty alt when nearby text already supplies the meaning.
An icon-only button has no accessible name
Add visible text or an aria-label. Hiding the SVG does not name the button; it only prevents duplicate or irrelevant announcements.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Layout jumps while the image loads
Add accurate width and height attributes, preserve the source aspect ratio and avoid changing dimensions after load.
The favicon does not update
Verify the link in <head>, open the asset URL directly and test in a private window or after clearing site icon cache. Different browsers may choose different files.
The installed app has a missing icon
Confirm that the manifest URL is reachable, each src is correct, the declared dimensions match the files and the response MIME type is an image. Include raster fallbacks when relying on SVG support.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesOr skip the browser setup
If you need a rendered check of a page containing your new icon, ScreenshotNeo can capture it through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
See the ScreenshotNeo API documentation for parameters. This cURL request saves a WebP screenshot:
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}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account to try it.
FAQ
Should an icon always be an SVG?
No. SVG is useful when you need scalable artwork or direct styling, while PNG, WebP or ICO may be more appropriate for supplied raster assets, favicons or compatibility fallbacks.
Recommended Free Tools
Can I use a favicon as an in-page icon?
You can technically reference the same file, but a favicon is metadata for tabs and bookmarks. Use a purpose-sized content image with appropriate alternative text for page controls.
Does an empty alt make an icon inaccessible?
Only if the icon carries information that is not available elsewhere. Empty alternative text is correct for decoration or a duplicate of an adjacent visible label.
Where should icon files live in a framework project?
Use the framework’s documented static-asset directory, commonly named public or static, then reference the resulting public URL rather than the source filesystem path.
Frequently Asked Questions
Should an icon always be an SVG?
No. SVG is useful for scalable artwork and direct styling; PNG, WebP or ICO may suit raster assets, favicons or compatibility fallbacks.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Can I use a favicon as an in-page icon?
A favicon is metadata for tabs and bookmarks. Use a content image with appropriate alternative text for page controls.
Does an empty alt make an icon inaccessible?
It is correct for decoration or when adjacent visible text already conveys the same meaning; do not use it for unique information.
Where should icon files live in a framework project?
Use the framework’s static-asset directory, often public or static, and reference its resulting public URL.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
