Prefetch apple-touch-icon before adding to home screen - html

Before adding a Web App to the home screen, a popup comes up to confirm the PWA's (Progressive Web App) name and icon. Initially, the icon displays as a screenshot of the current page. When the image finally loads, the icon here...
<link rel="apple-touch-icon" sizes="128x128" href="appleicon.png">
...fades in and replaces the screenshot. Is anyone aware of a way to "prefetch" or "preload" this icon before saving it to home screen?
I'm trying to remove the awkward screenshot that displays before the image is downloaded.
So far, rendering the image in an <img > tag does not work.
Thanks

Related

Why Firefox does not show pictures of my web?

I have an issue with web I am developing HTML/CSS (only design), if I open it in firefox from my harddrive no pictures are displayed, there is a small icon instead like picture can not be loaded. If I rightclick on a icon and select open picture in new tab than picture is displayed on a new tab without issue.
But if I open webpage from my hardrive in IE, edge or chrome than all pictures are displayed directly on a page in a browser without issuel.
What can be wrong with mozilla or with page?
I tried all these recomended fixes: https://support.mozilla.org/en-US/kb/fix-problems-images-not-show.
this is picture URL: img src="D:/UserData/z003xner/Documents/My Web Sites/bubabikes/Images/30.1.2023.jpg" and i tried forward slash and bacward shash and nothing helps
Try to put the image inside the project folder for eg : {project_path}/images/1.jpg and call the image using the domain name in the project suppose the project domain is https://example.com call the image using
<img src="https://example.com/images/1.jpg" class="image" />
or if in localhost :
<img src="http://localhost/project-name/images/1.jpg" class="image" />
It’s hard to tell, but the issue may be the spaces in your file path — try replacing them in your html with %20 like this
my/file%20path%20has/spaces.jpg
You can look up “url encoding” for more information!

AMP Page - Fontawesome icons not showing on mobile

I just made AMP pages for my website, and everything seems to be fine when I test the website through desktop browser (Chrome), both in normal view and phone-view.
However, I just attempted to access a webpage through Google (which is now showing the amp icon), but when I visit the page, the fontawesome icons aren't showing, which hurts the user interface.
I have this code in the section.
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.4.1/css/all.css" integrity="hidden" crossorigin="anonymous">
Any ideas why the icons aren't showing up on mobile?
After some more digging, I finally found the fix for this.
The resources are being loaded through cdn.ampproject.org, and you get a custom subdomain for your own domain, so lets say your domain is example.com, you need to whitelist example-com.cdn.ampproject.org in Font Awesome.

Facebook share image sharethis

In my site I add sharethis plugin to share pages
My problem is to manage the image in sharing page, and seems that facebook take the first image and not my image.
this is my page
http://www.netafim.com/testimonial/netafim-customers-video-testimonial---uvs-south-africa
In this page i have this meta tag
<meta property="og:image" content="http://www.netafim.com/Data/Uploads/South Africa_sugarcane_share.png"/>
this is my image in the meta tag
But when sharing i see another image
[]
Why and how can i manage my sharing image?
thanks
FIX: Rename the image filename without any whitespace characters(ie. space in filename)
So far, all it could scrape is just the title and description of it. And since it can't scrape the image(due to the space in the image filename), it has fallen back to the default image for your website, which is
Hope this helps. :)
After fixing the name I can't see the image on the dialog page.
When I Share the page I see the image from the og:image tag.
But on the Dialog sometime the image exists and sometimes not.
some time its like this with no image
and some times with the image
On the debugging page when click on the "see this in the share dialog" its seems good as expected
but when click from the site
i got "thin" version with no image. what can be the reason for the differant

Tab icon wont disappear

I'm using bootstrap basic theme and have been editing it, i deleted the code in html: <link rel="icon" href="img/icon.jpg">
But the icon wont go away, I have saved and refresh but the icon is staying there. I've even deleted the image at where its located.
You should try to clear your browser cache and then refresh the page.
Try clearing the browsing history and the application cache. Can you try it on a different browser? If it does not follow in the new browser it should be a cache problem.
You could check if you also uploaded an icon to the root of the webserver under the name: favicon.ico. These icons also get loaded, independent on your html source.

Issues with href not opening link (tested in Chrome and Safari)

Here's what I've got: What I'm trying to do is have a github image on a webpage and when it is clicked it takes you to my github account. Odd thing is that this was working and then stopped and I can't tie it directly to any changes I've made. Note that I'm not using any javascript on this site...
This is in the body of my .html:
<body>
<div>
<a href="https://github.com/mystuff" target: "_blank">
<img src="https://dl.dropboxusercontent.com/u/######/site/octocat_black.png"></a>
<!-- this repeats for 5 different images -->
</div>
</body>
When I hover over the image i can see the link in the chrome bottom toolbar but when I click it the page just seems to reload (not an entire reload, but it doesn't go anywhere). If I use the developer tools and click on the link it goes where it's supposed to. Any thoughts would be greatly appreciated!
Note that all the images I use, .html, and .css all live in the same directory. It's a VERY simple site.
target:="_blank"
html is no pascal where the assignment operator is :=. Write:
target="_blank"