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.
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 .
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">
I am trying to set a favicon.ico for my github page, but it doesn't work. When I serve it locally I see the standard "empty" favicon and when I push it I see the facebook icon. Why is it so? I have the right favicon.ico in the root directory of my project and I added the line
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
to the relevant default.html. You can see the sources here: https://github.com/drorata/drorata.github.io
I cloned your project from GitHub to take a look at it. After serving it using Jekyll, the favicon did not display, as you noted.
I did some quick testing by converting the favicon file to be a .png rather than a .ico file and changing the favicon declaration to the following, and that was able to get it to display the favicon.
<link rel="shortcut icon" type="image/png" href="/favicon.png">
I tried getting the favicon to work while keeping the .ico file format, and was unable to do so at first. However, I did some quick searching and came across this question, favicon not displayed by Firefox.
In that question the asker had a similar issue with the favicon not showing, and was eventually able to come up with a quick fix by adding a ? to the end of the link to the favicon file in the favicon declaration. I attempted this and it worked. Here is what the favicon declaration would be:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">
Either of those two methods seem to be able to fix your issue. Personally I'd recommend using the first method, whereby you convert the image to a .png file, as it seems a bit simpler and less hacky.
However, if you want to keep the file as a .ico file then you should read over the question that I linked to before you attempt the second method, as the accepted answer for the question differed from that solution. Also I'm not sure as to why the second method works, and it does seem a little bit hacky.
I believe, currently, the correct way to do this is:
<link rel="shortcut icon" type="image/png" href="{{ "/favicon.png" | prepend: site.baseurl }}" >
Assuming you are using a png. The following also worked for me with a .ico instead of .png:
<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >
I was working with Chrome on Linux. Neither Excalibur Zero's answer or Ribtoks answer worked for me.
Quick solution
Leave the slash out to make the href address relative.
For example:
Change
<link rel="shortcut icon" type="image/png" href="/favicon.png">
to:
<link rel="shortcut icon" type="image/png" href="favicon.png">
In my github pages site this works perfectly.
Explanation
Use my site https://hustlion.github.io/spanish-cards/ as an example:
When you use <link rel="shortcut icon" type="image/png" href="/favicon.png">, the icon address will be https://hustlion.github.io/favicon.png, because the root of the site (as specified by the slash in /favicon.png) is https://hustlion.github.io/.
However, when you use <link rel="shortcut icon" type="image/png" href="favicon.png">, this is relative to the path https://hustlion.github.io/spanish-cards/, so the icon address will be resolved properly as https://hustlion.github.io/spanish-cards/favicon.png.
Notes
This path issue happens especially when you are using github pages for your specific repository.
I use
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >
And I have favicon in folder images.
Nothing above worked for me, but the steps in this vid (assuming the minima theme) did.
1) Add _includes directory to your project root
Terminal: find _includes/head.html by typing bundle show minima
Copy _includes/head.html from finder into your project root
2) Modify _includes/head.html to include favicon link
The following works for me: <link rel="shortcut icon" type="image/png" href="/favicon.png">
Important: the / in front of /favicon.png matters. Without the /, your website root will have your favicon but no other endpoints will.
3) Add the jekyll-seo-tag plugin to your _config.yml. It should look something like this:
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
- jekyll-seo-tag
according to documentation:
1) put favicon.ico file into assets/images folder of jekyll project as assets/images/favicon.ico
2) create a _includes/head_custom.html file if not yet exists
3) add needed overriding content:
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/favicon.ico">
Done.
I got it to working using:
<!-- Add favicon -->
<link rel="shortcut icon"
type="image/png"
href="{{ '/favicon.png' | relative_url }}" >
Notes on the snippet:
PNG format for the favicon,
a relative URL in the HTML head tag (in minimia this is head.html).
Adding relative_url tells Liquid to prepend the url and baseurl to the given path.
Just in case someone will be looking for this. Both approaches didn't work for me. But when I appended the site.url, it worked
<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">
In my case, I had to add the favicon.ico file to the assets folder and reference it as follows:
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">
I couldn't get the images to display and I use markdown for my posts, appending what worked for me so that others may benefit.
This works both locally and on github pages as well
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">
M designing a website using DW. I wanted to add a favicon to my website so when I did and view the website, it dsn't show up the icon. I used a 16 x 16 png as the image and the coding is given below. what might I have done wrong. please help me!
thank you.
<link rel="icon" type="image/png" href="favicon.png">
Internet Explorer does not support a PNG favicon.
What you should do, is setup your <link tag like so:
<link rel="shortcut icon" type="image/png" href="favicon.png" />
For IE, and legacy browsers, also keep a less-pretty (by the fact it's an ICO, not intentionally!) version of your icon in .ico format in the root of your site named favicon.ico. You can use http://icoconverter.com/ to convert your PNG to an ICO. Don't just rename favicon.png to favicon.ico and expect it to work.
wrong file extension.. it's supposed to be .ico instead of .png
go here for all the info:
http://tools.dynamicdrive.com/favicon/
EDIT:
Try going on the link and converting your favicon to ico
then add this <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> to your main page.
make sure the favicon exists in that directory.