---
title: "Icons & Colors HTML Tags · HTML Tag Collections · zhead"
canonical_url: "https://zhead.dev/collection/icons"
last_updated: "2026-08-13T08:00:02.608Z"
meta:
description: "Icons and interface colours for browser tabs, saved sites, and installed web apps."
"og:description": "Icons and interface colours for browser tabs, saved sites, and installed web apps."
"og:title": "Icons & Colors HTML Tags · HTML Tag Collections · zhead"
---
HTML tag collections
# Icons & Colors
Icons and interface colours for browser tabs, saved sites, and installed web apps.
A favicon covers the browser tab. Add touch icons, a manifest, or vendor fields only for the platforms your site supports.
## Get started
```
```
## Recommendations
- 01 A favicon may be enough Browsers still request /favicon.ico by convention. Use link rel="icon" when you want another path or format.
- 02 Use SVG where the platform accepts it SVG scales cleanly for modern browser favicons. Apple touch icons still need a raster image.
- 03 Keep a raster fallback PNG remains useful for fixed-size icons and platforms that do not accept SVG.
- 04 Test icons against real surfaces Check light and dark browser chrome, pinned tiles, and home screens. A transparent mark can disappear on an unexpected background.
## Explanation
### [icon](https://zhead.dev/link/icon)
rel
Provides an icon that browsers can use for the page in tabs, bookmarks, history, and other interface surfaces.
```
```
Declares a scalable SVG icon with its MIME type.
### [apple-touch-icon](https://zhead.dev/link/apple-touch-icon)
rel
Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app.
```
```
Provides a 180 by 180 pixel icon and declares its actual size.
### [apple-touch-startup-image](https://zhead.dev/link/apple-touch-startup-image)
rel
An Apple extension that supplies a launch image for a web app opened from the Home Screen.
```
```
Limits this launch image to portrait orientation. Production sites usually need more specific size queries.
### [mask-icon](https://zhead.dev/link/mask-icon)
rel
A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type.
```
```
Links Safari to an SVG mask and supplies its display color.
### [theme-color](https://zhead.dev/meta/theme-color)
name
Suggests a color that browsers may use around the page, such as a title bar, tab highlight, or task switcher card.
```
```
A valid CSS hex color that browsers can use around the page.
### [color-scheme](https://zhead.dev/meta/color-scheme)
name
Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls.
```
```
Declares support for both common schemes, with light listed first as the fallback preference.
### [msapplication-TileColor](https://zhead.dev/meta/msapplication-tilecolor)
name
Legacy Internet Explorer metadata for the background color of a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it.
```
```
A valid hexadecimal tile color.
### [msapplication-TileImage](https://zhead.dev/meta/msapplication-tileimage)
name
Legacy Internet Explorer metadata for the image on a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it.
```
```
A root-relative path to the legacy 144 × 144 tile image.
## More collections
Start with the closest collection, then trim it to match your page.
[