How to change favicon in quasar framework? I already tried changing the href in index.template.html but failed
You need to change href in three link tags and it works.
Try this.
<link rel="icon" href="statics/ninja-simple-512.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="statics/icons/ninja-simple-512.png">
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/ninja-simple-512.png">
For icons purposes, QUASAR have great plugin called
Quasar Framework Icon Genie.
This is a CLI tool to generate all the icons and splash screens for your Quasar Apps.
With this plugin, you just need to put app-icon.png and app-splashscreen.png into your quasar root directory, and after quasar dev or quasar build commands plugin will generate for you perfect favicons, also if you are developing iOS or android application this plugin will generate application icon and splash screen.
quasarframework/icongenie
Quasar Framework Icon Genie
Related
This is what I have in my head section of index.html:
<head>
<meta charset="utf-8">
<title>MeasurementProtocols</title>
<base href="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/icons/apple/touch-icon-ipad.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="manifest" crossOrigin="use-credentials" href="manifest.json">
<link rel="apple-touch-icon" href="./assets/icons/apple/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="120x120" href="./assets/icons/apple/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/icons/apple/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple/touch-icon-ipad-retina.png">
<meta name="theme-color" content="#1976d2">
</head>
If I want to add the webpage to homescreen via an Apple device, the iPhone would take a screenshot as icon, although I added the icons to the index.html as apple describes it on: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
So what am I missing, or does it not work with having href directed to assets and not the mainfolder?
PWA with Icons don't work with authentication on a Webserver on iOS. Solution is to remove the Authentication.
While iOS 11.3 does support web app manifests, it does not yet support specifying icons this way. You'll want to include it in your manifest for other devices, but at least for now you'll have to use the following for iOS:
<link rel="apple-touch-icon" sizes="180x180" href="icon.png">
Specify the icon size, and include a URL.
Learn more at Apple's documentation here
There is also a website to automate the process linked here
Expanding on Hannes answer
PWA with Icons don't work with authentication on a Webserver on iOS
One possible fix is to allow anonymous access to JUST the icons.
Example with Azure Easy Auth:
Create rule file in your public/wwwroot:
Note: This feature, URL Authorization Rules, was a preview feature that may be unsupported/deprecated moving forward (>=2021-04). Unclear what the replacement is, if any.
authorization.json
{
"routes": [
{
"path_prefix": "/",
"policies": {
"unauthenticated_action": "RedirectToLoginPage"
}
},
{
"path_prefix": "/img/icons",
"policies": {
"unauthenticated_action": "AllowAnonymous"
}
}
]
}
Switch your Azure Authentication setting to: "Allow Anonymous Requests (no action)"
This should now allow your icons to show up when saving the page to homescreen on iOS device, but not allowing the rest of the app to be accessible prior to login.
Minor Note: Since all requests now default to "Allow Anonymous Requests (no action)", its important you have the catch all rule of "path_prefix": "/" - without it your whole app would be public. Since this feature (at least in Azure Web Auth) uses longest-prefix matching, order shouldn't matter and you should be able to craft the rules with either whitelist or blacklist approach.
My site doesn't seem to show the fonts from font awesome, even though I have included the css from cdn as shown here
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
There should be a icon beside "tenant info" and "landlord info" and few others but those are some that are not showing up.
The site looks fine running locally but does not on live.
UPDATE
Fixed, font folder was in the wrong spot
Found # https://fontawesomecdn.com
https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css
Use this Code in html-head:
<link rel="stylesheet"
href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css"
integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU"
crossorigin="anonymous">
I am experiencing problem with scc style do not apply when I adding my web app to a home screen of iphone and lunching app with shortcut(icon). So here is two examples. First open with safari.
here is the screenshot of same web opened with icon in iphone menu
So for some reason the css style do not apply for Melanie Wright on the second image and also icons for input fields still white not orange, if I open this web app with shortcut(icon).
here is my meta tags that I used to mimic the look like it is app
<!-- Iphone Icon -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Thank you for you time !
Browsers tend to cache css and script resources for a period of time.
Try clearing out the cache on the device or even manually force it to load a new file. Its a good way to know that you are not using a cache version of the css file.
Just add ?v=1 to the end of your file.
script.js?v=1
To easily update my app, I copy the content of the www folder to the phone and then do a window.location = workingDirectory.toURL() + "/index.html".
EDIT - note that this works until Phonegap 3.4, but not on 3.5 (nothing seems to be happening when I try to change the location). If instead of toURL I use toNativeURL, then it works also on 3.5. Using toNativeURL also fixes the current issue on iOS.
Copying all the files and opening the index works fine on both iOS and Android. The problem on iOS though is that there is absolutely no styling to the page, as if the links to the CSS files weren't working. Everything is working fine on Android.
My links are relative (eg <link href="css/reseter.css" rel="stylesheet">). Links to other pages or to scripts do work.
Here is the simplified main page I open:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<div class="red">I should be red but I'm not!</div>
This correctly takes me to the other page.
</body>
</html>
style.css
.red { color: red; }
main.js
alert("HELLO is correctly displayed");
I correctly get the alert (its title is cdvfile://localhost/) and I can also correctly go to page2.html. The only problem is with the styles.
If I open the page in Safari pointing to my computer, the style is correctly displayed.
I tried a few things, to no avail:
Add <base href="cdvfile://localhost/persistent/MyApp/"> in the <head>
Update all my href and src to have the full cdvfile path (eg use <link href="cdvfile://localhost/persistent/MyApp/css/reseter.css" rel="stylesheet">)
I finally got it working in PhoneGap 2.9 by using fileSystem.root.fullPath. On PhoneGap 3.3 it only return /. Is this a bug on PhoneGap 3.3 that when using cdvfile, everything seems to work except the CSS files?
I decided to temporally use a relative path to my app for iOS on PhoneGap 3.3: ../../Documents/MyApp/index.html. I don't know if it's safe to use or not.
EDIT In Phonegap 3.5 (I haven't tested in 3.3), using work window.location = workingDirectory.toNativeURL() + "/index.html"; (ie using toNativeURL instead of toURL) works.
Check the following link (the plugin was changed):
http://cordova.apache.org/news/2014/02/10/plugins-release.html
It looks like you are running into CB-6532. I just put in a pull request for a fix -- you can temporarily use my fork until it is accepted:
https://github.com/loufranco/cordova-plugin-file
To use it, do
cordova plugin remove org.apache.cordova.file
cordova plugin add https://github.com/loufranco/cordova-plugin-file.git
Remember to reverse it if the pull request is accepted.
I'm trying to migrate a Phonegap app wich uses jQuery Mobile to Blackberry. When I start the app, which runs fine on Android and iOS. I see no styles, javascript whatsoever.
I figured, that Blackberry webworks apps use different file paths than iOs and Android. I find this file path thing a bit odd in general.
Like when you use a file path in an HTML file like for <img src="res/img/..."> the normal relative path is fine for Android and iOS. BUT if you specify a file path in JS you need "file:///android_asset/www/res/img" for Android while "res/img/" is fine for iOS. But anyways... what's the case with Blackberry here?
Do external JavaScript and CSS files require something like the following?
<link rel="stylesheet" href="local:///lib/jquerymobile/jquery.mobile.min.css" />
or should it work the normal way by just specifinging the relative path?
Besides that, are there other pitfalls? Like I heard about file naming issues when using "dashes", "underscores", whatsoever.
Would be great if someone with exerience with Phonegap apps for BB could share their experiences.
This is what i have:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1.0, 'maximum-scale=1.0, 'minimum-scale=1.0, user-scalable=no" />
<!-- PhoneGAP -->
<script src="json2.js" type="text/javascript"></script>
<script src="phonegap-1.0.0.js" type="text/javascript"></script>
<!-- JQuery Mobile -->
<link rel="stylesheet" href="resources/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="resources/jquery-1.6.4.min.js"></script>
<script src="resources/jquery.cookie.js"></script>
<script src="resources/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
That´s the order that works, check the src attribs to know where you must copy the jqm library.
Good luck!