Иконка favicon возле ссылок на сторонние сайты

Категория: Design/UI/CSS

Возможно вам захочется (потребуется) отобразить иконку сайта (favicon) возле каждой ссылки ведущей на этот домен. Решение позволяет обойтись только средствами CSS (CSS3 для background-size). В данном решении вам не придется искать иконки нужных сайтов, необходимо будет лишь определить список доменов для ссылок на которые необходимо будет отображать иконку возле ссылки.

Демо пример вы можете поюзать на jsfiddle. Я приведу CSS код для одного домена:

a[href*="github.com"]{
  padding-left: 15px;
  background: url(http://www.google.com/s2/u/0/favicons?domain=github.com) left center no-repeat;
  background-size: 13px;
}

Приведу также решение на JavaScript/jQuery:

$('a[href^="http"]').each(function() {
  $(this).css({
    'padding-left':    '15px',
    'background': 'url(http://www.google.com/s2/u/0/favicons?domain='
                  + getDomain(this.hostname) + ') left center no-repeat',
    'background-size': '13px'
  });    
});
Примечание

Вместо гугла можно использовать альтернативные ресурсы для  определения favicon:

http://favicon.yandex.net/favicon/google.com
http://g.etfv.co/http://google.com

#icon, #favicon