{"id":31944,"date":"2024-11-12T12:39:38","date_gmt":"2024-11-12T12:39:38","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31944"},"modified":"2025-03-18T14:04:22","modified_gmt":"2025-03-18T14:04:22","slug":"Favicon","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/Favicon","title":{"rendered":"Favicon"},"content":{"rendered":"

\u00bfQu\u00e9 es un Favicon?<\/span><\/h2>\n
\n
\"Favicon\"<\/a> <\/p>\n
Imagen:<\/b> Favicon – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Un favicon es un peque\u00f1o s\u00edmbolo que se muestra junto al t\u00edtulo de la p\u00e1gina en las pesta\u00f1as del navegador y que ayuda a reconocer f\u00e1cilmente un sitio web. Por lo general, suele ser una versi\u00f3n simplificada del logotipo de la empresa o de su marca dise\u00f1ado de forma figurativa.\n<\/p>\n

Es de gran utilidad sobre todo cuando se abren muchas pesta\u00f1as al mismo tiempo, de manera que incluso, este peque\u00f1o icono cuadrado es, a veces, la \u00fanica ayuda para orientarse entre los sitios web abiertos en ese momento.\n<\/p>\n

Favicon en las desktops<\/span><\/h2>\n

Los primeros favicons nacieron hace unos 20 a\u00f1os con el lanzamiento de Internet Explorer 5, donde se dispon\u00eda de hasta 16×16 p\u00edxeles para mostrar el favicon de un sitio. Posteriormente, esta resoluci\u00f3n aument\u00f3 a 32×32 y 48×48 p\u00edxeles, aunque la imagen de 16 p\u00edxeles en formato .ico sigue consider\u00e1ndose un est\u00e1ndar com\u00fan para el favicon en la actualidad.\n<\/p>\n

Con el aumento del n\u00famero de navegadores y dispositivos finales, las exigencias para la creaci\u00f3n del favicon fueron cada vez mayores, por lo que el formato .ico pronto se complement\u00f3 con los formatos .png, .gif, .jpg y, finalmente, .svg, siendo los dos primeros compatibles con los navegadores principales.\n<\/p>\n

Por regla general, el favicon se almacena en el directorio ra\u00edz<\/a> de un sitio, por lo que los navegadores lo buscan autom\u00e1ticamente all\u00ed. De no encontrar el archivo esperado en esa ruta, se produce un error 404<\/a> en el servidor web, lo que no solo ralentiza el tiempo de carga de un sitio, sino que tambi\u00e9n tiene un efecto negativo en su usabilidad<\/a>.\n<\/p>\n

Para asegurarse de los navegadores encuentra el favicon sin problemas, se debe especificar su ruta en la cabecera HTML utilizando estas meta etiquetas<\/a>:\n<\/p>\n

<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"\/favicon-16x16.png\"><\/pre>\n
<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/favicon-32x32.png\"><\/pre>\n
En nuestro sitio web seobility.net\/es, esta metaetiqueta tiene el siguiente aspecto:\n<\/p>\n
<link href=\"https:\/\/www.seobility.net\/dynamiccontent\/www.seobility.net\/favicon.gif\" rel=\"shortcut icon\" type=\"image\/x-icon\" ><\/pre>\n
M\u00e1s recientemente, se ha a\u00f1adido tambi\u00e9n el formato .svg<\/a>, que, para desgracia de muchas dise\u00f1adoras y dise\u00f1adores web, ha sido hasta ahora un nicho de aplicaci\u00f3n para los favicons, pues este formato puede escalarse bastante bien.\n<\/p>\n
Adem\u00e1s, hoy en d\u00eda casi todos los navegadores modernos pueden mostrar gr\u00e1ficos .svg en su favicon, solo el navegador Safari lo solicita como formato \u00fanico. No obstante, hasta ahora esta funci\u00f3n s\u00f3lo puede utilizarse en desktops.\n<\/p>\n
\n
\n
Favicon Checker<\/h3>\n
Comprueba si tu favicon est\u00e1 enlazado correctamente<\/p>\n<\/div>\n
\n
\n<\/form>\n<\/div>\n
Favicon en dispositivos m\u00f3viles<\/span><\/h2>\n
Tras el lanzamiento de su sistema operativo para tel\u00e9fonos inteligentes iOS, Apple ha confiado cada vez m\u00e1s en las aplicaciones web convirti\u00e9ndolos, m\u00e1s bien, en una necesidad t\u00e9cnica incluso en las resoluciones m\u00e1s altas. De hecho, Google tambi\u00e9n ha incrementado su confianza con los favicons en su sistema Android.\n<\/p>\n
En estos casos, el favicon se muestra como un icono o s\u00edmbolo de aplicaci\u00f3n al guardar alguna app web en la pantalla de inicio del smartphone. Considerando adem\u00e1s que las resoluciones de las pantallas de smartphones suelen ser bastante altas, a menudo se requieren im\u00e1genes de hasta 512 p\u00edxeles de longitud de p\u00e1gina.\n<\/p>\n
As\u00ed pues, las resoluciones m\u00e1s potentes representan una gran ventaja, pues hace posible que se puedan desarrollar diversas opciones de dise\u00f1o para implementar en el favicon.\n<\/p>\n
En cuanto al almacenamiento de los favicons, como se mencion\u00f3 antes, en las desktops se requiere la ruta del directorio ra\u00edz, pero la instalaci\u00f3n de un favicon para dispositivos m\u00f3viles y tabletas es a\u00fan m\u00e1s compleja y los requisitos de las plataformas respecto a un favicon son diferentes.\n<\/p>\n
Por ejemplo, para que iOS encuentre estos iconos t\u00e1ctiles, es necesario especificar su ubicaci\u00f3n de almacenamiento a trav\u00e9s de una metaetiqueta en la cabecera del c\u00f3digo HTML. De manera que antes se requer\u00edan diferentes tama\u00f1os, pero en la actualidad, Apple ha estandarizado que sea un archivo .png de 180 p\u00edxeles.\n<\/p>\n
<link rel=\"apple--icono-tactil\" sizes=\"180x180\" href=\"\/apple-icono-tactil.png\"><\/pre>\n
Por otra parte, la integraci\u00f3n en Android es algo m\u00e1s compleja, pues se utiliza una metaetiqueta que especifica la ubicaci\u00f3n de un archivo .json y se enlaza con los \u00edconos en formato .png. Incluso, este archivo conocido manifest.json es tambi\u00e9n la fuente de datos para el nombre de la aplicaci\u00f3n y la combinaci\u00f3n de colores de un sitio.\n<\/p>\n
Este formato est\u00e1ndar s\u00f3lo es compatible con Chrome para Android y Opera Mini. Se puede encontrar una descripci\u00f3n detallada de la estructura del archivo .json en https:\/\/developer.mozilla.org\/es\/docs\/Web\/Manifest<\/a>.\n<\/p>\n
<link rel=\"manifest\" href=\"\/manifest.json\"><\/pre>\n
Iconos en el men\u00fa de inicio de Windows<\/span><\/h2>\n
Lamentablemente, Windows no utiliza el manifiesto en formato .json cuando coloca un sitio en su men\u00fa de inicio. Microsoft requiere de un archivo propietario .xml, que contiene informaci\u00f3n similar al manifest.json, pero se basa en un formato diferente.\n<\/p>\n
A diferencia de otros sistemas, aqu\u00ed la ubicaci\u00f3n del archivo .xml no tiene que ser especificada como una metaetiqueta en el encabezado, ya que Windows siempre busca el archivo en el directorio ra\u00edz de un sitio.\n<\/p>\n
Servicios web<\/span><\/h2>\n
Dado que no se ha establecido ning\u00fan est\u00e1ndar en el sector m\u00f3vil, integrar los favicons correctamente se ha convertido en un reto para las y los desarrolladores web.\n<\/p>\n
Afortunadamente, no es necesario crear cada archivo de forma individual en Photoshop o alg\u00fan otro software similar, ya que existen sitios web como realfavicongenerator.net<\/a> en los que se puede convertir cualquier imagen directamente en un favicon.\n<\/p>\n
Dado que los par\u00e1metros como el color y el nombre de la aplicaci\u00f3n tambi\u00e9n se introducen en el configurador, estos generadores pueden crear inmediatamente todos los archivos .xml y .json necesarios e incluso generar archivos .svg para Safari.\n<\/p>\n
A partir de aqu\u00ed, comprobar si se han cargado los archivos y si las metaetiquetas est\u00e1n configuradas correctamente es muy sencillo, solo hay que acceder al sitio web con un navegador.\n<\/p>\n
Dise\u00f1o gr\u00e1fico<\/span><\/h2>\n
En el campo del dise\u00f1o, destaca la dificultad a la hora de crear favicon  que se muestre de forma atractiva tanto para una resoluci\u00f3n alta como baja. Una buena recomendaci\u00f3n para im\u00e1genes de baja resoluci\u00f3n consiste en omitir los detalles sin perjudicar la capacidad de reconocimiento del favicon.\n<\/p>\n
En conclusi\u00f3n<\/span><\/h2>\n
Los favicons han evolucionado enormemente en los \u00faltimos a\u00f1os y ahora son m\u00e1s que simples iconos en las pesta\u00f1as del navegador. Especialmente, en lo que respecta a la usabilidad, se han hecho indispensables para el reconocimiento y la creaci\u00f3n de marcas.\n<\/p>\n
Adem\u00e1s, para crear un icono atractivo, ya no es necesario recurrir a programas de tratamiento de im\u00e1genes y editores de texto. Gracias a los generadores gratuitos de favicons, se pueden crear todos los archivos necesarios de forma r\u00e1pida y sencilla.\n<\/p>\n
Sin embargo, los retos t\u00e9cnicos no deben distraer del objetivo principal: crear un s\u00edmbolo gr\u00e1fico que sea reconocible en todos los formatos, pero que a la vez, tambi\u00e9n sea \u00fanico y representa a la marca.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n