docs: add favicons for multiple browsers (#348)

Co-authored-by: Martí Malek <marti.malek@free-now.com>

.storybook/FreenowTheme.ts

@@ -1,17 +1,16 @@
 // .storybook/FreenowTheme.ts
 import { create } from '@storybook/theming/create';
-import logo from '../public/assets/freenow-logo.svg';
 
 export default create({
  base: 'light',
 
  // Typography
- fontBase: '"Open Sans", sans-serif', 
+ fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',
 
  brandTitle: 'FREENOW',
  brandUrl: 'https://wave.free-now.com/',
- brandImage: logo,
+ brandImage: 'https://wave.free-now.com/freenow-logo.svg',
  brandTarget: '_self',
 
  //

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="manifest" href="/site.webmanifest" />
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+<meta name="msapplication-TileColor" content="#da532c" />
+<meta name="theme-color" content="#ffffff" />

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+ <msapplication>
+ <tile>
+ <square150x150logo src="/mstile-150x150.png"/>
+ <TileColor>#da532c</TileColor>
+ </tile>
+ </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+ "name": "Wave Design System",
+ "short_name": "Wave",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}