Favicon: Todo lo que necesitas saber para utilizarlo en tu web

Definir un icono de página para que aparezca en los resultados de búsqueda de Google

Url : https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?hl=es 

Implementación:

En este artículo se indica cómo lograr que tu sitio web sea apto para que su icono aparezca en los resultados de búsqueda:

<link rel="shortcut icon" href="/ruta/a/iconodepagina.ico">

rel : Puede ser una de estas cadenas:

• "shortcut icon"
• "icon"
• "apple-touch-icon"
• "apple-touch-icon-precomposed"

href:

La URL del icono de página. Puede ser una ruta relativa (/sonrisa.ico) o absoluta (https://example.com/sonrisa.ico), pero debe estar en el mismo dominio que la página principal.

Google buscará y actualizará el icono de tu página cuando rastree tu página principal. Si haces algún cambio en este icono y quieres notificarlo a Google, puedes solicitar la indexación de la página principal de tu sitio web. Las actualizaciones pueden tardar varios días en aparecer en los resultados de búsqueda.

Directrices

Debes seguir estas directrices para que tu icono de página aparezca junto a tus resultados en la Búsqueda de Google. Ten en cuenta que cumplir todas no te garantiza que tu icono de página se vaya a mostrar en los resultados de búsqueda.

• Google debe poder rastrear tanto el icono de página como la página principal, por lo que no deben tener bloqueado a Google.
• El icono de página debe ser una representación visual de la marca de tu sitio web para que los usuarios lo puedan identificar rápidamente al examinar los resultados de búsqueda.
• El icono de página debe ser cuadrado y tener un número de píxeles múltiplo de 48 (por ejemplo: 48x48, 96x96 o 144x144). Los archivos SVG no tienen un tamaño específico. Se admite cualquier formato de icono de página válido. Google cambiará la escala de tu imagen a 16x16 píxeles para poder usarla en los resultados de búsqueda, así que comprueba que se vea bien con esa resolución. Nota: No proporciones un icono de página de 16x16 píxeles.
• La URL del icono de página debe ser estable, por lo que no deberías cambiarla con frecuencia.
• Google no mostrará ningún icono de página que considere inadecuado, incluidos los que contengan pornografía o símbolos de odio como esvásticas. Si Google se encuentra este tipo de imagen en un icono de página, lo sustituirá por uno predeterminado.

Convertir png a ico desde páginas online:

Tener una imagen como PNG (16x16, 32x32, 48x48 y 64x64), luego convertirlas con paginas online:

http://www.convertico.com/

Convertir imagen a ico desde photoshop con plugin ICOFormat

Estoy usando Adobe photoshop CC 21.2 año 2021 y el plugin sigue funcionado,  descargar el complemento ICOFormat  desde la url:

http://www.telegraphics.com.au/sw/product/ICOFormat

Una vez descargado descomprimelo y guardalo en la carpeta donde se instalo photoshop en mi caso sería:

C:\Program Files\Adobe\Adobe Photoshop 2020\Plug-ins

Dentro de la carpeta Plug-ins  deves guardar  la carpeta  ICOFormat-2.1f1-win64 ya descomprimida.

youtube tutorial Cómo guardar un favicon en Photoshop CC

Referencia URL: https://community.adobe.com/t5/photoshop/install-ico-format-plugin-in-photoshop-cc/m-p/6123211?profile.language=es

Probando tu Favicon

Lo puedes probar como se ve usando los siguientes metodos:

• http://www.google.com/s2/favicons?domain=ponertudominioaqui.com
  
  
• Usando la herramienta online  Realfavicongenerator      

Especificaciones: 

• La imagen grafica que representara al favicon deve estr en la carpeta raiz
• El código que conduce a la imagen en las páginas del recurso está escrito correctamente

En 1999, el Favicon se introdujo en Internet Explorer como una forma de ayudar a los buscadores a distinguir las páginas Web marcadas de otras.

Ya en 2001, los navegadores web comenzaron a adoptar el favicon junto a la URL y pronto se volvieron ubicuos en la web, migrando a las ahora familiares pestañas del navegador. Más tarde, tanto Firefox como Safari agregaron compatibilidad con PNG para Favicons, lo que marcó el primer cambio importante en el formato Favicon. En 2008, después del lanzamiento del iPhone inicial, el favicon dio un giro más importante después de que Apple introdujera "apple-touch-icon.png", una versión de mayor resolución del favicon que se usa para anclar al dock de iOS. Esto creó el precedente para múltiples tamaños de favicon y ayudó a consolidar PNG como el formato preferido sobre el formato de archivo ICO de Microsoft Windows.

El W3C, reconociendo la necesidad de versatilidad, en HTML5 incluía un estándar para múltiples tamaños para el favicon, que proliferaba debido a las pantallas de alta densidad, las nuevas interfaces de usuario del sistema operativo, los cambios de navegador y los dispositivos móviles. Hoy tenemos favicons personalizados para todo, desde Google TV hasta mosaicos de Microsoft Windows Metro.

Hoy en día, los Favicons se muestran justo encima de la barra de direcciones, si un sitio Web no tenga favicon, el navegador mostrará un símbolo de navegador genérico.

Además de la barra de direcciones, también los podemos encontrar en el historial del navegador.

 Desde mayo de 2019, Google ha estado usando Favicons en la SERP móvil, además la SERP de escritorio también obtuvo una nueva apariencia a principios de 2020.

Fuente:  https://twitter.com/searchliaison/status/1216782591463813126   

El año pasado, nuestros resultados de búsqueda en dispositivos móviles adquirieron un nuevo aspecto. Eso ahora se implementará en los resultados de computadoras de escritorio esta semana, presentando los nombres de dominio del sitio y los íconos de marca de manera prominente, junto con una etiqueta "Anuncio" en negrita para los anuncios. Aquí hay una maqueta:

Estas representaciones gráficas ayudan a atraer la atención del usuario y aumentan el reconocimiento de la marca. Si los usuarios visitan un sitio Web un par de veces con un Favicon destacable, lo distinguirá fácilmente de otros en el futuro.

¿Por qué no SVG?

Pueden preguntarse acerca de los gráficos vectoriales escalables (SVG) como una solución más inteligente en lugar de generar íconos en todas las resoluciones imaginables, ya que los íconos son uno de los mejores casos de uso para imágenes vectoriales. 

Solo Firefox , Safari , Instagram admiten favicons SVG

Faviconos ICO vs. PNG

Los faviconos fueron introducidos en Internet Explorer 5 ( 1999 ), y desde entonces hasta hace muy poco, los faviconos fueron siempre archivos ICO ubicados en la raíz del dominio como favicon.ico, o en una carpeta de imágenes, y enlazados como:

<link rel="shortcut icon" href="ruta/favicon.ico">

El valor shortcut de rel fue introducido también en Internet Explorer 5 y quedo como tal hasta 2010, cuando la especificación HTML5 declaro icon como único identificador estándar para faviconos, y por tanto en navegadores que no sean Internet Explorer el atributo rel de <link> puede ser servido sin shortcut.

<!-- IE6-10 -->
<link rel="shortcut icon" href="ruta/favicon.ico">
<!—Los demás navegadores -->
<link rel="icon" href="ruta/favicon.ico">

Tamaño del Favicon

El favicono clásico, de toda la vida,  es un archivo ICO de 16x16, pero últimamente han aparecido los faviconos  de 32x32 y los de 48x48 y los de 64x64 . . . y muchos más.
Internet Explorer Dev Center recomienda, para lograr los mejores resultados, crear faviconos ICO múltiples para múltiples resoluciones de pantalla  (16x16, 32x32 y 48x48 ).
I después hay los iconos táctiles de Apple, y las "tiles" ( literalmente piezas de mosaico o  tejas ) de Windows 8. Pero esta es otra historia.

Google recomienda la mayor resolución posible de 192 × 192. 

Referencia: http://w3.unpocodetodo.info/utiles/faviconos.php

Notas  Adicionales:

Para los navegadores IE 10 y anteriores, aún necesitará crear un favicon.ico si elige incluir un favicon.ico, actualmente, Safari usará por defecto favicon.ico sobre el PNG.