Manifest Icons vs HTML Link Tags: Which Should You Rely On?

HTML links identify the document

A rel=icon element associates an icon candidate with the current document. Its href, type, and sizes hints help browsers choose resources for tabs, bookmarks, and related browser surfaces.

Apple touch icons use a separate link relationship. They should not be inferred from the manifest when iPhone saved-shortcut behavior is important enough to support explicitly.

Connected next stepFavicon HTML Link Tags: Complete Code Reference for the closest prerequisite or comparison.

The manifest identifies an installable application

The manifest icons array describes application artwork for home screens, launchers, task switchers, splash generation, and OS-specific purposes. Each object can declare src, sizes, type, and purpose such as any or maskable.

Relative manifest icon URLs resolve from the manifest’s own URL. This is a common source of failures when manifest.json is moved into a subdirectory while its icon paths are left unchanged.

Connected next stepPWA and Maskable Icons: Designing for Adaptive Shapes for the next connected implementation decision.

Publish both without pretending they are duplicates

A dependable stack can use SVG, PNG, and ICO browser candidates in HTML; a dedicated 180-pixel Apple touch icon; and ordinary plus maskable 192- and 512-pixel PNGs in the manifest.

Validate each discovery layer separately. A correct tab icon does not prove the install icon works, and a successful PWA installation does not prove search or Safari home-screen selection.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

Follow each URL’s own resolution rules

Document icon href values resolve in the context of the HTML document and its base URL. Manifest icon src values resolve from the manifest URL. That distinction becomes visible when a site places /assets/site.webmanifest beside an icons directory or deploys under a path prefix. A manifest entry of icons/app.png may become /assets/icons/app.png even when an HTML href with the same text resolves elsewhere. Test the resolved network URLs rather than comparing source strings.

Security and credentials can differ too. A manifest fetched across origins or with credentials needs appropriate link attributes and server headers. Icon fetching is constrained by applicable content security policy. Public identity assets should normally avoid authentication, expiring signatures, and user-specific redirects because browsers and operating-system integrations may request them outside the application session that rendered the original page.

Design separate acceptance criteria

For HTML candidates, validate link syntax, declared type and sizes, public image responses, native tab rendering, and fallback behavior. For the manifest, validate JSON, manifest Content-Type, resolved icon URLs, exact dimensions, purpose values, and install presentation. For Apple, validate the dedicated link and a newly saved home-screen item. Passing one checklist must not mark the other layers complete.

This separation also guides updates. A small browser mark can change without forcing a large installed-app redesign, but inconsistent identity should be intentional and documented. Installed icons may persist until an application is reinstalled or refreshed; browser icons have their own caches; Apple shortcuts can retain captured artwork. Release the related files together when possible, preserve stable URLs where external systems expect them, and record which surfaces require user action before a new image appears.

Minimal dependable example

A practical site can keep the boundary clear with a small inventory: declare a scalable SVG and raster or ICO fallback using rel=icon; declare a 180-pixel PNG using rel=apple-touch-icon; link one web manifest; and let that manifest name ordinary and maskable 192- and 512-pixel application images. Every sizes value must match decoded pixels, and every type must describe the served bytes. Keep the manifest at a stable URL and test its relative paths from that location. Avoid repeating browser-sized candidates in the manifest merely to make the array look complete, and do not expect a large maskable file to be a good 16-pixel tab reduction. This layered example is slightly more work than choosing only HTML or only JSON, but it makes ownership explicit and allows each browser, Apple, and installable-app surface to receive artwork designed and tested for its actual presentation. Record the boundary in the release documentation.