import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import Button from '../../components/Button';
import Blockquote from '../../components/Blockquote';
import Link from '../../components/Link';
import FaviconGenerator from './FaviconGenerator';

<Meta
  title="Documentation/Core/Favicons"
  subTitle="The new Logos in various sizes"
  parameters={{
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<hr/>

For the main favicon itself, it's best for cross-browser compatibility not to
use any HTML. Just name the file favicon.ico and place it in the root of your
domain.

### Internal Applications: Generate Favicon

Use the generator to create favicons with an acronym of applications name.

<FaviconGenerator />

### External Applications: Usage with CDN

<p>
  The favicons can be found in the{' '}
  <Link href="https://github.com/wfp/ui-assets/tree/master/src/favicons">
    @wfp/ui-assets
  </Link>{' '}
  repository and the Sketch source in the{' '}
  <Link href="https://github.com/wfp/ui-design-kit/blob/master/WFP%20Icons.sketch">
    @wfp/ui-design-kit
  </Link>{' '}
  repository.
</p>

### Full sizes catalog which can be added to the HTML Head

```html
<link
  rel="apple-touch-icon"
  sizes="57x57"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-57-precomposed.png"
  <link
  rel="apple-touch-icon"
  sizes="72x72"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-72-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="76x76"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-56-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-114-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="120x120"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-120-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-144-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-152-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/apple-touch-icon-180-precomposed.png"
/>

<link
  rel="icon"
  type="image/png"
  sizes="260x260"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-260x260.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="96x96"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-96x96.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="https://cdn.wfp.org/guides/ui/assets/v0.0.1/favicons/favicon-16x16.png"
/>

<meta name="msapplication-TileColor" content="#007DBC" />
<meta
  name="msapplication-TileImage"
  content="https://cdn.wfp.org/guides/ui/assets/v0.0.1/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#007DBC" />
```
