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">
Related
Since one month I always tried to fix my mobile SERP favicon and google recrawled my site many times in the meantime. Even though it's still not working. The GSC isn't showing it either, same with Lighthouse...
What have I done wrong?
Here is my favicon code:
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="https://eselsbruecken-generator.de/data/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://eselsbruecken-generator.de/data/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://eselsbruecken-generator.de/data/favicon-16x16.png">
<link rel="manifest" href="https://eselsbruecken-generator.de/data/site.webmanifest">
<link rel="mask-icon" href="https://eselsbruecken-generator.de/data/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="https://eselsbruecken-generator.de/data/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/data/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- favicon end -->
I am grateful for anything helpful...
Have a nice day!
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" />
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 want to add a favicon to my react application but it doesn't seem to working.
Tried the below:
add the code to the index.html file in the head section
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
Also placed the icons in the same folder as index.html. Could you please let me know where the problem persists.
Thanks.
Remember to add %PUBLIC_URL% to all your href attributes in index.html
For example;
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
That should fix your issue.
Now I am making Angular JS app.No error is shown in terminal, but by using Google's verification, many errors are shown in console like
I wrote in html file like
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.min.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css" />
so I think href cannot be found in program, for example href="bower_components/angular-ui-select/dist/select.css"
bower_components is under User directory so I added User/ to href, it is like
<link rel="stylesheet" href="User/bower_components/selectize/dist/css/selectize.css" />
However,same error happens.How can I fix this?I think url is wrong, but another thing cause error?