Creating Favicons

Still just using a favicon.ico file? Your doing it wrong. Easily create favicons for all devices, browsers and operating systems.

To generate favicons for your site, create and 400px x 400px SVG image in src/favicon/ with a filename of favicon.svg. Then run the npm script with yarn favicon. The files will be generated in public/assets/favicon.

Then all you need to do is add them to your page with something like:

<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/manifest.json">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#222222">
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#222222">
<meta name="msapplication-TileImage" content="/assets/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#222222">

To change the destination path for the generated icons, open up package.json and locate the variable named favout and amend its value as desired:

"config": {
    "favout": "public/assets/favicon"
},

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.