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
Related
I'm trying to create a deeplink on my website and one of the ways is by creating an assetslinks.json with a few informations about the connection. The problem is that I've created my .well-known following a few docs and on my localhost, the file shows perfectly on my web browser but as soon as I deploy it to my domain(which is a github page - I'm not sure if this is relevant) it does not show anymore.
I also tried adding the following in my index.html:
<link rel="assetlinks.json file" href="%PUBLIC_URL%/.well-known/assetlinks.json" />
<link href="/.well-known/assetslinks.json" >
<link rel="apple-app-site-association file" href="%PUBLIC_URL%/.well-known/apple-app-site-association" />
I've tried removing the dot in the fodler ".well-known" and then, the json file shows on my domain, that's not the way it should be implemented though, so I need it to work with the ".".
Does anyone have any idea on why this is happening?
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 created the build file for my React JS project. As soon the build index.html file in browser, everything worked fine, except for a single image that I have provided in my Topbar Component. The image appears broken, even after it is present in my application folder.
Here is the screenshot of broken image:
and this is how the image element looks in inspect tool:
Can anyone please suggest the reason for this?
We have to Create image file with in the public folder then access the image file in href
<link rel="icon" type="image/png" sizes="32x32" href="/img.png"> here img.png is the image file name and see the folder structure is like
project
public -- >index.html
public -- > img.png
src
package.json
So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.
<div ng-repeat="results in userInfo.images">
<figure class="img">
<img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
</figure>
</div>
I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.
My project has the following structure:
Repositry Name
app
css
home
home.module.js
home.tpl.html
images
profilePicture.png
js
resources
app.js
index.html
Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.
I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.
I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?
Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.
Change your <img data-ng-source declaration to just use ng-src:
<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
More details at w3schools: ng-src
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.