image - poner - get favicon

Cómo obtener el logotipo del sitio web de alta resolución(favicon) para una URL determinada (4)

El código Go en Besticon intenta resolver este problema.

Por ejemplo

$ besticon http://github.com http://github.com: https://github.com/apple-touch-icon-144.png

También hay una versión alojada adjunta del código, ver por ejemplo http://icons.better-idea.org/icons?url=github.com .

(Descargo de responsabilidad: Lo escribí porque tenía que resolver el mismo problema hace un tiempo).

Estoy desarrollando un navegador web en Android y quiero mostrar el logotipo de la URL para los sitios más visitados como en Chrome (4 X 2). Pero el problema es que la mayoría de los favicons (por ejemplo, http://www.bbc.co.uk/favicon.ico ) tienen un tamaño de 16X16 o 32X32 y no se ven bien cuando se amplían.

¿Hay alguna manera de descargar un ícono / mapa de bits de alta resolución para una URL de manera estándar? ¿Qué tal si abres la página de inicio y luego extraes todos los enlaces de imagen y luego eliges una imagen con el nombre del logo en ella? ¿Funcionaría este método para todas las URLs? Quiero saber si existe una forma estándar de obtener un icono de alta resolución para una URL o favicon determinada. ¿Es la única forma estándar de obtener el logotipo del sitio web?

Los logotipos no van a tener un nombre consistente y son muy difíciles de identificar constantemente. Considere la posibilidad de poner el favicon en una baldosa de color de dimensiones adecuadas. La gente asociará rápidamente el color con el sitio web. Puede extraer un color dominante del sitio web o favicon usando algo como colorthief, o hacer que cada uno sea único utilizando una fórmula de ángulo dorado para elegir un tono.

Por lo general, el favicon es pequeño (como 16x16 o 32x32). Si necesita dimensiones más grandes, extraiga no favicon, sino el logotipo de la página de inicio / encabezado.

Puede codificarlo usted mismo o utilizar una solución existente.

Algoritmo de bricolaje

Busque las declaraciones del ícono de Apple touch en el código, como <link rel="apple-touch-icon" href="/apple-touch-icon.png"> . Estas imágenes van desde 57x57 a 152x152. Ver especificaciones de Apple para referencia completa.
Incluso si no encuentra la declaración del icono de Apple Touch, intente cargarlos de todos modos, según la convención de nomenclatura de Apple. Por ejemplo, puede encontrar algo en /apple-touch-icon.png . Una vez más, consulte las especificaciones de Apple para referencia.
Busque favicon PNG de alta definición en el código, como <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196"> . En este ejemplo, tienes una imagen de 196x196.
Busque imágenes de mosaico de Windows 8 / IE10 y Windows 8.1 / IE11, como <meta name="msapplication-TileImage" content="/mstile-144x144.png"> . Estas imágenes van desde 70x70 a 310x310, o incluso más. Ver estas referencias de Windows 8 y Windows 8.1 .
Busque /browserconfig.xml , dedicado a Windows 8.1 / IE11. Este es el otro lugar donde puedes encontrar fotos de azulejos. Ver especificaciones de Microsoft .
Busque la declaración og:image como <meta property="og:image" content="http://somesite.com/somepic.png"/> . Así es como un sitio web indica a FB / Pinterest / cualquiera que sea la imagen preferida para representarlo. Ver Open Graph Protocol para referencia.
En este punto, no encontró ningún logotipo adecuado ... ¡maldito! Todavía puede cargar todas las imágenes en la página y hacer una conjetura para elegir la mejor.

Nota: los pasos 1, 2 y 3 son básicamente lo que hace Chrome para obtener los íconos adecuados para los enlaces de favoritos y de la pantalla de inicio. Coast by Opera incluso usa las imágenes de mosaico de MS para hacer el trabajo. Lea esta lista para averiguar qué navegador usa qué imagen (revelación completa: soy el autor de esta página).

APIs y proyectos de código abierto.

RealFaviconGenerator : con este API de recuperación de favicon puede obtener cualquier icono de icono o icono relacionado (como el icono táctil). Revelación completa: soy el autor de este servicio.

BestIcon : Aunque es menos completo, Besticon ofrece una buena alternativa, especialmente si desea alojar el código usted mismo. También hay una versión alojada que puede utilizar de inmediato.