# Mobile Icon

**URL:** <https://forums.knack.com/t/mobile-icon/12845>\
**Category:** Get Answers\
**Created:** [July 28, 2022, 7:57pm UTC](https://forums.knack.com/t/mobile-icon/12845 "2022-07-28T19:57:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![GaryStark10384](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)\
**Post date:** [July 28, 2022, 7:57pm UTC](https://forums.knack.com/t/mobile-icon/12845/1 "2022-07-28T19:57:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [July 29, 2022, 11:23pm UTC](https://forums.knack.com/t/mobile-icon/12845/2 "2022-07-29T23:23:09Z")

</div>

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](https://docs.knack.com/docs/javascript-jquery-examples#use-a-custom-icon-for-saving-your-app-to-a-mobile-devices-home-screen)

---

<div class="post-metadata">

**Author:** ![GaryStark10384](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)\
**Post date:** [July 30, 2022, 12:31pm UTC](https://forums.knack.com/t/mobile-icon/12845/3 "2022-07-30T12:31:44Z")

</div>

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](https://dl.airtable.com/.attachments/9d9586bc4c56e8a0b7197ed11c489386/9360d3bc/Favicon1.png)’ /\>”);

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

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

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

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [August 1, 2022, 12:34am UTC](https://forums.knack.com/t/mobile-icon/12845/4 "2022-08-01T00:34:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Nick](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@Nick](https://forums.knack.com/u/Nick)\
**Post date:** [August 2, 2022, 1:47pm UTC](https://forums.knack.com/t/mobile-icon/12845/5 "2022-08-02T13:47:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GaryStark10384](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)\
**Post date:** [July 11, 2023, 4:33pm UTC](https://forums.knack.com/t/mobile-icon/12845/6 "2023-07-11T16:33:59Z")

</div>

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](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(‘’);  
});

---

<div class="post-metadata">

**Author:** ![GaryStark10384](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)\
**Post date:** [July 11, 2023, 4:34pm UTC](https://forums.knack.com/t/mobile-icon/12845/7 "2023-07-11T16:34:39Z")

</div>

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