Generate favicon HTML tags for browsers and Apple touch icons

It creates one browser favicon reference for every supplied asset and adds an Apple touch icon reference automatically. The result is deterministic, safely escapes attribute values, and is ready to paste into a template, static site, content management system, or application layout without manually repeating paths and dimensions.

Prepare a precise icon manifest

Start with the icon files that your site already publishes. Add one row for each asset, entering its pixel dimensions in WIDTHxHEIGHT form and its public path or URL. Common browser sets include compact square files for tabs and bookmarks, while a larger square image is useful when a device saves the site to a home screen. Paths may be site-relative, such as /assets/icons/favicon-32.png, or absolute URLs served by an asset host. Each size must appear only once because two competing files declared for identical dimensions make selection ambiguous. The generator validates every row before producing markup, so empty paths, malformed dimensions, duplicate sizes, and unsupported extremes become clear input errors instead of broken tags. It does not inspect the filesystem or download an image, which means the dimensions are treated as your explicit declaration. Confirm that every declared path will be publicly reachable after deployment and that the actual image dimensions match the size you enter.

Understand how the tags are selected and ordered

For each supplied icon, the result includes a link element with rel set to icon, a normalized lowercase sizes value, and an escaped href. Browser tags are ordered from the smallest pixel area to the largest, with deterministic tie breakers, so the same logical set always produces the same output even when rows arrive in a different order. The Apple touch icon is chosen separately. An exact 180x180 square asset is preferred because it is a widely used touch-icon size. If that size is absent, the largest square icon is selected; if no square asset exists, the largest supplied asset is used as a transparent fallback rule. The selected file still remains in the regular browser list, and an additional link element identifies it with rel set to apple-touch-icon. Attribute escaping protects ampersands, quotation marks, and angle brackets in paths without changing the underlying destination interpreted by HTML. No MIME type is guessed from an extension, avoiding a false declaration when URLs use transforms or extensionless routes.

Place and verify the generated markup

Copy the returned html value into the head of the shared document template that serves every public page. Framework users should place it in the root layout or metadata template rather than repeating it inside individual routes. The tags array contains the same lines as separate strings when a build script needs structured values, while icon_count and apple_touch_size make automated checks straightforward. After deployment, open the generated page source and verify that the href values resolve from the final public origin. A site-relative path beginning with a slash resolves from the domain root; a relative path without a slash resolves against the current document location and may therefore behave differently on nested routes. Clear browser caches or use a private window when checking replacements because favicon caching is unusually persistent. Also test adding the site to a mobile home screen if that experience matters. This tool writes references only: it does not create images, modify a web manifest, upload assets, or confirm that a server returns the expected content type.