Skip to main content

Favicon

Generates all the required brand specific favicons for your application.

info

This component must be added to the <head> of your application.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Favicon } from '@iag/chroma-react-ui.components';

Usage​

Must be added to the <head> of your application

<head>
  <Favicon brand="chroma" />
</head>

Output​

<head>
  <link
    rel="apple-touch-icon"
    sizes="180x180"
    id="favicon-apple-touch"
    href="https://chromadesignsystem.com/5.0.0/assets/brands/chroma/favicons/apple-touch-icon.png"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="32x32"
    id="favicon-32x32"
    href="https://chromadesignsystem.com/5.0.0/assets/brands/chroma/favicons/favicon-32x32.png"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="16x16"
    id="favicon-16x16"
    href="https://chromadesignsystem.com/5.0.0/assets/brands/chroma/favicons/favicon-16x16.png"
  />
  <link
    rel="manifest"
    id="favicon-webmanifest"
    href="https://chromadesignsystem.com/5.0.0/assets/brands/chroma/favicons/site.webmanifest"
  />
</head>