Rebaja de PRIMAVERA de hasta 80 %

+ Dominio GRATIS para planes anuales

La oferta termina en:

04 :

01 :

40 :

34

Cómo hacer un favicon

El favicon es un pequeño detalle que hará que tu negocio destaque en la mente de los clientes, por ello no debes olvidarte de cómo hacer un favicon cuando estás construyendo una marca.

Crear un favicon requiere de un esfuerzo mínimo.

Aunque puedes publicar tu sitio web sin uno, realmente no existe una razón para no incluirlo en tu lista de tareas.

Entonces, ¿qué es un favicon? 

Los favicons son pequeños iconos que se muestran en pestañas y en listas de favoritos o marcadores en navegadores como Chrome, Mozilla y Safari.

La palabra “favicon” es una versión abreviada de “favorite icon”, en inglés, pero también tiene otros nombres:

  • Icono de acceso directo
  • Icono de sitio web
  • Icono de marcador

Sin embargo, todos significan lo mismo.

Al entrar al ruedo por allá por 1999, los favicons se presentaron a los usuarios de Internet con el lanzamiento de Internet Explorer 5.

Las empresas suelen utilizar una versión reducida de su logotipo como favicon, reducido a tan solo 16 × 16 píxeles. 

Se utilizan como significantes visuales útiles para los usuarios, de modo que puedan navegar por varios sitios web con facilidad. 

Digamos que estás comprando ropa nueva. Imagina que la docena de pestañas que tienes abiertas en tu navegador representan un centro comercial.

Lo que puedes ver es una fila de pequeños logotipos, de modo que al comparar artículos y precios, es fácil cambiar de tienda. 

Claro, hay metatítulos al lado de cada favicon que podrías leer, pero ¿quién tiene tiempo para hacer eso constantemente? 

Cómo hacer un favicon

Dibujo, hombre, primer plano

Ahora que sabes qué es un favicon web, probablemente querrás uno para tu propio sitio. 

Es una de las formas más fáciles de hacer que tu negocio sea memorable para los usuarios de Internet y también te dará una ventaja de aspecto profesional.

Y si quieres saber cómo hacer un favicon, tampoco es que hay mucho que hacer.

Incluso tienes opciones. ¿Quieres hacerlo tú mismo o que un generador de favicon haga el trabajo por ti?

Como es una habilidad útil de aprender, primero repasemos los pasos que debes seguir para asignar manualmente un favicon a tu sitio.

1. Crea una imagen

Cuando se trata de encontrar un icono adecuado para un sitio web, el logotipo de la marca es lo más obvio.

Pero puedes elegir cualquier imagen para representar tu sitio. Solo asegúrate de que:

  • Sea coherente con tu marca. Utiliza los mismos colores, tipografía y forma.
  • Destaca. Tus clientes deberían poder recordar la imagen fácilmente.
  • No copia ningún otro icono o imagen. No te confundas con otra marca.

Puedes diseñar una imagen de favicon utilizando un editor como Photoshop o un software de código abierto como Canva. Si el presupuesto no es un problema, incluso podrías contratar a un diseñador profesional.

Hay algunos elementos de diseño que deben evitarse por completo si deseas que tu favicon se vea elegante, profesional y memorable. 

Asegúrate de no incumplir estas reglas tácitas:

  • Nada de fotos. Con el tamaño que debe tener tu favicon para caber en una pestaña del navegador, ninguna foto será lo suficientemente clara como para verse bien o incluso remotamente memorable.
  • Sin palabras. Definitivamente podrías incluir una, dos o incluso tres letras en tu favicon, especialmente si es parte de tu logotipo, pero ¿palabras completas? Olvídalo. 
  • Sin marketing. Aunque es excelente para la consistencia de la imagen y la marca, un favicon no es el lugar para herramientas promocionales como banners de “nuevo” o “rebajas”.

Usa el tamaño correcto

Si bien las pestañas del navegador muestran favicons en 16 × 16 píxeles, también podrían mostrarse en un sitio hasta 32 × 32 o incluso 64 × 64 píxeles. 

Asegúrate de que tu favicon se vea mejor en cualquier sitio en el que se encuentre y créalo en un formato más grande. Así existirá la posibilidad de reducirlo a 16 × 16 píxeles.

Usa el formato correcto

Aunque anteriormente los favicons debían guardarse como .ico, ahora también se aceptan los archivos .png. Puedes utilizar herramientas como faviconer.com para convertir archivos al formato .ico.

Sin embargo, si deseas que tu favicon se muestre como un ícono de pestaña anclada de Safari, deberás guardarlo como un archivo .svg. 

Usa el estilo correcto

Vale la pena recordar que los favicons no solo aparecen en las pestañas del navegador y en las listas de marcadores. También será visible en dispositivos inalámbricos y menús de acceso directo.

Con eso en mente, crea dos versiones de tu imagen: una con relleno sólido y otra transparente. De esa manera puedes garantizar que se verá bien donde sea.

2. Sube la imagen a tu sitio web

Hombre trabajando en un computador portátil con perro

