2010-01-13 4 views
33

Je me demande s'il est possible d'obtenir la favicon d'un site web par une URL avec JavaScript.Obtenir le favicon du site avec JS

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

J'ai beaucoup d'URLs donc ça ne devrait pas charger chaque page et chercher link je pense.

Toutes les idées?

Répondre

15

Vous pouvez utiliser YQL pour cette

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 Display Feed Favicons Greasemonkey script.

Vous pouvez écrire des requêtes dans la console YQL, mais il a besoin pour se connecter (BTW, en utilisant des requêtes ne):

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%[email protected]%3D%27icon%27%5D%20%7C%20/html/head/link%[email protected]%3D%27ICON%27%5D%20%7C%20/html/head/link%[email protected]%3D%27shortcut%20icon%27%5D%20%7C%20/html/head/link%[email protected]%3D%27SHORTCUT%20ICON%27%5D%22

Il est préférable que http://www.google.com/s2/favicons?domain=www.domain.com , dans le cas où il existe favicon, mais ne se trouve pas dans domain.com/favicon.ico

+0

Il faut se connecter. – hsz

+0

J'ai mis à jour la réponse. – NVI

+0

Good Stuff .. m'a sauvé un certain temps – 5hahiL

20

Tout à coup, je trouve quelque chose appelé Google Shared Stuff qui renvoie l'image avec le favicon site par nom d'hôte:

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

Mais fot site de la BBC, il retourne favicon un peu petite. Comparez:

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

+0

Le format ICO peut avoir plusieurs images de plusieurs tailles, S2 de Google vous donne juste le 16x16 (le plus utilisé) –

+0

Google Shared Stuff a depuis été mis hors ligne. –

+3

Cette solution fonctionne toujours à compter du 17 novembre 2014 – timothyjgraham

48

Voici 2 options de travail, j'ai testé plus de 100 URL et obtenu des résultats différents qui 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' /> 
+0

est le meilleur? – coiso

+2

mon préféré est http://getfavicon.appspot.com/ – Blowsie

+7

getfavicon.org ne fonctionne plus .. –

-1

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

Obtenir l'icône au format PNG:

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

Redimensionner à 64 pixels carrés:

http://grabicon.com/icon?domain=microsoft.com&size=64 Ceci traque l'icône en utilisant les différentes méthodes que les gens peuvent mettre en œuvre, et utilise la version la plus haute résolution disponible, puisque les fichiers favicon.ico contiennent effectivement une collection d'icônes. Il utilise cette version pour la redimensionner selon vos préférences, à moins qu'une correspondance parfaite ne soit déjà disponible. Dites-moi ce que vous en pensez, et quelles autres caractéristiques vous pourriez aimer!

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é par la suite de ne pas le supporter. Mais maintenant c'est sous mon soin direct, avec une vitesse et une capacité de redimensionnement bien meilleures.

+0

Le service est payé. À partir de 9 $/mois – janot

1

Après 30.000 à 40.000 tests, j'ai remarqué que vous rencontrez beaucoup de situations différentes contre lesquelles il faut travailler. Le point de départ est bien sûr de ne regarder que la balise rel et d'aller le chercher, mais en cours de route, vous trouverez de plus en plus de situations à couvrir.

Dans le cas où quelqu'un regardera ce fil et essaie 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 Favicons, plus ou moins sur demande à l'époque, hors des limites de la norme Google (comme mentionné ci-dessus). Le code trouve 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 lirez le code, vous verrez probablement certaines situations que vous rencontrerez, par ex. base64 data uris, pages redirigeant vers 404 pages ou redirigeant un temps de gazillion, récupérant des codes de statut HTTP bizarres et vérifiant la validité de chaque code de retour HTTP possible, les icônes elles-mêmes ayant un mauvais type mime, tags de rafraîchissement côté client, icônes dans le dossier racine et aucun dans le code html, etc ... etc ... etc ...

Si vous montez un répertoire, vous trouverez d'autres classes qui sont alors nécessaires pour stocker les icônes réelles par rapport à leur URL (et Bien sûr, vous aurez besoin de savoir quelles "branches" utilisent le même favicon et qui ne sont pas, et découvrir si elles appartiennent au même "propriétaire" ou sont vraiment des parties différentes mais sous le même domaine