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" />
Related
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" />
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" />
Hello in my react js project I include <link> 's of blueprint.js library but browser does not recognize them. Instead I import them in index.js file then it works. Can someone briefly explain why browser does not recognize them?
index.html
<link rel="stylesheet" type="text/css" href="./src/index.css" />
<!-- add other blueprint-*.css files here -->
<link href="./node_modules/normalize.css/normalize.css" rel="stylesheet" />
<!-- blueprint-icons.css file must be included alongside blueprint.css! -->
<link href="./node_modules/#blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
<link href="./node_modules/#blueprintjs/core/lib/css/blueprint.css" rel="stylesheet"/>
index.js
import 'normalize.css'
import '#blueprintjs/core/lib/css/blueprint.css'
import '#blueprintjs/icons/lib/css/blueprint-icons.css';
when i comment out of my import index.js web browser does not include links why?
node_modules won't exist when you build your project, so it is outside of scope. You would only be able to reference things from the index.html that are within the public folder or externally (like a CDN)
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">
I've downloaded the script for the latest version of lightbox2. I've added both .js files as well as the .css file to my head tag. I've used the new attributes in my code for the images, and I've made sure all the files are in the folder that they're supposed to be in. Still, I cannot get the functionality of when you click the thumbnail, the larger image pops out.
Please help. Here is my head:
<head>
<meta charset="UTF-8" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Amatic+SC' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" HREF="index.css" />
<link href="css/lighbox.css" rel="stylesheet" />
<title>
Welcome! | DaveAyotte.com
</title>
</head>
And here is the section where I'm showing the pictures:
<div class="photobox">
<img src="img/img1thumb.jpg" />
<img src="img/img2thumb.jpg" />
<img src="img/img3thumb.jpg" />
<img src="img/img4thumb.jpg" />
<img src="img/img5thumb.jpg" />
</div>
edit: I actually just noticed that instead of creating a popout as it's supposed to, it's opening the picture outside of the main div of my website (used to hold everything in a uniform size), creating a scroll-bar that needs to be scrolled down a long way to view the clicked image.
Please check the lightbox.css file to see if its linked properly or not and add type attribute as well in the link tag of lightbox.css
You need to add rel attribute under anchor tag like this
<a href="color lef.jpg" data-type="album" rel="lightbox" >
<img src="color lef.jpg" width="100" height="100" />
</a>
<link href="css/lighbox.css" rel="stylesheet" />
should be
<link href="css/lightbox.css" rel="stylesheet" />
There is a spelling error in 'light'. Your original code is missing the 't'.