<zhead>

HTML Tag Collections

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

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
</html>
useHead({
  link: [
    {
      rel: 'icon',
      href: '/favicon.ico',
      sizes: '16x16'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      href: '/path/to/icon.png'
    },
    {
      rel: 'apple-touch-icon-precomposed',
      href: '/path/to/icon.png'
    },
    {
      rel: 'apple-touch-startup-image',
      href: '/startup.png'
    },
    {
      rel: 'mask-icon',
      href: '/path/to/icon.svg',
      color: '#000000'
    }
  ],
  meta: [
    {
      name: 'theme-color',
      content: '#0000FF'
    },
    {
      name: 'color-scheme',
      content: 'light dark'
    },
    {
      name: 'msapplication-TileColor',
      content: '#0078D7'
    },
    {
      name: 'msapplication-TileImage',
      content: '/path/to/square-image-144x144.png'
    }
  ]
})

Recommendations

  • 01
    You may only need a favicon.ico
    The 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.
  • 02
    Use SVG for high-quality icons
    When providing an image, prefer SVG icons. They are scalable and look great on all devices.
  • 03
    Use PNG for compatibility
    If you need to support older browsers, provide a PNG icon. It is supported by all browsers.
  • 04
    Choose accessible colors
    Ensure your icons have good contrast and are visible to all users. Use tools like the WebAIM contrast checker to verify your colors.

Explanation

icon

rel

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/favicon.ico" sizes="16x16">
</html>
Links to a favicon.ico icon explicitly stating its size, ensuring legacy browser compatibility.

apple-touch-icon

rel

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" sizes="180x180" href="/path/to/icon.png">
</html>
Correct use including sizes attribute for high-resolution displays.

apple-touch-icon-precomposed

rel

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon-precomposed" href="/path/to/icon.png">
</html>
Uses the outdated "precomposed" keyword which is now ignored by devices.

apple-touch-startup-image

rel

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-startup-image" href="/startup.png">
</html>
Uses a correctly sized image for the specific device it targets, ensuring a seamless experience.

mask-icon

rel

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="mask-icon" href="/path/to/icon.svg" color="#000000">
</html>
Correctly specifies the mask icon with a defined color attribute for the SVG.

theme-color

name

Specifies the color that the browser UI should display. Primarily used on mobile browsers to customize the status bar and navigation bar colors.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#0000FF">
</html>
Sets the theme color of the browser UI to blue, which could be ideal for a website with a blue branding theme.

color-scheme

name

Instructs the browser on what color themes (light or dark mode) are supported and preferred for the content, ensuring visual consistency and accessibility.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
</html>
Indicates to the browser that the site smoothly supports both light and dark themes, offering flexibility to match the user’s preferred theme setting.

msapplication-TileColor

name

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="msapplication-TileColor" content="#0078D7">
</html>
Specifies a vibrant, brand-consistent blue, ensuring good visibility and recognition on the Start screen.

msapplication-TileImage

name

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
</html>
An example path to a square PNG image of the recommended size, ensuring good display on the Windows Start menu.

HTML Tag Collections

Ready to use <head> code samples to get started, and finished quickly.

Essentials

SEO Starter

Social Share

PWA

Article