Favicon

Favicon

Use Honeycomb’s SVG assets for your app favicon and touchicon, with light and dark mode support.

Getting the icons

Find the favicon.svg and favicon.dark.svg files in ./dist/svg/favicon of this repository. You’ll need to copy or add these files into your build process.

Brand variations are also available as favicon.attend.svg, favicon.boost.svg, favicon.connect.svg, and favicon.forms.svg. Each also has a *.dark.svg complement as well.

There is also an optional touchicon.png in that directory if you choose to add an Apple touch icon. This is a 180x180px not-precomposed PNG for Apple devices if the user creates a shortcut.

Best practices

We have the following boilerplate HTML for adding these icons to your application <head>. This will account for a default icon as well as a dark mode version if the user prefers that.


<link rel="icon" href="/favicon.svg">
<link rel="icon" href="/favicon.dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="/touchicon.png">

This assumes these icons are in your document root but if you move them, adjust the href path to wherever you’ve placed these files.