Obtenez le favicon du site Web avec JS

Je me demande s'il est possible d'obtenir le favicon d'un site Web par une URL avec JavaScript.

Par exemple, j'ai une URL http://www.bbc.co.uk/ et je voudrais obtenir le chemin vers favicon décrit dans <link rel="icon" .../> meta tag - http://www.bbc.co.uk/favicon.ico.

J'ai beaucoup D'URL, donc cela ne devrait pas charger chaque page et rechercher la balise link je pense.

Des idées ?

35
demandé sur hsz 2010-01-13 18:10:27

5 réponses

Vous pouvez utiliser YQL pour cela

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D"http://bbc.co.uk/"and%20xpath%3D"/html/head/link[@rel%3D'icon']%20|%20/html/head/link[@rel%3D'ICON']%20|%20/html/head/link[@rel%3D'shortcut%20icon']%20|%20/html/head/link[@rel%3D'SHORTCUT%20ICON']"&format=json&callback=grab

Cette requête utilisée par affiche le flux Favicons Greasemonkey script .

Vous pouvez écrire des requêtes dans la console YQL, mais il faut se connecter (btw, en utilisant les requêtes ne le font pas):

http://developer.yahoo.com/yql/console/#h=select%20*%20from%20html%20where%20url%3D%22http%3A//bbc.co.uk/%22and%20xpath%3D%22/html/head/link%5B@rel%3D%27icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27ICON%27%5D%20%7C%20/html/head/link%5B@rel%3D%27shortcut%20icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27SHORTCUT%20ICON%27%5D%22

C'est mieux que http://www.google.com/s2/favicons?domain=www.domain.com , dans le cas où favicon existe, mais ne se trouve pas dans domain.com/favicon.ico

15
répondu NVI 2010-01-13 15:39:59

Voici 2 Options de travail, j'ai testé plus de 100 URL et j'ai obtenu des résultats différents pour chaque option. Veuillez noter que cette solution n'est pas JS, mais JS peut ne pas être nécessaire.

<!-- Free --> 
<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.edocuments.co.uk' />
<!-- Paid -->
<img height="16" width="16" src='http://grabicon.com/edocuments.co.uk' />
49
répondu Blowsie 2016-04-15 08:08:00

Soudain, j'ai trouvé quelque chose appelé Google Shared Stuff qui renvoie l'image avec le favicon du site Web par nom d'hôte:

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

Mais fot BBC site il retourne favicon un peu petit. Comparer:

Http://www.google.com/s2/favicons?domain=www.bbc.co.uk
http://www.bbc.co.uk/favicon.ico

20
répondu hsz 2010-01-13 15:18:19

Après 30.000 à 40.000 tests, j'ai remarqué que vous rencontrez vraiment beaucoup de situations différentes contre lesquelles il faut travailler.

Le point de départ est bien sûr quelque part pour ne regarder que la balise rel et aller chercher ceci, mais en chemin, vous trouverez de plus en plus de situations que vous devrez couvrir.

Au cas où quelqu'un regarderait ce fil et essaierait de se rapprocher de la perfection à 100% j'ai téléchargé mon code (PHP) ici: https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php . Cela fait partie d'un Plugin WordPress (GPL) qui récupère les Favicons, plus ou moins sur demande à l'époque, hors des limites de la norme Google one (comme mentionné ci-dessus). Le code trouve une quantité sensiblement plus d'icônes que le code de Google. Mais inclut également google et d'autres en tant que fournisseurs d'images pour raccourcir d'autres itérations en essayant de récupérer l'icône.

Lorsque vous lisez le code vous verrez probablement certaines situations que vous rencontrerez, par exemple les URI de données base64, les pages redirigeant vers des pages 404 ou redirigeant un million de fois, récupérant des codes D'état HTTP étranges et devant vérifier la validité de tous les codes de retour HTTP possibles, les icônes elles-mêmes qui ont un type mime incorrect, les balises.. etc... etc...

Si vous allez dans un répertoire, vous trouverez d'autres classes qui sont alors icônes réelles par rapport à leur url (et bien sûr, vous devrez alors savoir quelles "branches" utilisent le même favicon et lesquelles ne le sont pas, et savoir si elles appartiennent au même "propriétaire" ou si elles sont vraiment différentes mais sous le même domaine.

1
répondu edelwater 2016-04-10 23:24:03

Avertissement: j'ai construit ce service moi-même, mais vous pouvez essayer http://grabicon.com . c'est une API très simple pour favicons qui gère le redimensionnement et le reformatage à la volée. Il utilise beaucoup de mise en cache proactive pour la vitesse, ainsi. Comme la plupart des autres services comme celui-ci, vous pouvez l'insérer directement dans votre code HTML et cela fonctionne très bien. Je n'ai pas encore de documentation en ligne, mais voici quelques exemples utilisant la destination web préférée de tout le monde:

Récupère L'icône en PNG format:

http://grabicon.com/icon?domain=microsoft.com

Redimensionner à 64 pixels carrés:

Http://grabicon.com/icon?domain=microsoft.com&size=64

Cela chasse l'icône en utilisant les différentes méthodes que les gens peuvent les implémenter, et utilise la version la plus haute résolution disponible, depuis favicon.les fichiers ico contiennent en fait une collection {[15] } d'icônes. Il utilise cette version pour redimensionner à votre préférence, sauf si une correspondance parfaite est déjà disponible.

Faites-moi savoir ce que vous pensez, et quoi d'autres fonctionnalités que vous aimeriez!

Mise à jour:

Grabicon est maintenant de retour en service, et il ne va nulle part. Il a été construit à l'origine pour un client qui a décidé plus tard de ne pas le supporter. Mais maintenant, il est sous mes soins directs, avec une vitesse et une capacité de redimensionnement bien meilleures.

-1
répondu Jaime Bellmyer 2015-01-22 17:34:44