Can I display favicon from inside an iframe?

Question

I have another site running inside a webpage as an iframe. However it's not displaying the favicon. I think it's not possible but just wanted to double confirm if someone knows of a way.

score 1 · Answer 1 · answered May 28 '14 at 04:15

May be something like this in your child page i.e. page inside iFrame :

(function() {
  var link = parent.document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = 'http://www.stackoverflow.com/favicon.ico';
  parent.document.getElementsByTagName('head')[0].appendChild(link);
}());

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

You can set a favicon by modifying the HTML, i.e. by adding:

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

to the <head> (or changing the existent link).

You can also access DOM of the top document if both the top document and the iframe are on the same domain.

Example:

master = window.parent.document;
head = master.getElementsByTagName("head")[0];
favicon = master.createElement("link");
favicon.rel = "shortcut icon";
favicon.type = "image/png";
favicon.href = "//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=038622610830";
head.appendChild(favicon);

sets the icon of the page to Stack Overflow favicon.

edited May 23 '17 at 11:52

Community

1
1

answered May 28 '14 at 03:54

Arseni Mourzenko

50,338
35
112
199

No they are in different domains. I guess my only option then is to modify the html of the top document and add the favicon as you have suggested. – user1448031 May 28 '14 at 04:08
Indeed, if they are on different domains, you have to modify the top document itself. – Arseni Mourzenko May 28 '14 at 04:18
Does the same principle apply with `framesets` and `frames`? – user1448031 May 28 '14 at 04:37
@user1448031: I believe it does. – Arseni Mourzenko May 28 '14 at 04:39

Can I display favicon from inside an iframe?

2 Answers2