I have a react app and a favicon icon in the folder src. It is only shown for the root path, the other pages cannot find it. In the developer tools, it show a wrong path for a subpage, it tries to get the favicon from http://localhost:3000/faq/src/favicon.ico
index.html
<link rel="icon" type="image/svg+xml" href="src/favicon.ico">
it works for http://localhost:3000/ but not for
http://localhost:3000/faq
Putting your favicon under your public directory would be best.
|
`--- public
|
`--- favicon.ico
And then refer to it in your index.html file like this:
<link rel="icon" href="/favicon.ico" />
In React, you can also do the following:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
Related
I am having a react app. At the time of build generation, in my build folder I am getting below code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<script defer="defer" src="/static/js/main.8d8de8a8.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Now, Instead of the URLs starting with /static I want them to add a prefix automatically when build is generated such as /test/static in src as well as href tag. Please help. Thanks in advance.
To configure the react build, do the following:
run: npm run eject or yarn eject
The repository has to be at the latest commit, otherwise the command will not generate the configuration files. The command will generate configuration files for create-react-app.
Once you see that the files are generated, look for the following file:
config/webpack.config.js
With your text editor look for something like static/ you will see that it is the path configured for the static files. You can replace it with a route of your choice.
Warning: A configuration error in this file may cause your project not to compile or the development server not to start.
The meta link icon doesn't show in production nextjs but shows in localhost.
code:
const Home: NextPage<HomeProps> = () => {
return (
<div>
<Head>
<title>The Stobook</title>
<meta
name="description"
content="The Stobook is an open library where you can read any book for free. It features a customizable auto function that suggests depending on user preferences."
/>
<link rel="icon" href="/book.ico" />
</Head>
<div className={styles.index__container}>
//SomeCode
</div>
</div>
);
};
book.ico is in public folder.
It works in localhost, but doesn't show after I deployed it into vercel.
I also tried import the book.ico and href={icon.src} but thats causes error.
Issue could be related to two reasons
If you have a basePath defined in your next.config.js then your path becomes - /basepath/book.ico
NextJS vercel hosting issue - Try adding it to a images folder inside root - i.e
i.e
<link rel="icon" type="image/x-icon" href="/images/book.ico" />
There is a line of <div style={height: 50px}> where height is 50px i want to make it 0 in code but where it is located?
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo2flat.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo1922.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap" rel="stylesheet">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
There is a white spacing showing and height was the reason so I want to make it 0. I try to find in different files but i don't know where exactly it is
Any help will be appreciated
Thanks In Advance
I am assuming that you want to find react component responsible for that. You may want to use components tab in developer tools to find out which component is responsible for rendering a particular element. link - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en With that you can hover on an element and corresponding component gets highlighted.
This looks something like following -
more information about how to use that - https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html
I am new to react. Could someone help me in adding favicon to react application. I have created favicon package and added generated code to index.html. But I am not knowing how this href to favicon to be specified.
Thanks.
You can add favicon.ico to public/images then enter the index.html and add the code.
<link rel="shortcut icon" href="./images/favicon.ico">
if you have your own image then simply change this line to your image address
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
just change the favicon.ico to your image name
<link rel="shortcut icon" href="%PUBLIC_URL%/coolImage.png">
If anyone is looking in 2021.
Place your image in the Public folder and change the following icons with your ones on the following page.
/pubic/index.html
<link rel="icon" href="%PUBLIC_URL%/youricon.svg" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/youricon.svg" />
Move your favicon image in public folder.
Rename in manifesto.json name of favicon.
Update link in index.html
just rename your image with favicon.ico in public directory and it will get that img as favicon icon for your react project.
Thank You.
File name changed as favicon.ico
To change browser tab Icon just get into index.html file then as follows :-
If your img is icon then follows the below syntax :-
<link rel="icon" href="./book_icon.ico" />
If your img is png/jpg then follows the below syntax :-
<link rel="icon" href="./book_PNG.png" />
I am trying to link my favicon but nothing seems to work. I have the icon saved as "favicon.ico" in the same directory as "index.html" and am calling it as such in the tag.
<link rel="shortcut icon" href="favicon.ico" />
May be you are missing the path pointing to the favicon.
In my case it is as follows
<link rel="shortcut icon" href="/assets/images/home_favicon.ico">