I uploaded my favicon.ico to /images/favicon.ico directory and I'm using this code to link it, but it doesn't show up on my website.
What am I doing wrong?
<link rel="shortcut icon" href="/images/favicon.ico" />
Technically speaking, favicon files should be in the root directory rather than a sub-directory, and if there's a favicon.ico file in the root directory technically you don't need to declare the path at all.
If you don't call the favicon favicon.ico, you can use that tag to specify the actual path (in case you have it in an images/ directory). The browser/webpage looks for favicon.ico in the root directory by default.
If you really want to keep it in a sub-directory, do this:
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
Related
<link rel="icon" type="image/x-icon" href="/photos/icon.ico" /> so this does not work
<link rel="icon" type="image/x-icon" href="icon.ico"> but this works having the favicon in the same folder as the html one.
How do I make it so that it will show up having it saved in the photos folder?
its a path problem. you can try one of two things.
if on a live server already, you can direct it to where the file is located as this href="https://www.example.com/photos/icon.ico" (remember to path correctly if your photos folder isnt located in public_html)
if the resource is located on a local server you can try using "./" (same folder as current page) or "../"(previous folder from current page).
<link rel="icon" type="image/x-icon" href="photos/icon.ico"/>
Removing the first "/" may solve this problem. If it doesn't that is because of the images folder location. The images folder location should be inside the same folder as the html folder. HTML_folder/photos/icon.ico is what it technically is saying, but it should look like photos/icon.ico .
For some reason my favicon is not working.
I have the favicon saved as favicon.ico in the /public directory and am referencing it in the <Head> of my pages (located in the /pages directory) but to no avail.
Can anyone help?
-
Here is my code for my index.js:
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
dir/pages/index.js
dir/public/favicon.ico
Put the favicons in an /image directory inside the /public directory and put the code below in your _app.js
<Head>
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"/>
</Head>
It is possible that the .ico image was incorrectly created - perhaps converted online from a .png. This will cause the image to be viewable in the browser and elsewhere but unable to be used as a favicon.
In order to trouble shoot, try using a .png instead of .ico and see if the issue persists. If this solves your problem, consider using a converter targeted specifically for favicons, i.e. https://favicon.io/favicon-converter/
In my case, the file was in the correct place (/public/favicon.ico), was being referenced properly (href="/favicon.ico"), and was served when visiting http://localhost:3000/favicon.ico, yet it did not display in the browser tab until I reconverted it.
I was facing exactly the same issue as you did.
It seems it is necessary to put the image file in /public/images/
It turns to work properly once I have done this.
Only helpful if you are running into issues while using next basePath:
I was running into an issue where my favicon was not showing up. In my case it was because I was using basePath: '/some-base-path' in my next config. When you add a basePath it changes the path to the static assets.
Example: A basePath of /test with an image at public/favicon.ico can be referenced at /test/public/favicon.ico
Debugging note: I also had to clear my cache to see the changes (or try incognito).
In my case, I had public/ in the src/ directory.
I changed it to:
.
├── next.config.js
├── public
│ ├── favicon.ico
│ └── img
└── src
├── pages
└── styles
(moved public/ to the root .)
remove / from: /favicon.ico and your image should load if the format ico works. If it do not work convert the .ico image to .png or .jpg.
<link rel="icon" href="favicon.ico" />
I got this error while I was creating my favicon, and it turns out that i've put the wrong image format in type! For example, I did this:
<link rel="icon" type="image/png" href="/favicon.ico">
but it turns out I had to change image/png to image/x-icon because the formats didn't match.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
To continue on #joematune answer, if you converted your .ico from .png or something like that, it will probably not work out of a random website. The readme.md file in the starter kit shares a link that converts it successfully. As a bouns, it also give you a bunch of variations (16x16, 32x32, apple-touch, etc.). Just replacing the old files with the new ones worked for me without modifying anything.
this is the link
If you think your configuration is correct but it's not still working, clear .next folder and run yarn build once again. Changes should apply this time.
I have a favicon in the head of all the pages on my site. However it is not appearing on any of the pages in the main directory of my site.
I have two versions of my site one for testing and one that is live for the public.
In my root directory, all of the files have the following two lines:
<base href='https://example.com/'>
<link rel="shortcut icon" type="image/ico" href="web/favicon.ico"/>
And in my beta directory:
<base href='https://example.com/beta/'>
<link rel="shortcut icon" type="image/ico" href="web/favicon.ico"/>
I have verified that the image exists in both of these locations:
https://example.com/web/favicon.ico
https://example.com/beta/web/favicon.ico
However it only works in my beta directory and I have no idea why. Any ideas or assistance with this would be greatly appreciated.
//place your image icon in a specified path
//add that code in your html code
<link rel="shortcut icon" type="image/ico" href="images/favicon.png"/>
It could be related with some security access policy.
Maybe the favicon you have in beta directory can be read by everyone, and the other one can't.
In a linux system, you may try this:
sudo chmod +r yourprojectpath/web/favicon.ico
So that the favicon.ico file can be read from all programs are running over the server.
Hope it could be useful.
I put the favicon in the html like this:
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
...but when visited with Google Chrome it shows the logo of Google Drive instead of my favicon.
This doesn't happen on Firefox, only on Chrome. So is there any way how to force MY favicon to show on google drive hosted webpages? thank you!
Adding a querystring to my filename worked for me:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=2" />
See: "How do I force a favicon refresh"
From the Google Drive Product Forums:
<link rel="shortcut icon" href="favicon.ico" type="x-icon">
<link rel="icon" href="favicon.ico" type="x-icon">
https://productforums.google.com/forum/#!msg/drive/03pmip5YJiY/WVTn_2qGm4cJ
I'm using a Styleshout template and hosting it on Google Drive. The code they have in the header of the index.html file is:
<link rel="shortcut icon" href="favicon.png" >
And whatever I put as "favicon.png" in the root directory of the site shows up as the favicon.
I added this code to the header of a different site that was displaying the Google Drive icon and it started displaying whatever I put as "favicon.png" instead.
They are using a .png file instead of an .ico file, but it works. Furthermore, you can use other sizes of .png files, rather than just 16x16.
You have to construct your url with the folder id that contains your index.html (and js, favicon, css) instead of the file id of the index.html (I suppose that this is what you are doing because i had the same problem).
No use this id:
Use this instead:
Where "casacas" is the folder where you put the index.html file and the favicon.ico (plus js, css, images) and configured with public access.
Then, in your html simple use:
<link rel="icon" href="favicon.ico">
My web page is not actually live on the internet. I have it saved on my computer and I am simply opening the HTML file from my computer- the navigation of the website is all on my computer. Anyway, before I put my site live on the internet, I want to test out all my code, including my favicon. My favicon is not showing up, though. Here is the code I found to be most recommended so far:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Try "shortcut icon" instead of "icon":
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
And note that the path to your favicon is relative to the html file. If both are in the same directory, the path is just "favicon.ico", no slash.
favicon.ico must be in your root folder, same place where is your index.html, and of course you must have a localhost server
<link href="favicon.ico" rel="shortcut icon">
The link element is correct as such (though the type attribute is redundant, and all that it could achieve is to prevent a browser from using the icon), but the URL /favicon.ico is relative and generally does not work when the HTML document is local. A locally accessed HTML document has a file: URL, and such URLs are by definition system-dependent, and in practice they also depend on the browser, too. For example, in a typical Windows system, in you placed favicon.ico directly in the root of the C: disk (requiring normally admin privileges for that), Chrome would find it, Firefox wouldn’t, as they use different file: URLs when you open local files.
So in local testing, you should normally use relative URLs that are relative to the current document, e.g. as in href=favicon.ico (when favicon.ico is in the same folder as the referring HTML file) or as in href=../images/favicon.ico (when favicon.ico is in an images folder that is a sibling of the folder where the referring HTML file lies).
If you need to test locally with URLs that relative to the server root, you should download and install a local HTTP server, such as XAMPP.