Favicons
A comprehensive guide to our favicon assets for web, iOS, and Android platforms. Favicons are the small icons that represent your brand in browser tabs, bookmarks, and on mobile home screens. In our design system, we provide a complete set of favicon assets to ensure your brand looks consistent across various devices and platforms.
Available Favicon Assets
We currently offer the following favicon files:
- apple-touch-icon.png
- favicon-192.png
- favicon-256.png
- favicon-512.png
- favicon-maskable.png
- favicon.svg
- favicon.ico
Usage Example (web)
To integrate these favicons into your project, include the following link tags in the <head> section of your HTML:
<link
rel="apple-touch-icon"
sizes="180x180"
href="/path/to/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/path/to/favicon-192.png"
/>
<link
rel="icon"
type="image/png"
sizes="256x256"
href="/path/to/favicon-256.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/path/to/favicon-512.png"
/>
<link rel="icon" type="image/svg+xml" href="/path/to/favicon.svg" />
<link rel="shortcut icon" href="/path/to/favicon.ico" />