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
Related
I am trying to add a new favicon logo to a Gatsby site on Contentful. Do I put it in Contentful or in the code on Gatsby? Also with that being said, is there a way to make the Favicon animated as well?
I should add, there are not index.html files available unless I make
one
The index.html is created when you build the site (gatsby build) and it's placed under /public folder. You should avoid creating or placing autogenerated files because they will be overridden according to the source code placed under /src folder. Take a look at Gatsby's folder structure for more details:
/public: Automatically generated. The output of the build process will be exposed inside this folder. Should be added to the
.gitignore file if not added already.
/src: This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the
browser), like your site header, or a page template. “src” is a
convention for “source code”.
Regarding the favicon, you can choose whatever option works better for you.
Using gatsby-plugin-manifest (preferred way): just add the following configuration in your gatsby-config.js:
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `standalone`,
icon: `src/images/icon.png`,
},
},
The icon attribute stands for the favicon. The path is relative to the root of the site and it must be valid, otherwise, the compilation will fail.
Using Contentful: if you choose that option, you must be aware that the favicon asset must be statically analyzed. This means that you need to fetch Contentful data in order to create the favicon node. This way will force you to use the Helmet component to customize the <header> tag:
<Helmet>
<meta name="icon" href=`${data.edges.nodes.contentfulAssetNode.localFile}` />
</Helmet>
In this case, the href will be the path of the Contentful GraphQL generated favicon. It should be local, hence the downloadLocal option should be set to true. Without further implementation details, it's impossible to know what your GraphQL structure should look like.
Using a built-in solution: this is likely the previous one but using a local path like:
<Helmet>
<meta name="icon" href=`/favicon.ico` />
</Helmet>
You can use the static folder (in the previous case will be /static/favicon.ico) to create a valid public path or import the asset directly like:
import favicon from 'path/to/favicon.ico'
...
<Helmet>
<meta name="icon" href={favicon} />
</Helmet>
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 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
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.