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'm wondering how to change the default favicon on the browser tab using a nano react app and displaying it on localhost. I've already tried the whole process using https://realfavicongenerator.net/ but I don't have the static nor the public folder since it's a nano project... I'm not sure it's possible either
You have generated the favicon, but have not linked it to the html page. Here is the structure of the project as per the documentation on their github repo.
Here the index.html file is in the project root folder. To get it working, you can place your favicon alongside it, and in index.html you can add <link rel="icon" href="./favicon-filename" />
Since the project uses Parcel, it will find the favicon during the build process.
I already remove the link in the head tag and still the favicon gets rendered, is there anyway this can be remove or change?
Your favicon is in project_root > public > favicon.ico.
|
`--- public
|
`--- favicon.ico
Removing it is hard as browser generally uses a cached favicon if it doesn't find anything.
I'd urge you to change it. Just replace the favicon.ico file with an image of your choice. You can even rename a png to favicon.ico and use it. Make sure you do a hard refresh. You have to burst cache to see that change.
If you want to go all in on this, generate a favicon using https://www.favicon-generator.org/
Try this:-
Change
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> to
<link rel="shortcut icon" href="/a.png" /> which should be not present by the way or try deleting the favicon
You have to do all the above (or below), but you also need to clear your browsing history.
You can change it from the public directory with your own favicon and but you'll see while developemnt but when you run
npm run build
you won't see it in the index.html link tag
you'll only see it on the development .
Go to directory of your project → public → open manifest.json:
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
just simply rename your image to favicon.ico and replace the actual favicon.ico image in public-folder by your renamed-image. and then just refresh you page..
Just Navigate to public Folder in your react project and then remove the file named favicon.ico. Then after you should replace that file with your favorite icon or any png image by renaming it as favicon.ico like the one you had before. then refresh your page.
You may have to generate the flavicon. After you decide on an image that you want to use for the flavicon, this site will help you generate the .ico file. You may have to edit the HTML to include the correct resizing properties.
https://realfavicongenerator.net/
get your icon and replace it with ~your_director~/public/favicon.ico
then refresh site.
Just replace your project_folder/public/favicon.io with your icon. You can just rename your .png or .jpeg file to favicon.io, it just works.
Go to index.html file. After that remove the default href value () from it and simply replace your icon source here.
download icon file and place it in public folder
rename it favicon
after renaming open in any editor and open that file and then refresh
Fast changes without deleting Browser cache or history :
Ctrl+F5
Just delete the favicon.ico , move any image in public folder and rename in favicon.ico ....worked for me
I used Yeoman to create a web app in AngularJS. Everything works ok, but after using the grunt build command, if I view the built app in the browser (from dist directory), I can see that some yeoman image on the broswer, how i can remove it?
Delete Chrome's favicon cache file.
On the Mac, it's at
/Users/[yourname]/Library/Application\ Support/Google/Chrome/Default/Favicons
Look for a line that looks like this in your index.html in your public folder.
<link rel="icon" type="image/ico" href="../img/favicon.ico">
and change the href to wherever your image is, or to remove it just delete that line.
You only have to do this steps:
Delete the file called favicon.ico (it's in the dir called "app")
If you have the image you want to use as a favicon, go to this link
Click on "create a favicon" and upload your image.
This page will generate your favicon in a file named "favicon" and you have to save it in the same place where you deleted the file favicon of yeoman.