AMP Page - Fontawesome icons not showing on mobile - font-awesome

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.

Related

Prefetch apple-touch-icon before adding to home screen

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

Favicon not showing on quick links on Android Google Chrome

The way I use to display the favicon on my website is to add a favicon.ico in the root folder.
It is working alright on the tabs of the desktop and also the tabs on Chrome in phone itself, but when it's in the quick links, I only see the first letter of my website name. so if the domain is example.com I see E instead of the favicon:
Will I have to add meta tag for favicon to make it show here, or it has nothing to do with it?
favicon.ico is used for low resolution icons, such as the one that appears in the tab. However, bookmark and add-to-home-screen images must be high resolution icons.
In order to have such icons for Android Chrome:
Preferably, provide a Web App Manifest, along with a 192x192 icon.
If you don't want to create such file, you can provide a 180x180 Apple Touch icon. It is simpler and more platforms support it (eg. iOS Safari).
As an alternative, you can use online favicon generators, such as RealFaviconGenerator, to create all these files for you. Full disclosure: I'm the author of this service.

Add website to home screen without address bar

Today I was browsing "how to migrate jimdo CMS to WordPress" from the internet.
And I've got a website with some details.
Here is the URL of the website:https://m.freelancer.com/projects/Wordpress/Migrate-Jimdo-Website-WordPress/
When I click over that website's link, after the website is loaded, I saw a window like this: "Add this website to home screen ".
When I choose"yes", the browser automatically created an app for that website in my home page. My Device is android, so I clicked the home button of my phone and clicked over the apps icon. Then an app is just opened. The app doesn't looks like chrome because it doesn't have the address bar. I didn't installed any freelancer apk file.I tried to close and uninstall that app. From home screen, when I hold over the app icon, I saw" remove " text on top of my phone's screen. It means that the app I've hold is not an actual apk. It's a widget or something which is created by the chrome browser by command of that "https://m.freelancer.com/projects/Wordpress/Migrate-Jimdo-Website-WordPress/" website. I want to add that feature in my website, which is a sub domain:sslclive.jimdo.com
Is anyone anyone knows how to add that feature in my website?
That feature must be maid by some kind of HTML/JavaScript code.
If anyone knows, then please answer.
And sorry for my worst bad English
You need to add this meta tag to tells the browser to launch your page fullscreen
<meta name="mobile-web-app-capable" content="yes">
You can also add an icon using a manifest:
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/#launching_a_page_fullscreen_from_home_screen

How to set the favicon when viewing source in Chrome?

I have a page that displays the incorrect favicon when I view its source.
In the following image, you can see in the first tab (which is viewing the page) using the correct favicon - favicon-tenaya.ico.
However, when you go to view the page's source via Ctrl + U, it seems to display the default favicon - favico.ico, which is in the website's root folder:
Is there a way to get around this? We don't want the favicon changing when they view the source. How does the view source page in Chrome decide which favicon to use?
Viewing the source of a page is browser-dependent. There nothing you can do to force it to display a specific icon. For example, Firefox doesn't display any icon at all for a "View source" tab.
However, you can influence browsers to achieve this. For Chrome and your particular web site, replace the existing favicon.ico at the root of your web site with your favicon. This is what Chrome displays and yours is the black and white icon you don't want. Even better: rename favicon-tenaya.ico to favicon.ico (thus replacing the existing favicon.ico) and change the HTML accordingly.
As an aside, you don't need two declarations. Just keep the shortcut icon one, although the other one should do just as well.
Since Chrome does not parse the html it uses default file "/images/favicon.ico" to show as favicon in view-source. If it doesnt find it it look into different other locations too. for example if you use wordpress it uses http://[domain]/wp-content/themes/[theme]/images/favicon.ico
In Website, you can mention the favicon like below
<link rel="shortcut icon" href="/favicon-tenaya.ico"/>
and its working fine.
Where as in view source of chrome, they automattically find the favicon on below path
https://www.tenayalodge.com/favicon.ico
Favicon to be fetched from added favicon.ico after your website.
A very simple way:
put your favicon.ico file on the root of the website.
That should be accessed like: http://www.[domain].com/favicon.ico

Can't find favicon in web page source

Maybe a stupid question, but for the life of me I can't find a reference to the favicon "ico" file on this website:
http://www.fitnessutah.com/
They obviously have one because it displays in the browser tab/window. I've tried Chrome developer tools, Network tab which shows all images on a page -- but no favicon there either. Where is it hiding?
It does seem to be being pulled in differently, but it is typically always in the default location - which this one is as well.
http://www.fitnessutah.com/favicon.ico
There are two ways to specify the favicon for a website:
1) Give a link to the favicon
<link rel="icon" type="image/png" href="/somepath/favicon.png" />
2) Put it in a prefefined URL, this is relative to the server root. So in this case will be http://www.fitnessutah.com/favicon.ico
This website seems to be using the second method so you will find the favicon in that link.
You do not need to add a link element with your favicon image for it to appear on your website.
Quote:
A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root.
Source:
http://www.w3.org/2005/10/howto-favicon
Further to Keir's and Carlos' answers - to spell it out - most browsers are programmed to also look for a favicon here:
http://yourwebsitename.com/favicon.ico
If the favicon image is named/stored as above, there is no need to mention it in the HTML code.
Therefore, if you are looking at a website and you can't find any reference to their favicon in the HTML source, just type the website's base URL in the browser address bar followed by /favicon.ico:
http://example.com/favicon.ico
Real-life example - try to find the favicon in the source code:
http://www.fuelly.com/favicon.ico
Use Chrome Dev Tools Network tab.
Filter by favicon
reload the page with Shift+F5
You will get the icon regardless it was loaded with link or from default location