Favicon does not work when redirecting a GitHub-pages page to my own domain

Question

Favicon does not work when redirecting a GitHub-pages page to my own domain

Good Morning, I have a page mounted on github pages: http://ludicultura.github.io/ludiweb /

If the page is opened from that link, the favicon works perfectly, but buy a domain on goDaddy to redirect that page and masking it to use my domain: ludicultura.com and that's where the favicon doesn't work.

(both links are working, so you can try them.)

Try the option to add a"?" at end of "href":

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">

And also try it by changing my icon to png:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

But nothing works, what's going on?

Source Code and all repository changes with my project: https://github.com/ludicultura/ludiweb

3

Author: Rubén, 2016-09-03

Source

2 answers

score 2 · Answer 1

I think they are several issues related to the path you are using and/or the way you target your domain.

First of all you are using a iframe to mask the page. On the page you call iframe, there is no mark of favicon. This is what a browser sees when visiting the site ludicultura.com:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <title>ludicultura.com</title>

</head>
<frameset rows="100%,*" border="0">
  <frame src="http://ludicultura.github.io/ludiweb/" frameborder="0" />
  <frame frameborder="0" noresize />
</frameset>

<!-- pageok -->
<!-- 01 -->
<!-- -->
</html>%

You could use a alias, called CNAME to make your site work better.

Second, the generating your static page (you do not indicate how you are generating your site) does not work. This is what you see when querying the source code of ludicultura.github.io/ludiweb/:
```
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/favicon.ico">
```

Conclusion

uses a canonical name, alias, or CNAME instead of iframe.
fix the issue with your page builder or type your site URL directly.

score 1 · Answer 2

The code should be this.

<link rel="icon" href="favicon.ico"></link>

Also I noticed another problem, the favicon.ico of your repository on GitHub has another problem, which has dimensions of 31x31, when it should be 16x16.

I would recommend that you upload a 16x16 png file to the same directory where the favicon is.ico and then you change it for this code, it is not necessary to clarify whether the type is ico or png, that is, the format of the file.

<link rel="icon" href="favicon.png"></link>