Favicons

Honeycomb offers you a solid starting point when it comes to providing favicons and related things for your app or website.

You can download an archive containing a collection of images alongside with config files like manifest.json and browserconfig.xml.

Contents of the archive need to be placed into the root directory of your website in order to work properly, and the following code snippet should be included inside of your HTML head tag:

<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/>
<link type="image/png" sizes="16x16" rel="icon" href="/favicon-16x16.png"/>
<link type="image/png" sizes="32x32" rel="icon" href="/favicon-32x32.png"/>
<link type="image/png" sizes="96x96" rel="icon" href="/favicon-96x96.png"/>
<link type="image/png" sizes="36x36" rel="icon" href="/android-icon-36x36.png"/>
<link type="image/png" sizes="48x48" rel="icon" href="/android-icon-48x48.png"/>
<link type="image/png" sizes="72x72" rel="icon" href="/android-icon-72x72.png"/>
<link type="image/png" sizes="96x96" rel="icon" href="/android-icon-96x96.png"/>
<link type="image/png" sizes="144x144" rel="icon" href="/android-icon-144x144.png"/>
<link type="image/png" sizes="192x192" rel="icon" href="/android-icon-192x192.png"/>

<link sizes="57x57" rel="apple-touch-icon" href="/apple-icon-57x57.png"/>
<link sizes="60x60" rel="apple-touch-icon" href="/apple-icon-60x60.png"/>
<link sizes="72x72" rel="apple-touch-icon" href="/apple-icon-72x72.png"/>
<link sizes="76x76" rel="apple-touch-icon" href="/apple-icon-76x76.png"/>
<link sizes="114x114" rel="apple-touch-icon" href="/apple-icon-114x114.png"/>
<link sizes="120x120" rel="apple-touch-icon" href="/apple-icon-120x120.png"/>
<link sizes="144x144" rel="apple-touch-icon" href="/apple-icon-144x144.png"/>
<link sizes="152x152" rel="apple-touch-icon" href="/apple-icon-152x152.png"/>
<link sizes="180x180" rel="apple-touch-icon" href="/apple-icon-180x180.png"/>

<link color="#ffffff" rel="mask-icon" href="/safari-pinned-tab.svg"/>

<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
<meta name="msapplication-square70x70logo" content="/ms-icon-70x70.png"/>
<meta name="msapplication-square150x150logo" content="/ms-icon-150x150.png"/>
<meta name="msapplication-wide310x310logo" content="/ms-icon-310x310.png"/>
<meta name="application-name" content="My Application"/>
<meta name="msapplication-config" content="/browserconfig.xml"/>
<link rel="manifest" href="/manifest.json"/>
<meta name="theme-color" content="#ffffff"/>