It is default setup in create-react-app application that I am using. But the favicon is not displayed. Not even the react favicon that comes with create-react-app. I can see the favicon link in the chrome's inspect tab. Also the icon gets loaded in localhost too for the link "http://localhost:3000/favicon.ico"
Following link is present in the index.html as well
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
What am I doing wrong for it to not be displayed ?
That issues happened for me too , what i did was i just went to this site .. from there i created my .ico image and gave my absolute path of that .ico image .
Ex :
<link rel="shortcut icon" href="/images/myfavicon.ico">
Related
Hello I have a react app and I set the "homepage": "./" in package.json, this works for me when my application loads from the sub-directory. All the Js and CSS files get relative paths in their href attributes.
Landing page URL: https//:<my-domain>/<sub-directory-path>
The problem comes when I click on a link from my landing page it opens the new tab in a browser and the browser tries to load the page but it fails and throws the following error:
Refused to apply style from 'https:<my-domain>/<sub-directory-path>/somepage/static/css/8.28838c0e.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When I checked in the elements tab of the browser the CSS links are loaded as followed and which is the same in my landing page
<link href="./static/css/8.28838c0e.chunk.css" rel="stylesheet">
I think because the new tab opened and URL has changed the CSS is trying to load from relative path and that's why the error is coming.
Any idea how to fix this? OR I should not open a new tab when there is relative path set for the homepage key in package.json file?
Try specifying the type of the css file type="text/css"
and removing the dot from the css link path href="static/css/8.28838c0e.chunk.css"
The html line should look like this:
<link rel="stylesheet" type="text/css" href="static/css/8.28838c0e.chunk.css"/>
As the title suggests, in my React project, my favicon is displaying fine on my local machine, but not in production.
I've tried both using an absolute link for the file path, as well as:
<link rel="icon" href="%PUBLIC_URL/favicon.ico?v=2" />
I've also tried adding the .ico file in the images folder within my src folder, but still no luck!
Does anyone know what I might be missing?
Cheers
I've been developing an embeddable widget using CreateReactApp. It works great when initialised from the index.html
Now I want to test what happens when the user changes page in the html. Ill need to save the app's state in storage etc.
When I add a second html page to the public folder (two.html) and navigate to it - I get the error:
URI Error: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
..and the app js does not run.
How can update my app so I can use a second html page?
The issue maybe caused due to babel not able to transpile the % .
Please try updating this in index.html :
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
to this:
<link rel="icon" href="/public/favicon.ico" />
Here is my code snippet how I am including the favicon in my personal website which was built with Angular JS.
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"/>
With this code, the favicon is appearing on Chrome and IE browsers. But the favicon is not appearing for Angular JS templates on Firefox browser.
I looked at the similar websites made with Angular JS, the same issue is repeated.
Please refer the following website,
https://www.madewithangular.com/#/
Thanks.
In my AngularJS app with the ui-router dependency, for some reason - on Google Chrome - my background-images in my stylesheet is not loading (doesn't even show up in Network tab in dev tools).
Maybe it is because I've bound the link href to my scope, and change it on the fly?
index.html:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
And in my controller I set $scope.stylePath to 'login.css'.
If I open dev tools and uncheck the background-image, and check it again, it loads the image and shows it fine.
No problems on IE11.
Any ideas?
Change from:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
To:
<link rel='stylesheet' ng-if='stylePath' ng-href='stylePath'>