Mobile Icon

Help Center Get Answers
1

Anyone know how to create a custom icon when a user selects to “add to homescreen” on their mobile device? It’s showing the Knack icon now and I’d like to make it my company’s logo.

2

Hey @GaryStark10384 I think this is what you’re after: JavaScript & jQuery Examples (knack.com) > Use a Custom Icon for saving your App to a mobile device’s Home Screen

1 Like
3

Thank you @BradStevens! I’m sure I’m doing something wrong b/c the icon is not showing up when I try to save to my homescreen on my iphone. Here’s a copy of the code with my favicon link inserted…did I do that incorrectly?
/* Mobile Phone Icon. */

$(“head”).append(“<https://dl.airtable.com/.attachments/9d9586bc4c56e8a0b7197ed11c489386/9360d3bc/Favicon1.png’ />”);

$(“head”).append(“<https://dl.airtable.com/.attachments/9d9586bc4c56e8a0b7197ed11c489386/9360d3bc/Favicon1.png’ />”);

$(“head”).append(“<https://dl.airtable.com/.attachments/9d9586bc4c56e8a0b7197ed11c489386/9360d3bc/Favicon1.png’ />”);

$(“head”).append(“<https://dl.airtable.com/.attachments/9d9586bc4c56e8a0b7197ed11c489386/9360d3bc/Favicon1.png’ />”);

4

Hey @GaryStark10384 yeah the code isn’t right - review the help page and you’ll notice more than the path to image which needs placing in the href attribute.

5

I created an AWS account and added the images to a public folder. Then you copy that link and put it in your code.

6

Hey Brad! I have the favicon working for “add to homescreen”. However, when I click “add bookmark” it still shows the Knack icon. Do you know of any way to change this? Here is the code I’m using:

// Favicon
ChangeFavicon();
function ChangeFavicon() {
var link = document.querySelector(“link[rel*=‘icon’]”) || document.createElement(‘link’);
link.type = ‘image/x-icon’;
link.rel = ‘shortcut icon’;

link.href = ‘https://s3.amazonaws.com/assets.knackhq.com/assets/61df3795489e3b001eab9194/64ac52df2d80680029d36ea1/original/logosymbol3x.png’;
document.getElementsByTagName(‘head’)[0].appendChild(link);
}

/* Mobile Phone Icon. */
$(document).ready(function() {
$(‘head’).append(‘’);
$(‘head’).append(‘’);
$(‘head’).append(‘’);
$(‘head’).append(‘’);
});

7

FYI…my question is just for mobile phones to “add a bookmark”.