javascripthtmlframefaviconframeset

Changing favicon from within a child frame

I have a domain parent.example that is set up by the provider to forward "with masking" to child.example. This means the URL "parent.example" remains in the address bar, and the content from child.example is shown using a frameset.

I would like to add a custom favicon.

So far I have tried, on the child.example page:

<script type="text/javascript">
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  link.href = "http://www.child.example/img/favicon.ico";
  parent.getElementsByTagName("head")[0].appendChild(link);
</script>

But this isn't working.

The HTML for parent.example is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>My Title</title></head>
<frameset rows="100%,*" border="0">
  <frame src="http://child.example" frameborder="0" />
  <frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 07 -->
<!-- -->
</html>

Any ideas?

Solution

  • You can't.

    The browser shows the fav icon for the page loaded into the top level frame.

    A page loaded into a frame inside that page can't modify that page (same origin policy) so it can't add any favicon data with JS.

    The solution is to get at least half-decent hosting.