Solved: Can I add an icon image to my website which Apple ...

schoolangel · ‎04-12-2019

Hi, I want to add an icon image to my website which Apple and Android will use as a default logo if a page from my website is bookmarked on a mobile device rather than them producing a thumbnail image or default image.

I have tried the following code:

placed in the <head> section and uploaded the corresponding icon into the site assets but it does not work.

Any help would be much appreciated.

Thanks Chris.

Bernadette3 · ‎04-13-2019

When I try to visit the urls in your screenshot I am not able to pull up the image. 😕

Instead of putting the code in the css/html section try this instead:

1. Create a new, hidden page and upload your images to the page.

2. Publish and navigate to the hidden page.

3. Right click on each image and replace the urls in your code.

4. Insert the code into Settings>SEO>Header

5. Save and publish.

Also, I came across this article last night which is why I thought your images were too small. I haven't tried to implement it myself, but as soon as I have time today I'll see if I can get it to work. https://netmospherics.com/blog/favicon-mobile-icons-website/

View Best Answer >

Bernadette3 · ‎04-12-2019

I'm not super familiar with this, but the size might be too small. Where did you find the code for this? Can you also post the name of your site? Thanks!

schoolangel · ‎04-13-2019

Hi, the website is www.schoolangel.org.uk (we are a UK charity for schools). This is quite important for us to be able to do because without it Apple just deliver a thumbnail of the webpage as a bookmark and Android just a basic coloured block.

There are lots of websites giving advice on how to do this, for example:

https://webdesign.tutsplus.com/articles/quick-tip-give-your-website-an-ios-home-screen-icon--webdesi...

The critical thing is being able to add the image to the 'website root directory' and this is the bit I struggle to manage with weebly.

I tried adding it to the assets etc and have tried multiple different sizes following all the advice in the above article. I am pretty sure that I am not gettting my image into the root directory.

Thanks for your help Chris.

schoolangel · ‎04-13-2019

Hi Bernadette, I have attached a screenshot showing the relevant code in my head section of the site, I think I have correctly written the file pathway? Thanks Chris.

Bernadette3 · ‎04-13-2019

When I try to visit the urls in your screenshot I am not able to pull up the image. 😕

Instead of putting the code in the css/html section try this instead:

1. Create a new, hidden page and upload your images to the page.

2. Publish and navigate to the hidden page.

3. Right click on each image and replace the urls in your code.

4. Insert the code into Settings>SEO>Header

5. Save and publish.

Also, I came across this article last night which is why I thought your images were too small. I haven't tried to implement it myself, but as soon as I have time today I'll see if I can get it to work. https://netmospherics.com/blog/favicon-mobile-icons-website/

schoolangel · ‎04-13-2019

Dear Bernadette,

You are a STAR!

Your solution works, thank you so much!!

I will have a play with creating a decent icon tomorrow but it is such a relief to get this solved. It is a really useful thing to add to the site as so many users bookmark our website on mobiles etc.

Best wishes,

Chris.

Bernadette3 · ‎04-13-2019

I'm so happy to hear it worked for you, Chris!

Can I add an icon image to my website which Apple and Android will use if a user bookmarks a page?