Una vez que tengas un ícono listo para usar, el siguiente paso es relativamente simple.

Simplemente cambia el nombre de tu archivo de imagen .png o .ico a “favicon” y carga el archivo en el directorio raíz de tu sitio web.

Si has creado un archivo .png, es probable que debas cargar varios archivos para satisfacer todos los requisitos de tamaño.

Aquí es donde resulta beneficioso convertir tu favicon en un formato .ico. Un archivo .ico puede contener más de un icono, lo que significa que sus distintos tamaños se pueden cargar en tu sitio como uno solo.

3. Agrega código HTML básico

Lo más probable es que no necesites agregar ningún código para ayudar a los navegadores modernos a encontrar tu favicon. La mayoría de ellos detectarán automáticamente favicon.png o favicon.ico y lo establecerán como tu icono.

Dicho esto, vale la pena agregar un código básico para garantizar que el ícono sea visible desde cualquier navegador.

Puedes implementar un código HTML “link rel = shortcut icon” abriendo el archivo header.php y escribiéndolo debajo o después de la etiqueta </head>:

<link rel = “icono de acceso directo” type = “image / ico” href = “/ favicon.ico>

Solo recuerda cambiar el tipo de extensión de archivo según el formato en el que hayas guardado tu favicon.

4. Hazlo versátil

Signo exterior del logo de Apple

Un número creciente de transacciones de comercio electrónico se realizan a través de dispositivos móviles, por lo que si puedes optimizar tu sitio para uso inalámbrico, definitivamente deberías hacerlo.

Si bien no todos en el mundo poseen un dispositivo Apple, deberás crear un ícono de Apple Touch si quieres que tu favicon funcione correctamente para estos usuarios.

Los iconos de Apple Touch representan sitios web que se han guardado en la pantalla de inicio de un teléfono o tableta Apple. 

No todos los sitios han optimizado sus favicons para el uso de Apple Touch. En estos casos, cuando un usuario guarda la URL del sitio en su pantalla de inicio, aparece una versión en miniatura de la página de destino.

Pero si quieres lucir súper elegante puedes crear y cargar un icono diseñado específicamente para su uso en un dispositivo Apple Touch.

Para empezar, el archivo debe proporcionarse en formato .png. También es mejor crear el icono de hasta 180 × 180 píxeles, para asegurarte de que se vea bien en cualquier tamaño de pantalla.

Finalmente, vale la pena agregar un código HTML separado a tu sitio web para tus íconos de Apple Touch. La codificación se vería así:

<link rel = ”apple-touch-icon” tamaños = 180 × 180 ”href =” / apple-touch-icon-180 × 180.png>

Cómo hacerlo aun más fácil

Con suerte recuerdas la parte de este artículo donde decía que había dos opciones para crear favicons para tu propio sitio.

Y tal vez te estés preguntando cómo la segunda opción podría ser más simple que la primera; después de todo, era bastante sencillo.

Ingresa al creador de sitios web.

Diseñado para hacer tu vida más fácil en todos los sentidos, al menos cuando se trata de hacer un sitio exitoso, un creador de sitios web decente viene con un generador de favicon.

Con una herramienta como el generador de favicon de Zyro, se te da toda la información que necesitas para saber cómo hacer un favicon sin los pasos adicionales de codificar, convertir y encontrar un diseñador para hacer la parte más divertida del trabajo.

Entonces, veamos los pasos para crear y cargar un favicon en tu sitio con una herramienta generadora, usando Zyro como ejemplo.

Captura de pantalla de inicio del generador de favicon Zyro

1. Elige una plantilla

Puedes elegir entre una de las plantillas predeterminadas de Zyro o cargar tu propia imagen personalizada.

2. Personaliza a la perfección

Utiliza las herramientas a tu disposición para editar el color, el diseño y el texto de la imagen o plantilla. 

3. Descarga

Ya está, es hora de descargar tu favicon como un archivo .png o .ico y publicarlo en tu sitio.

Cuando se trata de cargar tu favicon generado en tu sitio de Zyro, no hay trabajo de codificación, no es necesario convertir y solo se necesitan unos pocos clics.

Solo dirígete al editor de Zyro. Si tienes varios sitios web, elige el sitio en el que deseas cargar un favicon. 

Selecciona Configuración general en el menú desplegable de configuración, busca Favicon y expande las opciones disponibles para ti.

Ve a Examinar archivos para encontrar el favicon que generaste con la herramienta de Zyro y haz doble clic para cargarlo.

Luego revisa la vista previa de tu icono en los navegadores.

Si te gusta el resultado haz clic en Guardar cambios y se cargará tu favicon. 

Escrito por

Avatar del autor

Luis Jordán

Luis es un profesional del eCommerce y de los constructores de sitios web que ama el marketing digital. Se dedica a ayudar a las empresas a incrementar su presencia en línea a través de las prácticas del marketing. Cuando no está sentado frente al computador, seguramente está cocinando algún platillo o entrenando.

Unirse a la conversación

Tu dirección de correo electrónico no será publicada. Todos los campos son obligatorios.