¿Qué es un favicon y cómo crearlo para tu página web?


A la hora de publicar una página web recién creada, mucha gente pasa por alto un detalle final que puede marcar la diferencia: el favicon. Este diminuto complemento en tu página web puede dejar una impresión mucho mayor que la de su propio tamaño, así que no subestimes su poder e importancia. Aquí te contamos todo lo que necesitas saber sobre los favicons y cómo crearlos.



¿Qué es un favicon?


Un favicon (del inglés 'favorite icon') es un pequeño ícono de 16x16 píxeles que se usa en los navegadores para identificar una página web. Los favicons aparecen generalmente en las pestañas del navegador, pero también en tu barra de favoritos, en tu historial de navegación, y hasta en la página de inicio de navegadores como Google Chrome. En resumidas cuentas, este elemento sirve como ícono de tu página web o como marca visual para identificarla en internet.



¿Para qué sirve un favicon?


A pesar de su minúsculo tamaño, juega un rol muy importante en cualquier página web. No solo mejora la experiencia del usuario y el branding, también transmite profesionalidad.


Experiencia de usuario: Los favicons actúan como referencia visual de tu página web, y eso mejora la experiencia de usuario. Como el usuario tiende a fijar su mirada en la esquina superior izquierda del navegador, la presencia de este icono de página web ayuda a identificar visualmente tu página y a distinguirla del resto de pestañas cuando tiene muchas abiertas.


Branding: Para tener una identidad de marca totalmente coherente, es importante prestar atención hasta el más mínimo detalle. Los favicons contribuyen al branding y visibilidad de tu página web porque ayudan a que el usuario guarde en su memoria la imagen de tu marca y la reconozca fácilmente dentro y fuera de tu página web.


Profesionalidad: Los favicons añaden autenticidad y profesionalidad a tu página web. Transmiten la imagen de que tu página ha sido cuidadosamente diseñada.



¿Cómo crear un favicon?


Para crear un favicon puedes contratar a un diseñador profesional (si ya estás trabajando con alguno, incluye el diseño del favicon en vuestro acuerdo). Pero también puedes crear un favicon online tú mismo usando un generador de favicons de los muchos que hay disponibles. Te recomendamos el creador de logos de Wix con el que puedes crear un favicon profesional y personalizado para que refleje tu imagen y estilo.


Tamaño: El tamaño del favicon es de 16x16 píxeles. Es el tamaño más común, aunque a veces también aparece con un tamaño de 32x32 píxeles.


Archivo: Para un favicon, el formato de archivo habitual es JPEG o PNG, pero lo recomendable es guardarlo en formato PNG y luego convertirlo en ' favicon.ico'.


Transparencia: En caso de que tu diseño tenga un fondo transparente, asegúrate de guardar tu archivo como PNG con la opción de transparencia activada.





Consejos para diseñar un favicon


Diseñar algo tan diminuto puede parecer muy fácil. Sin embargo, el minúsculo tamaño del ícono de tu página web te obliga a ser muy meticuloso porque no tienes margen de error. Aquí tienes unos consejos para crear un favicon que se adapte a tu marca y página web:


Simplicidad: El pequeño tamaño del favicon exige que su diseño sea claro y discernible. Procura evitar diseños excesivamente detallistas con muchas líneas, texturas y sombras. Apuesta mejor por un diseño llamativo, limpio y fácilmente reconocible.


La página web del diseñdor y artista mexicano David Milan cuyo favicon es una inconfundible letra D, es un gran ejemplo de simplicidad. Otro buen ejemplo es el ilustrador y caricaturista argentino, Juan Perednik , que usa como favicon una de sus caricaturas.




Identidad de marca: Un favicon debe condensar el espíritu de tu página web y marca con el mismo lenguaje visual y esquema de colores que tu página web.

En la página de la marca de moda Sorry, creada con Wix, el favicon en forma de X está en sintonía con el lenguaje visual atrevido y en blanco y negro de sus prendas y logotipo. Algo similar ocurre en eBay. En su favicon se funden los colores de la marca y un ícono en forma de bolsa de compras que captura el espíritu de la famosa página de subastas online.





Apenas texto: Si quieres incluir tipografía (texto) en tu favicon, te recomendamos que no incluyas más de tres caracteres. Usar iniciales o abreviaciones es una buena solución.


Arte es una ONG cuya página web usa como logo y favicon su inicial A en un fondo verde neón para llamar la atención. En cambio, el favicon del estudio de diseño de jardines urbanos Red Fern no tiene ningún texto, solo una hoja de árbol, consiguiendo así la máxima legibilidad.





Uso del logo: Aunque muchos logotipos se ajustan muy bien al tamaño del favicon, la mayoría son ilegibles cuando se reduce su tamaño. Si quieres usar tu logo como favicon, tienes que hacer varios ajustes como omitir tu lema y eslogan, o usar únicamente tus iniciales.


Fíjate en Google. Su favicon es ligeramente diferente a su logotipo, pero su diseño encarna los mismos valores. El favicon de Google solo incluye su famosa inicial G, pero incorpora ingeniosamente los cuatro colores de la marca en una sola letra. Un enfoque distinto es el de la ilustradora española y usuaria de Wix Mercedes deBellard, que usa como favicon las iniciales de su logo 'escrito a mano'.





Color: Ten en cuenta que el favicon aparecerá con fondos de distinto color según el contexto y navegador que se use. Por eso es conveniente probar tu favicon con fondos grises, negros y blancos antes de dar por finalizado su diseño.



Cómo agregar un favicon a tu página Wix


Las páginas web creadas con Wix incluyen por defecto un favicon estándar, pero puedes personalizarlo haciendo upgrade a un Plan Premium y conectando tu página a un dominio.


Para personalizar tu favicon sigue estos pasos:


  1. Ingresa a las 'Configuraciones' en el panel de control de tu sitio.

  2. Haz clic en 'Administrar' junto a 'Favicon'.

  3. Haz clic en 'Cargar imagen' y selecciona una imagen o haz clic en 'Cargar media' para subir una imagen de tu computadora.

  4. Haz clic en 'Agregar a la página'. Podrás ver una vista preliminar de tu favicon en una pestaña de navegador.

  5. Haz clic en 'Guardar' ¡y listo! Tu página web ya tiene su icono web y será visible en la pestaña del navegador cuando presiones el botón 'Publicar'.


¿Inspirado para crear tu propio favicon? Primero, ¡Crea una página web con Wix!



Publicado por Equipo Wix

es03.png