How to generate App-Icons

[peesen]

Hey Hubsport-Community

Is it possible to add the following App-Icons in Hubspot:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Thank you so much for your help and best regards

Pascal

[Anton · Accepted solution]

Hi @peesen,

Yes that possible. There are multiple ways how to you that.

1. Inside the hub settings:
Go to the hub settings (cog wheel in the to right corner)->marketing->pages and you will find the "website header HTML" section there. Simply put every "app-icon" code there.

2. In the template(s):
When you're building/modifying drag &drop templates you have the option for "additional head markup" when you have no module/group selected. Paste it there. Keep in mind that this will add these icon only to this template. So only pages that uses this template will have the app icon in the head

3. With a custom module
A quite simple jQuery module with

&lt;script&gt;
$('head').append( '<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">' );
&lt;/script&gt;

Important: this module should be a global one. Unless you add it to a global footer. Otherwise you will need to edit it in every template. You can add a simple text to this module and put it into the href section. This will give you the ability to paste the link to the image very easily. (you could add a link/url function instead too but this will need a bit more "work").
When you're done insert the module to your (global) footer or specific template where you want to have the app icon.

Best,

Anton

[peesen]

Thank you so much 🙂