Error when i execute ionic serve

Ionic Framework ionic-v3
1

When i execute ionic serve command in terminal. It genterates the following error:

Refused to load the image ‘http://localhost:8101/favicon.ico’ because it violates the following Content Security Policy directive: “default-src ‘none’”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I have tried many ways for solving, but i did not have could. Please help

Thanks

2

Can you share your index.html file ?

You can add this line in your index.html file. This file locate in src folder.
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
And create assets->icon folder in your src folder and put favicon.ico icon..
3

i am also facing this problem can you please help me, i have tried this but still not solved the error.
my index.html file is here

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <script src="https://js.stripe.com/v3/" async></script>
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-st

* List item

yle" content="black" />
</head>

<body>
  <app-root></app-root>
</body>

</html>
4

if you use favicon.ico then don’t need to add favicon.png image.
and you add a favicon.ico image in src/assets/icon/your_favicon_image this path?

5

When I had this error, it was really because I didn’t import a library into a *.ts file — this error message was completely unrelated to the actual bug in my case.

3 Likes
6

I had same issue but solved using below solution.

<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />
I used .ico file instead of .png file and thats works for me. try once.

7

I had the exact same problem. I advise you to take a look at your Terminal in VSCode (or the standard terminal if you launched it by there) and look for an ERROR message.

Most likely the problem isn’t the favicon.ico blabla stuff but another element of your app, something in a .ts doc for example. Via Terminal you can seek for it in a better way than Chrome, that shows you this unrelated message.