what is the trick Facebook uses to inject its icon onto a linked page?
chromium, facebook, favicon
Solution
When I do a GET request to http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBwCjI4mWPFI&h=yAQG6-ic8AQF_aOjn3QCJxdul6VnDN1Ho_ltT2gX90NF-vQ, I get the following response (I added some line breaks in the HTML for readability):
HTTP/1.1 200
Content-Length: 349
Cache-Control: private, no-cache, no-store, must-revalidate
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
Pragma: no-cache
Refresh: 1;URL=http://www.youtube.com/watch?v=BwCjI4mWPFI
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Set-Cookie: ***removed***
Content-Type: text/html; charset=utf-8
X-FB-Debug: ***removed***
Date: Fri, 27 Apr 2012 00:49:25 GMT
Connection: close
<html>
<head></head>
<body>
<script type="text/javascript">
document.location.replace("http:\/\/www.youtube.com\/watch?v=BwCjI4mWPFI");
</script>
<script type="text/javascript">
setTimeout("(new Image()).src=\"\\\/laudit.php?r=JS&u=http\\u00253A\\u00252F\\u00252Fwww.youtube.com\\u00252Fwatch\\u00253Fv\\u00253DBwCjI4mWPFI\";",5000);
</script>
</body>
</html>
A short trial learns that the `Refresh` header is enough to let this work. This is a simple implementation in PHP:
<?php
header("Refresh: 1;URL=http://www.a-website-without-favicon.com/");
?>
But, as stated earlier: this only works if the website you're referring to doesn't have a favicon.
Problem
when A posts a link on Facebook, and then B clicks that link in Chrome (not in Firefox, and haven't tested others), B sees the Facebook white "f" on blue background icon (favicon.ico) shown on the tab of the linked page. sometimes, presumably when the page has its own favicon, refreshing that tab will replace the icon with the correct one; but most often the Facebook favicon remains. at first I believed Facebook was using frames in some tricky way, but using View Source, that appears not to be the case. how would one program an href or redirect in such a way as to preload one's own favicon onto a linked page as Facebook does? here's what I've tried without success, my icon gets replaced with nothing (and only shows in both the tab and navbar in Firefox, only in the tab in Chromium, but that's beside the point): http://unixshell.jcomeau.com/tmp/linktest/index.html ``` jcomeau@unixshell:~/www/www/tmp/linktest$ cat index.html <html> <head> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <a href="redirect.html?url=http://homesteadingsurvivalism.myshopify.com/">homesteadingsurvivalism.myshopify.com</a> </body> </html> jcomeau@unixshell:~/www/www/tmp/linktest$ cat redirect.html <html> <head> <link rel="shortcut icon" href="favicon.ico" /> <script language="javascript" type="text/javascript"> var newpage = window.location.search.substring(5); window.setTimeout('window.location = newpage; ', 3000); </script> </head> <body> <p>Redirecting to selected site, please wait...</p> </body> ``` after Yan's comment I also tried with no success redirect.cgi: ``` jcomeau@unixshell:~/www/www/tmp/linktest$ cat redirect.cgi; QUERY_STRING=url=http://this.is.a.test/ ./redirect.cgi #!/bin/bash echo -ne "Content-type: text/html\r\n" echo -ne "Location: ${QUERY_STRING:4}\r\n" echo -ne "\r\n" cat <<-EOF <html> <head> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> Redirecting to ${QUERY_STRING:4} </body> </html> EOF Content-type: text/html Location: http://this.is.a.test/ <html> <head> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> Redirecting to http://this.is.a.test/ </body> </html> ```