Favicon

Favicon Figma Code Connected

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.