La guía definitiva de los favicons

¿Qué es un favicon?

En el diseño de sitios web, los favicons son normalmente logotipos reducidos de una empresa u organización que se utilizan para ayudar a la creación de la marca. Los favicons aparecen en la esquina de la pestaña de una página web y suelen incluir el diseño del logo del sitio que estás visitando. Los favicons tienen un tamaño diminuto y requisitos específicos, por lo que es esencial saber cómo crear un favicon para cualquier página web que tengas o administres.

¿Dónde se usan los favicons?

Los favicons se encuentran en muchos navegadores web. Pueden estar situados a la derecha o a la izquierda de las pestañas del navegador, de los resultados del historial, de las aplicaciones de la barra de herramientas y de las barras de búsqueda. El lugar en el que aparecen los favicons suele depender del navegador que utilices. Por ejemplo, los favicons en Google Chrome aparecen en el lado derecho de la pestaña, en la barra de marcadores, en el historial del navegador y en la barra de búsqueda mientras escribes.

¿Son importantes los favicons?

Sí, son muy importantes, aunque sean pequeños. Normalmente es el primer logo que un visitante verá al acceder a una página web, concretamente mientras está todavía en proceso de carga. Si tu icono tiene muchos colores o utiliza una imagen única para transmitir un mensaje, es mucho más probable que tus visitantes recuerden tu sitio web y la marca que representa. Sin él, es fácil que se olviden de tu página web.

Algunas de las ventajas más notables del uso de favicons son:

Identidad de la marca

Definir y establecer la identidad de tu marca es esencial, sobre todo si entras en un mercado muy competitivo o excesivamente saturado. Tener una identidad de marca desde el principio con un favicon pulido puede ayudar a diferenciar tu sitio web de otros similares del mismo sector. Si el reconocimiento de la marca es una necesidad para tu negocio, no pierdas la oportunidad de crear un favicon propio.

Identificación en favoritos

Si un usuario marca tu sitio web como favorito, ¿qué probabilidades hay de que vuelva a localizarlo fácilmente sin un favicon? Su uso puede hacer que tu página web sea más reconocible para quienes deseen volver a visitarla.

Mejora la UX

Construir un sitio web y una presencia online de éxito hoy en día requiere algo más que ofrecer contenidos o productos de calidad. Proporcionar a tus visitantes una experiencia de usuario sin fisuras también puede suponer un gran avance a la hora de construir y desarrollar una nueva marca comercial en Internet. Un icono profesional puede ayudar a solidificar que tu marca sea creíble y de buena reputación para los nuevos visitantes.

Posicionamiento en buscadores (SEO)

En algunos casos, crear un favicon bien diseñado puede ayudar a impulsar el SEO de un sitio web. Si es llamativo y visualmente atractivo, puede recibir más clics y atención que otros enlaces o páginas web de la competencia. Aunque no es seguro que uno bien diseñado mejore el SEO, es posible que lo haga con la suficiente interacción de los visitantes.

Reputación y credibilidad

Causar una buena primera impresión es importante, especialmente cuando se presenta la empresa o la marca a posibles clientes por primera vez. Usar favicons es una forma de transmitir un mensaje de profesionalidad y autenticidad, que puede ayudar a construir una relación positiva con tus visitantes. El uso de logotipos, esquemas de color y favicons profesionales también remarca el mensaje de autenticidad y credibilidad, lo que permite aumentar tu reputación.

Formato del favicon

Debes conocer los tipos de archivo de imagen apropiados para este gráfico. Mientras que antes todos los usuarios debían utilizar archivos ICO de Windows, ahora hay varios navegadores que permiten utilizar archivos de imagen estándar, incluyendo PNG, SVG y GIF.

Los siguientes tipos de archivos son los más utilizados para dar formato a los favicons en la actualidad:

Windows ICO

Los archivos ICO (Windows Icon) son los tipos de archivo más comunes utilizados para los favicons. Cuando busques favicons gratuitos en lugar de diseñar o desarrollar los tuyos propios, te encontrarás con bibliotecas de archivos ICO de Windows. También puedes encontrar convertidores en Internet que te permiten cargar tu propio archivo de imagen para convertirlo en un archivo ICO estándar. El tipo de archivo ICO de Windows es útil para un icono de 32 píxeles.

PNG

Los archivos PNG son tipos de archivo de imagen muy populares que también pueden utilizarse como favicons sin necesidad de formato o programación adicional. Un archivo PNG es muy recomendable para aquellos que buscan resultados de alta calidad utilizando gráficos e imágenes tradicionales. Si estás interesado en cómo crear un favicon transparente pero no quieres utilizar un archivo ICO de Windows, utilizar un PNG suele ser la mejor opción.

SVG

Las imágenes con formato SVG son potentes archivos de imagen que también pueden utilizarse para crear y mostrar favicons. Aunque los archivos SVG no se cargan tan rápido como los archivos JPG y GIF tradicionales, son compatibles con una amplia gama de navegadores web, desde Microsoft Edge y Mozilla Firefox hasta Opera.

