Early Access
Icons & Colors
Specify icons and colors to give your website a stronger identity. Allow users to save your pages offline and see nicer icons.
Get Started
<link rel="icon" href="/favicon.ico" sizes="16x16">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icon.png">
<link rel="apple-touch-icon-precomposed" href="/path/to/icon.png">
<link rel="apple-touch-startup-image" href="/startup.png">
<link rel="mask-icon" href="/path/to/icon.svg" color="#000000">
<meta name="theme-color" content="#0000FF">
<meta name="color-scheme" content="light dark">
<meta name="msapplication-TileColor" content="#0078D7">
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
Recommendations
- You may only need a favicon.icoThe ico format supports icons in various sizes and is by all browsers. You can omit the icon tag if you only have a favicon.ico file.
- Use SVG for high-quality iconsWhen providing an image, prefer SVG icons. They are scalable and look great on all devices.
- Use PNG for compatibilityIf you need to support older browsers, provide a PNG icon. It is supported by all browsers.
- Choose accessible colorsEnsure your icons have good contrast and are visible to all users. Use tools like the WebAIM contrast checker to verify your colors.
Explanation
icon
Links a web page to an icon graphic that browsers can use to represent the page, especially useful for favicon in browser tabs, bookmarks, history, etc. It supports various image formats and sizes.
<link rel="icon" href="/favicon.ico" sizes="16x16">
Used to define a custom icon for web applications when added to the home screen on Apple devices. This icon represents the application and improves its appearance on the device screen.
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icon.png">
Used for specifying an icon for Web pages or sites for use on Apple mobile devices. The "precomposed" keyword indicates that the icon should be used as is, without adding any effects like rounded corners or gloss by the device.
<link rel="apple-touch-icon-precomposed" href="/path/to/icon.png">
Defines an image file that the Web app uses when it is started from the bookmark on an Apple device, optimizing the startup experience for users.
<link rel="apple-touch-startup-image" href="/startup.png">
mask-icon
The mask-icon link element is used to define an image that serves as a mask icon for use in Safari on macOS and iOS. This icon is displayed on pinned tabs and can be designed to harmonize with the UI in Safari, allowing for a more branded browsing experience.
<link rel="mask-icon" href="/path/to/icon.svg" color="#000000">
theme-color
Specifies the color that the browser UI should display. Primarily used on mobile browsers to customize the status bar and navigation bar colors.
<meta name="theme-color" content="#0000FF">
color-scheme
Instructs the browser on what color themes (light or dark mode) are supported and preferred for the content, ensuring visual consistency and accessibility.
<meta name="color-scheme" content="light dark">
Defines the background color for the Windows 8 and Windows 10 Start screen tile when the website is pinned. This color appears as the tile background, enhancing brand consistency and user recognition on Windows platforms.
<meta name="msapplication-TileColor" content="#0078D7">
Specifies the image to be used when the website is pinned to the Windows Start menu as a Live Tile. This tag is part of Microsoft's compatibility meta tags for enhancing user experience on Windows devices.
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
HTML Tag Collections
Ready to use <head> code samples to get started, and finished quickly.
Community