Formato y tamaño del favicón

No todos los navegadores requieren las mismas dimensiones para el favicón. Por eso, además de los faviconos con 16 x 16 píxeles o 32 x 32 píxeles, se recomiendan otras variantes.

Con el término favicón (que resulta de la combinación de “favorite” y “icon”) se hace referencia 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 encuentren 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 dimensiones 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 dispositivos móviles, además, estos pequeños iconos también se usan como icono táctil. Para más información sobre estos iconos gráficos, también puedes consultar nuestro artículo “¿Qué es un favicón? Definición e importancia”.

Es recomendable que todas las páginas web incluyan un favicón. De este modo, es más sencillo encontrar la página buscada. Además, contribuirás a que la página web muestre un aspecto más profesional y conseguirás que funcione mejor desde el punto de vista del SEO. No obstante, hay normas estrictas sobre las dimensiones que debe tener un favicón. En la mayoría de los navegadores se requieren las medidas 16 x 16 píxeles o 32 x 32 píxeles. Mientras que para pantallas de alta resolución se recomienda 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 presentados, hay formatos que también son útiles y que es mejor incluir, sobre todo para Google. Los resultados de búsqueda en esta plataforma se ofrecen con un favicón que debería cumplir con las dimensiones de 48 x 48 píxeles. Como alternativa, se puede optar por un formato múltiplo de estas dimensiones. Este tamaño de favicón también es importante para Android, que utiliza faviconos en este tamaño para los accesos directos de la pantalla de inicio. Para dispositivos con una resolució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 apropiados varían en función del dispositivo 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 resolución mayor, siempre que sea un múltiplo de este valor. Esto permite una visualización óptima a alta resolució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 recomienda unas dimensiones de favicón de 167 x 167 píxeles.

Para algunos navegadores y dispositivos se aplican otras excepciones. Los dispositivos más antiguos, en particular, requieren en teoría de otras dimensiones para que el tamaño del icono del navegador sea el correcto. Te presentamos una lista con las dimensiones 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, compatible con numerosos navegadores, el que se usa con una frecuencia mayor. Por su parte, el formato .png se recomienda 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 establecer 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 comprobará que el favicón es compatible con todos los navegadores importantes. Finalmente, puedes añadir el favicón en WordPress o poner un favicón en HTML.