2010-01-13 121 views
33

Me pregunto si es posible obtener el favicon de un sitio web mediante una URL con JavaScript.Obtener el favicon del sitio web con JS

Por ejemplo, tengo una URL http://www.bbc.co.uk/ y me gustaría obtener la ruta al favicon descrito en <link rel="icon" .../> metaetiqueta - .

Tengo muchas URL, así que no debería cargar todas las páginas y buscar link etiqueta, creo.

¿Alguna idea?

Respuesta

15

usted podría utilizar YQL para que

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

Esta consulta utilizado por Display Feed Favicons Greasemonkey script.

Puede escribir consultas en la consola YQL, pero se requiere para iniciar la sesión (por cierto, el uso de consultas no):

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

Es mejor que http://www.google.com/s2/favicons?domain=www.domain.com , en caso favicon existe, pero no se encuentra en domain.com/favicon.ico

+0

Requiere iniciar sesión. – hsz

+0

He actualizado la respuesta. – NVI

+0

Cosas buenas ... me salvó algo de tiempo – 5hahiL

20

De repente me encontré con algo que se llama Google Shared Stuff que devuelve la imagen con el favicon del sitio web mediante el nombre de host:

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

Pero fot sitio de la BBC que devuelve favicon un poco pequeña. Compare:

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

+0

El formato ICO puede tiene múltiples imágenes de varios tamaños, el S2 de Google solo le ofrece el 16x16 (el más usado). –

+0

Google Shared Stuff ha sido desconectado. –

+3

Esta solución sigue funcionando desde el 17 de noviembre de 2014 – timothyjgraham

48

Aquí hay 2 opciones de trabajo, he probado más de 100 URL y obtuve resultados diferentes que cada opción. Tenga en cuenta que esta solución no es JS, pero JS puede no ser necesario.

<!-- 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

que uno ¿es mejor? – coiso

+2

mi favorito es http://getfavicon.appspot.com/ – Blowsie

+7

getfavicon.org ya no funciona .. –

-1

responsabilidad: he construido este servicio a mí mismo, pero se puede tratar http://grabicon.com. Es una API muy simple para favicons que maneja el cambio de tamaño y reformateo sobre la marcha. Utiliza una gran cantidad de almacenamiento en caché proactivo para la velocidad, también. Como la mayoría de otros servicios como este, puede insertar esto directamente en su HTML y funciona muy bien. No tengo documentación en línea todavía, pero aquí hay algunos ejemplos que utilizan destino web favorito de todos:

obtener el icono en formato PNG:

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

cambio de tamaño a 64 píxeles cuadrados:

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

Esto busca el ícono utilizando los diversos métodos que las personas pueden implementar, y utiliza la versión de mayor resolución disponible, ya que los archivos favicon.ico contienen una colección de iconos. Utiliza esa versión para cambiar el tamaño a su preferencia, a menos que una coincidencia perfecta ya esté disponible.

¡Avísame qué piensan y qué otras características les pueden gustar!

ACTUALIZACIÓN:

Grabicon está ahora de nuevo en funcionamiento, y no va a ninguna parte. Originalmente fue diseñado para un cliente que luego decidió no admitirlo. Pero ahora está bajo mi cuidado directo, con mucha mejor velocidad y capacidad de cambio de tamaño.

+0

Se paga el servicio. A partir de $ 9/mes – janot

1

Después de 30,000 a 40,000 pruebas noté que realmente enfrenta muchas situaciones diferentes contra las cuales hay que luchar.

Por supuesto, el punto de partida es mirar desde allí la etiqueta rel y buscarla, pero a lo largo del camino encontrará más y más situaciones que deberá cubrir.

En caso de que alguien mire este hilo e intente acercarse al 100% de perfección, cargué mi código (PHP) aquí: https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php. Esto es parte de un plugin de WordPress (GPL) que recupera Favicons, más o menos a pedido en ese momento, sin las limitaciones del estándar de Google (como se mencionó anteriormente). El código encuentra una cantidad sustancialmente mayor de iconos que el código de Google. Pero también incluye a google y a otros como proveedores de imágenes para atajar más iteraciones al tratar de recuperar el ícono.

Cuando lea el código, probablemente verá algunas situaciones que encontrará, p. base64 data uris, páginas redireccionando a 404 páginas o redirigiendo miles de veces, recuperando códigos de estado HTTP raros y teniendo que verificar la validez de todos los códigos de retorno HTTP posibles, los iconos mismos que tienen un tipo de mime incorrecto, etiquetas de actualización del lado del cliente, iconos en el carpeta raíz y ninguna en el código html, etc ... etc ... etc ...

Si sube un directorio, encontrará otras clases que luego almacenarán los iconos reales contra su url (y por supuesto, necesitará averiguar qué "ramas" usan el mismo favicón y cuáles no, y averiguar si pertenecen al mismo "dueño" o si son realmente partes diferentes pero bajo el mismo dominio.

Cuestiones relacionadas