GIF

Es posible utilizar un archivo GIF para crear un favicon. Si estás pensando en utilizar un GIF transparente o animado, puedes hacerlo, dependiendo de cómo elijas subir y presentar tu favicon.

APNG

Otro formato que puede utilizarse para crear un favicon es el APNG. Los APNG son similares a los archivos PNG, pero permiten animaciones como un GIF. Los archivos APNG también son compatibles con muchos navegadores como Opera y Mozilla Firefox.

JPG

Probablemente hayas oído hablar de los archivos JPG, incluso si eres nuevo en el diseño y desarrollo web. Un JPG es uno de los formatos más comunes utilizados para guardar fotos y gráficos hoy en día. Sin embargo, los JPG no suelen utilizarse para crear favicons, ya que los JPG suelen perder calidad al ser editados y redimensionados. Editar repetidamente un JPG no siempre da el resultado profesional que podrías imaginar.

Directrices sobre el tamaño del favicon

Antes de crear un favicon o de intentar utilizar una imagen tradicional, es importante conocer los formatos y tamaños adecuados. Los favicons suelen ser versiones más pequeñas o condensadas de los logotipos. Y cuando decimos pequeño, queremos decir realmente pequeño. Mientras que un logotipo clásico puede oscilar entre 50 píxeles y más de 300-500 píxeles, el tamaño de un favicon comienza en 16x16 píxeles.

Estas son las pautas más comunes para el tamaño de un favicon.

• 16x16 píxeles: al desarrollar un favicon, ten en cuenta que 16x16 píxeles es el tamaño más utilizado. Aunque 16x16 píxeles es un tamaño de archivo extremadamente pequeño, es útil para mostrar logotipos y favicons en toda la web en las barras de búsqueda, las pestañas y el historial del navegador.
• 32x32 píxeles: los favicons de 32x32 píxeles son ideales para aquellos interesados en promocionar su sitio web o contenido dentro de una barra de tareas. Además, este tamaño se cargará mejor para aquellos que utilizan Mac iOS y navegan a través de Safari, ya que es el tamaño estándar de la sección "Leer más tarde" del navegador.
• 72x72 píxeles: mientras que los favicons tradicionales de 16x16 píxeles se consideraban universales, la llegada de varias tecnologías y nuevos dispositivos han dado cabida a más opciones de tamaño. Si te diriges a usuarios de móviles o a usuarios que navegan a través de iPads, es imprescindible que tengas un favicon de 72x72 píxeles.
• 96x96 píxeles: para aquellos que quieran atraer a los usuarios de Google TV, un favicon de 96x96 píxeles es muy recomendable para evitar el estiramiento y la pérdida de calidad al cargar en una resolución mayor.
• 114x114 píxeles: un favicon de 114x114 píxeles es óptimo para quienes utilizan la última versión del iPhone de Apple, ya que los iconos de las aplicaciones son más grandes y la pantalla retina es el doble de grande. Para evitar que tu favicon sea de baja calidad y esté borroso, utiliza el tamaño adecuado de los canales a los que quieras dirigirte.
• 128x128 píxeles: si pretendes promocionar tu página o tu presencia online a través de Google Chrome Web Store, puedes hacerlo con un favicon de 128 x 128 píxeles.
• 195x195 píxeles: aunque es poco frecuente, este tamaño es el adecuado para quienes utilizan el navegador Opera o la configuración de Opera Speed Dial para guardar sus páginas web preferidas o favoritas.

Conocer los distintos tamaños de favicon más utilizados puede ayudarte a determinar cuál es el tamaño adecuado de tu favicon. Cuando estés familiarizado con los tipos de formato de los favicons en los diferentes navegadores web, tiendas de aplicaciones y dispositivos, habrá menos posibilidades de que presentes mal tu marca.

¿Por qué es importante el tamaño de mi favicon?

La creación de favicons con diferentes tamaños puede ayudar a evitar la pérdida de calidad o resolución cuando se muestra, tanto si están navegando por tu sitio web o intentando acceder a tu aplicación desde la tienda oficial Chrome Web Store. Si tu favicon es demasiado pequeño o tiene un tamaño incorrecto, corres el riesgo de:

• Llamar la atención de forma negativa sobre tu marca. Causar una mala primera impresión puede hacer que los usuarios no le den nunca una oportunidad a tu sitio web o a tu marca, especialmente si una empresa de la competencia causa una impresión positiva con gráficos y favicons diseñados de forma profesional.
• Alejar a los posibles clientes. Si tu favicon parece anticuado, borroso o granulado, los usuarios no creerán que eres profesional ni te van a tomar en serio, lo que puede suponer una pérdida de tráfico web, de ventas y, en definitiva, de generación de ingresos.

Cómo crear un favicon

Hacer un favicon es fácil, especialmente con la tecnología actual. Antes de crear un favicon, debes tener acceso a Internet y un software de diseño gráfico que pueda redimensionar tu icono al tamaño adecuado.

