Formato y tamaño del favicón

No todos los na­ve­ga­do­res requieren las mismas di­me­n­sio­nes para el favicón. Por eso, además de los faviconos con 16 x 16 píxeles o 32 x 32 píxeles, se re­co­mie­n­dan otras variantes.

Con el término favicón (que resulta de la co­m­bi­na­ción de “favorite” y “icon”) se hace re­fe­re­n­cia al pequeño gráfico que, entre otros lugares, se muestra en las pestañas abiertas en un navegador, lo que facilita que los usuarios en­cue­n­tren una página web abierta. Aunque en un principio se puede usar el logo de una marca o una empresa como favicón, las estrictas di­me­n­sio­nes que debe respetar este icono gráfico hacen que a menudo solo se use como tal una parte del logo o una variación de este. En los di­s­po­si­ti­vos móviles, además, estos pequeños iconos también se usan como icono táctil. Para más in­fo­r­ma­ción sobre estos iconos gráficos, también puedes consultar nuestro artículo “¿Qué es un favicón? De­fi­ni­ción e im­po­r­ta­n­cia”.

Es re­co­me­n­da­ble que todas las páginas web incluyan un favicón. De este modo, es más sencillo encontrar la página buscada. Además, co­n­tri­bui­rás a que la página web muestre un aspecto más pro­fe­sio­nal y co­n­se­gui­rás que funcione mejor desde el punto de vista del SEO. No obstante, hay normas estrictas sobre las di­me­n­sio­nes que debe tener un favicón. En la mayoría de los na­ve­ga­do­res se requieren las medidas 16 x 16 píxeles o 32 x 32 píxeles. Mientras que para pantallas de alta re­so­lu­ción se re­co­mie­n­da el favicón de 32 x 32 píxeles, el de 16 x 16 píxeles suele usarse con otros fines. Por ello, lo más sencillo es incluir ambos en el código.

Además de estos dos tamaños para faviconos pre­se­n­ta­dos, hay formatos que también son útiles y que es mejor incluir, sobre todo para Google. Los re­su­l­ta­dos de búsqueda en esta pla­ta­fo­r­ma se ofrecen con un favicón que debería cumplir con las di­me­n­sio­nes de 48 x 48 píxeles. Como al­te­r­na­ti­va, se puede optar por un formato múltiplo de estas di­me­n­sio­nes. Este tamaño de favicón también es im­po­r­ta­n­te para Android, que utiliza faviconos en este tamaño para los accesos directos de la pantalla de inicio. Para di­s­po­si­ti­vos con una re­so­lu­ción de pantalla alta, también es útil el favicón de 192 x 192 píxeles.

En el caso de Apple, el tema se complica. Los tamaños de favicón más apro­pia­dos varían en función del di­s­po­si­ti­vo final en el que se muestra. Para el iPhone, se utiliza el formato 60 x 60 píxeles, aunque también se puede usar una re­so­lu­ción mayor, siempre que sea un múltiplo de este valor. Esto permite una vi­sua­li­za­ción óptima a alta re­so­lu­ción, que se reduce para otros fines. Por tanto, un icono de imagen de 180 x 180 píxeles es una buena opción. Los iconos del iPad, en cambio, se muestran con 83,5 x 83,5 píxeles. En el caso de las pantallas Retina y Super Retina, se re­co­mie­n­da unas di­me­n­sio­nes de favicón de 167 x 167 píxeles.

Para algunos na­ve­ga­do­res y di­s­po­si­ti­vos se aplican otras ex­ce­p­cio­nes. Los di­s­po­si­ti­vos más antiguos, en pa­r­ti­cu­lar, requieren en teoría de otras di­me­n­sio­nes para que el tamaño del icono del navegador sea el correcto. Te pre­se­n­ta­mos una lista con las di­me­n­sio­nes de favicón más comunes:

Puedes utilizar varios formatos de imagen para tu favicón. Sin embargo, es el formato de archivo de imagen de Windows .ico, co­m­pa­ti­ble con numerosos na­ve­ga­do­res, el que se usa con una fre­cue­n­cia mayor. Por su parte, el formato .png se re­co­mie­n­da para gráficos de mayor tamaño que también pueden funcionar como iconos táctiles. Otros formatos son .svg o .gif.

Dado que son varios los aspectos a los que prestar atención a la hora de es­ta­ble­cer el tamaño de un favicón adecuado para tu página web, lo más sencillo es utilizar un generador. Este te guiará por todos los pasos y co­m­pro­ba­rá que el favicón es co­m­pa­ti­ble con todos los na­ve­ga­do­res im­po­r­ta­n­tes. Fi­na­l­me­n­te, puedes añadir el favicón en WordPress o poner un favicón en HTML.