I've been working on a project using SvelteKit and I have yet to figure out why my favicon is not showing up correctly on Safari (both desktop & mobile). Instead, it's actually picking up the favicon from a site I have linked on my footer! This is what's in the head of my app.html file:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
<meta property="og:title" content="Movie Hunt" />
<meta property="og:image" content="https://i.imgur.com/QzdVah9.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:description" content="Browse through genres of movies or search for a particular movie title and find out if they are available for rent or currently being streamed online."/>
<meta property="og:url" content="https://movie-hunt-demo.vercel.app/" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:type" content="website"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Londrina+Shadow&family=Overpass:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yellowtail&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4dd3342d23.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="%sveltekit.assets%/styles/global.css" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico?v=2">
<link rel="shortcut icon" sizes="32x32" href="/images/favicon-32x32.png?v=2" />
<link rel="shortcut icon" sizes="16x16" href="/images/favicon-16x16.png?v=2" />
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png?v=2">
<link rel="mask-icon" href="/images/favicon.ico?v=2" color="#000000">
<link rel="android-chrome" sizes="192x192" href="%sveltekit.assets%/images/android-chrome-192x192.png">
<title>Movie Hunt</title>
%sveltekit.head%
</head>
This is on my footer and where I'm assuming my project is picking up the yellow favicon somehow:
<a class="coffee_a" href="https://www.buymeacoffee.com/rickydlgd" target="_blank" rel="noreferrer"><i class="fa-solid fa-mug-hot"></i></a>
It's really strange. The correct favicon does show up on other browsers as I've tested the site on chrome, firefox, and brave so far. Safari is the only one picking up the yellow favicon from buymeacoffee.
Any idea how I can fix this?
Here's a link to my project: Movie Hunt
Below is a screenshot of what I've been seeing:
Safari has suddenly updated the favicon to the correct one and I didn't change any of the code... I guess it takes a couple days for it to update? Anyway, just leaving this here in case anyone runs into this issue. Waiting a couple days was the answer.
I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?
In my app I get error message in console
GET chrome-extension://lncjpblllfcpljbdelleomhnlgdlhhmm/content/styles.css net::ERR_FILE_NOT_FOUND
after every new request, but in the same time I do not see any other issues and application seems to be running correctly. Currently I cannot look up any line in my code files where the styles.css file is mentioned (only App.css and all.css).
Why cannot this file be found and how can I fix it?
Here is an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Welcome to DevConnector!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.
Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.
I have just installed bitwasp and now i ran into this problem with a php generated html file, it doesnt load the CSS and the javascript because its pointed to the index.php.
Is there some fix in Php or need i to change my Apache server settings
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="open source bitcoin marketplace" />
<title>Welcome | BitWasp</title>
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/style.css">
<!-- JavaScript -->
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/jquery-1.8.1.min.js"></script>
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/bootstrap.js"></script>
</head>
Thanks in advance