Para empezar, sigue las pautas sobre cómo crear un favicon que se indican a continuación:

1. Piensa en la imagen que vas a utilizar para crear tu favicon. ¿Utilizarás el logotipo estándar de tu marca o crearás una versión especial del mismo?
2. Pregúntate dónde se mostrará tu favicon. Por ejemplo, si tu tienda de comercio electrónico no tiene una aplicación, no tienes que preocuparte por el tamaño de tu favicon para aplicaciones móviles en teléfonos o tabletas.
3. Elige el tipo de archivo que deseas utilizar para tu favicon. Los tipos de archivo más comunes para los favicons hoy en día son los archivos ICO de Windows, los archivos SVG, los archivos PNG y los GIF. Es posible que tengas que consultar con tu proveedor de alojamiento web para determinar si hay alguna restricción a la hora de seleccionar tu(s) tipo(s) de archivo preferido(s).
4. Busca el script de carga de favicon de tu proveedor de alojamiento web para subir la imagen que deseas convertir y utilizar como favicon de tu página web. También puedes optar por utilizar un tercero para subir y generar un archivo de favicon que se pueda guardar y subir a tu servidor web.
5. Sube tu favicon utilizando el método apropiado basado en el host de tu sitio web o app.

Prácticas recomendadas para favicons

Tanto si eres nuevo en el desarrollo web como si simplemente quieres incorporar un favicon profesional por motivos de reputación, hay algunas prácticas recomendadas que debes tener en cuenta siempre que trabajes con favicons, como por ejemplo:

• Asegúrate que es reconocible. Cuando diseñes tu favicon, asegúrate que sea reconocible, incluso a distancia. Dado que el icono será mucho más pequeño que la mayoría de los logotipos tradicionales, es mejor utilizar una versión condensada y simplificada de tu logotipo si este es originalmente complejo y colorido.
• Hazlo simple. Evita el uso de textos complejos o imágenes complicadas al crear un favicon, especialmente si necesitas el favicon de menor tamaño.
• Céntrate en la marca. Al crear tu favicon, ten en cuenta cómo lo verán e interpretarán los usuarios actuales y los que visiten tu sitio web por primera vez. Por ello, asegúrate que el favicon esté en consonancia con las directrices de estilo de tu marca.
• Utiliza un fondo transparente. Utilizar un logotipo transparente para crear tu archivo de favicon es muy recomendable, ya que los favicons con colores de fondo pueden parecer anticuados o distraer demasiado. Los favicons transparentes son también mucho más universales y pueden ser cargados y compartidos en casi cualquier lugar sin interferir con los colores de fondo de un sitio web, navegador o dispositivo.

¿Debes usar un favicon?

El uso de un favicon es muy recomendable tanto si estás construyendo un sitio web personal, un sitio web para tu negocio local o incluso una presencia online para una marca internacional. Todos los que tienen un sitio web hoy en día deberían utilizar un favicon ya que puede ayudar a lo siguiente:

• Fidelidad a la marca. Si uno de tus objetivos es fidelizar la marca, es una gran idea utilizar un favicon. Los favicons ayudan a transmitir un mensaje de autenticidad, credibilidad y profesionalidad en cualquier sector y mercado. Además, cada vez que los visitantes accedan a tu sitio web, se encontrarán con tu favicon, lo que puede ayudarles a recordar tu marca con el tiempo.
• Sugerencias de búsqueda. Cada vez que un usuario busque información que haga aparecer la URL de tu sitio web en un navegador, tu favicon también aparecerá junto al título de tu sitio web. Esto puede atraer aún más tráfico al sitio.
• Resultados de búsqueda. Si tu sitio web aparece dentro de los resultados de búsqueda de una página después de que un usuario haya introducido su consulta, tu favicon también se cargará y aparecerá. Un logotipo y un favicon visualmente atractivos pueden motivar a los usuarios a obtener más información sobre tu sitio web.
• Historial del navegador. Al utilizar un favicon, este aparecerá en el historial del navegador de tu usuario, lo que facilitará considerablemente la búsqueda de tu sitio web. También es una herramienta útil para la creación de marca a largo plazo.

Utiliza favicons para construir tu presencia online

El uso de favicons no es nada nuevo, pero son extremadamente útiles en todos los sectores a la hora de crear una presencia online. Ya sea que estés creando un portafolio personal, lanzando una startup local o buscando atraer visitantes de todo el mundo a tu sitio web, el uso de un favicon puede ayudar mucho a establecer la identidad de tu marca y difundir lo que quieres ofrecer.

Si buscas una forma sencilla de incorporar favicons a tu propio sitio web, boletines de correo electrónico y campañas de marketing, recurre a Mailchimp. Mailchimp ofrece una solución accesible, todo en uno, para gestionar tu presencia online y los favicons que utilizas para representar tus boletines de correo electrónico, campañas de marketing y sitios web oficiales con facilidad.