How to grab favicons and load them on my site from sites i am linking to?

Question

Lets say I have 5 links on my site. (these 5 links are not like normal links on my site.) These 5 links are in list format. 1 on top of the other like so:

Link 1
Link 2
Link 3
Link 4
Link 5

The goal here is when a visitor loads my page all the favicons for all the links on my site will appear to the left of their site. Not ALL the links. Not the nav, and other links, just the links I specify. I'll have each set of these links in a div with a specific class/id. (Not sure if that matters, just noting it.)

by visiting Googles S2 Converter you can obtain the favion of any site. That is done by visiting

http://www.google.com/s2/favicons?domain=www.fbi.gov

Maybe there is a way to write a javascript code or PHP code to take the img received from this request and place it in a certain div or data element?

Thanks!

"take the img received from this request and place it in a certain div or data element" --> You mean like ``? — jszobody, Dec 06 '13 at 00:58

score 2 · Accepted Answer · answered Dec 06 '13 at 01:07

1) Add a special class to the links you want to modify. For example:

<a class="link-fav" href="www.mysite.com">Link A</a>

2) With JavaScript, select all elements with that class, extract the target url and insert a new image in the DOM with the favIcon url as source.

With jQuery would be something like (not tested):

$('.link-fav').each(function(link){
  var url = link.attr('href');
  var favIcon = 'http://www.google.com/s2/favicons?domain='+url;
  var img = $('<img/>').attr('src', favIcon);
  img.insertBefore(link);
});

Arian Faurtosh · Answer 2 · 2013-12-06T01:15:14.447

1

<?php 

$url[] = 'http://www.facebook.com/';
$url[] = 'http://www.myspace.com/';
$url[] = 'http://www.apple.com/';
$url[] = 'http://google.com/';

foreach($url as $value)
    echo '<img src="http://www.google.com/s2/favicons?domain='.$value.'" /> <br>';

?>

edited Dec 06 '13 at 01:15

answered Dec 06 '13 at 01:01

Arian Faurtosh

17,987
21
77
115

I need to get the favicon for multiple websites. There will be over a few thousand links. That much PHP would destroy my server. If it was to grab one it would be alright. – user2833068 Dec 06 '13 at 01:04
@user2833068 just make it into a function, i doubt it will destroy your sever... PHP is greatly optimized... – Arian Faurtosh Dec 06 '13 at 01:05
In agreement with @Arian Just loop through array of favicon gets using foreach – DrewT Dec 06 '13 at 01:07

score 1 · Answer 3 · answered Dec 06 '13 at 01:03

You just call it as you would any other html < img /> with the google link as src:

<img src="http://www.google.com/s2/favicons?domain=www.fbi.gov" />

See jsfiddle for live example: http://jsfiddle.net/n67N2/2/

Example uses unordered list format ( < ul> ) I assumed that's what you meant by links in list format.

How to grab favicons and load them on my site from sites i am linking to?

3 Answers3