Where in the HTML should the favicon link tag go?

Inside the document head, before the closing head tag. Browsers expect to discover it before the body parses, and some older parsers ignore link tags placed elsewhere.

Why doesn't my favicon show up in the local preview?

The sandboxed preview iframe blocks remote resource fetches by default for safety. A favicon URL pointing to a real file path will not load until the page is served from a live origin that the browser is allowed to contact.

Can I use a data URL for a favicon?

Yes. A base64 or URL-encoded image placed directly in the href attribute works as long as the encoding is valid and the surrounding environment allows data URLs. The Online HTML Editor sandbox explicitly permits data and Blob image sources.

Do I still need a favicon.ico file at the site root?

Modern browsers prefer an explicit link tag, but many still fall back to a file named favicon.ico at the root when no tag is present. Shipping both gives the widest compatibility without any extra markup work.

What size should my favicon image be?

32x32 pixels is the standard tab size and covers most desktop browsers. Add a 192x192 or 180x180 variant for high-DPI tabs and iOS home-screen shortcuts, or use an SVG that scales to any size.

How to Change a Web Icon in HTML

To change a web icon in HTML, add a link rel="icon" tag inside the page head that points to the image file you want browsers to display in the tab, bookmarks bar, and history list. The tag uses three attributes that do the actual work: rel="icon" identifies the relationship as a favicon, type declares the image's MIME type so the browser can pick the right decoder, and href holds the file path or inline data URL. Browsers fetch that resource automatically the moment a user opens the page, render it next to the title, and cache it across visits. No JavaScript is required, no server configuration is needed beyond placing the file where the href points, and the change is permanent until you replace the file or remove the tag. Once the markup is written, a sandboxed local editor lets you confirm the structure instantly, though a sandbox that blocks remote fetches will not show the actual image, so for a visual check, deploy to a real page or use an environment that allows external resources.

how to change web icon html

What a Web Icon Means in HTML

In web development, "web icon" almost always refers to the favicon, the small graphic that browsers show beside the page title in tabs, next to bookmarks, on mobile home-screen shortcuts, and in browser history lists. The favicon convention dates back to Internet Explorer 5 in 1999, when a file named favicon.ico placed at the root of a site would be picked up automatically with no markup required at all. Modern HTML replaces that implicit discovery with explicit declaration, which is more flexible because it lets a single page reference icons of different sizes, formats, and purposes.

Beyond the classic favicon, the same link pattern supports related icon types. apple-touch-icon declares the image iOS uses when a user adds a page to the home screen. mask-icon handles Safari pinned-tab glyphs on macOS. And the link rel="manifest" entry drives the installable app icons described in a Web App Manifest. The web icon changed with the simplest tag is the browser tab favicon, and that is what this article covers.

The link rel="icon" Tag and Its Attributes

The favicon is set with a single self-closing link element placed inside head, before the closing head tag. The required attribute is rel="icon", which tells the browser what kind of relationship the linked resource has to the document. The optional attributes refine the link:

href: the URL or relative path to the icon file. This is the address the browser fetches.
type: the MIME type of the icon, such as image/png or image/svg+xml. Helps the browser skip a probe request when it already knows the format.
sizes: an optional hint describing the icon dimensions, like sizes="32x32". Browsers use this to pick the best image for a given context.
crossorigin: optional, used when the icon is hosted on a different origin with CORS requirements.

A typical minimal example looks like this, written as plain markup so the tag can be copied directly into a document head:

You can declare multiple icons at different sizes and let the browser choose. For example:

The browser walks the list, picks the best match for its display context (a 16x16 tab icon versus a 180x180 apple-touch-icon), and falls back to a default if nothing matches.

Picking a File Format for Your Icon

Different formats have different strengths. ICO files are the legacy container that bundles multiple sizes into one file and remain the safest fallback for older browsers. PNG is the workhorse of the modern web, supports transparency cleanly, and renders well at every size from 16x16 up. SVG is the only format that scales without artifacts, lets you theme the icon with CSS currentColor, and keeps file size small. GIF and JPEG work but waste bytes on palette features that icons rarely need.

Format	Type	Best for	Transparency	Browser support
ICO	Container of BMP or PNG frames	Legacy fallback, multiple sizes in one file	Yes	All browsers including legacy IE
PNG	Raster	General use, retina tabs, home-screen shortcuts	Yes (alpha)	All modern browsers
SVG	Vector	Scalable, themable icons that adapt to dark mode	Yes	All modern browsers except IE
GIF	Raster	Animated favicons (rare)	Yes (binary)	All browsers
JPEG	Raster	Photo-style icons (uncommon)	No	All browsers

For most pages, one PNG at 32x32 covers the desktop tab and one SVG handles higher resolutions. If you only ship one file, a 32x32 PNG named favicon.png at the site root is the simplest reliable choice, and a modern browser will still find it even without an explicit link tag.

Add the Icon Tag in the Online HTML Editor

To verify the markup before deploying, paste a complete HTML document into the Online HTML Editor and confirm the link tag sits inside head. The steps are:

Open the Online HTML Editor in your browser.
Paste or write a complete HTML document into the left editor, including doctype, html, head, and body tags.
Place the link rel="icon" tag inside head with the href pointing to the icon file path or data URL you plan to use.
Leave the right CSS editor empty unless you want to style the body for visual context.
Click Update preview to render the document inside the sandboxed iframe.
Inspect the rendered page to confirm the link tag is present, correctly nested, and uses the attributes you intended.

The editor runs locally in the browser tab, so nothing is uploaded and you can iterate as many times as needed. The HTML input is limited to 50,000 characters and the CSS input to 30,000 characters, both of which are far above what a single favicon declaration requires.

What the Local Preview Will and Will Not Show

The preview iframe is built with srcdoc and an empty sandbox token list, then wrapped in a Content Security Policy that denies resources by default. That design is what keeps the editor safe for testing arbitrary snippets, but it also means remote favicon URLs will not load. The browser is told not to fetch any external image, font, stylesheet, or script. If the href points to /favicon.png or https://example.com/icon.svg, the preview renders the rest of the page correctly but the tab icon does not appear.

Two workarounds let you actually see the icon inside the preview. Use a data URL: encode the icon as base64 or URL-encode it and place the inline string in href. Data and Blob URLs are explicitly allowed by the editor's CSP, so this is the only remote-style trick that survives the sandbox. Or use an inline SVG favicon: write the icon directly as an SVG data URL inside the href attribute, which keeps everything self-contained. For anything beyond a quick structural check, deploy the page to a real URL and open it in a normal browser tab. There you can confirm the icon shows up, the retina variant renders crisply on high-DPI screens, and the icon adapts correctly to dark mode if you used an SVG with currentColor.

Going From Local Preview to a Live Page

Once the markup looks right in the editor, three deployment habits keep the change reliable. First, place the icon file at a stable path and never rename it without updating the href, because some browsers cache favicons aggressively and renaming the file forces a hard refresh for every returning visitor. Second, declare a small set of sizes explicitly instead of relying on browser fallback, especially for apple-touch-icon entries that iOS still needs at exact pixel dimensions like 180x180. Third, validate the deployed page against your production Content Security Policy, since a CSP that blocks images will silently prevent the favicon from loading even when the markup is correct.

The Online HTML Editor is not a replacement for a full IDE or a live staging server, but it does provide a fast, offline way to confirm that the link tag is well-formed, properly placed, and pointing where you expect before the page ships. Treat the preview as a structural validator rather than a visual test, and reserve the final visual confirmation for a live URL.