Qué es el favicon de una web y cómo crear uno personalizado

Qué es un favicon y como personalizarlo
Tabla de Contenidos

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo

Si te has encontrado alguna vez con esta palabra en artículos de marketing online y no has sabido responder exactamente a la pregunta de qué es un favicon, este es el artículo que te dejará definitivamente claro en qué consiste, qué importancia tiene y cómo hacer un favicon para tu web WordPress.

Atento/a porque hablamos de identificar a tu empresa, de lo que puede ser la tarjeta de presentación virtual de tu marca y como en una tarjeta de visita física, una buena imagen puede marcar la diferencia frente a tus competidores.

¿Qué es el favicon de una web?

Cuando se habla de favicon, se entiende como esa mini imagen que aparece en el navegador junto a la url o título de una página web que se tiene en ese momento abierta en el navegador.  Podríamos decir que es el icono de tu sitio web que debería estar asociado a la imagen corporativa de tu empresa o marca.

El interés de que tu propia página web tenga un favicon viene a continuación… Imagina que un usuario tiene abiertas varias pestañas en su ordenador o teléfono móvil. De un simple vistazo, si el favicon que has creado es el adecuado, identificará tu página web frente a las demás pestañas abiertas.

Pero además, y de ahí viene el origen de la palabra – fav= favorite, favorito en inglés + icon= icono), el favicon queda marcado si un usuario señala como favorita la url de tu página. Siempre a la vista, siempre a mano. Seguro que te interesa que un usuario elija tu página antes que la de la competencia y el favicon puede ser una estupenda forma de que tu web quede en su memoria.

Que es un favicon

¿En qué formato se tiene que crear el favicon?

En teoría podrías usar cualquier tipo de formato habituales para crear un favicon: jpg, ico, png, gif, etc. Sin embargo, es más que aconsejable que crees el favicon de tu página web bien en formato ico, bien en png, por el simple hecho de que estos formatos soportan transparencias: apuesta por crear un favicon transparente.

Esto es algo a tener en cuenta si por ejemplo, tu icono es redondo. Si usaras un formato jpg, alrededor del mismo aparecería un recuadro blanco, algo que no es atractivo estéticamente. En cambio, al usar formato ico o png, se vería perfectamente el favicon redondo sin nada más alrededor.

¿Y si el icono de tu página web es cuadrado? En ese caso no habría problema en usar formato jpg, aunque por calidad de imagen (ten en cuenta que el favicon es muy pequeño), seguimos recomendando cualquiera de los otros dos formatos antes mencionados, png o ico.

¿Qué icono se debe poner y en qué tamaño?

El icono que elijas y que vas a “transformar” en favicon, dependerá del tipo de proyecto que estás empezando y cómo quieres que los usuarios perciban tu página web. Si tu empresa ya dispone de logotipo, lo más lógico es que utilices como imagen para el favicon su isotipo o isologo para seguir con la imagen corporativa de la marca.

Para que te tengas una idea más clara:

  • Un isotipo es un símbolo que identifica a la marca, sin necesidad de más palabras. Isotipos que seguro que conoces son la M de McDonalds, el parajillo azul de Twitter, o la W de WordPress, por ejemplo.
  • Un isologo consiste en la combinación de icono y texto, combinados entre sí. Forman un “todo” inseparable.

En el caso de que no dispongas ni de isotipo ni de isologo, puedes escoger la inicial del nombre de tu empresa, incluir una fotografía propia (se suele usar sobre todo en blogs y marcas personales), etc.

En cuanto a la forma, ten en cuenta que ha de ser proporcional, con igual medida de alto que de ancho. De usar otras proporciones (más ancho por un lado que de otro) el favicon no se vería adecuadamente en la página web.

Por otro lado, en cuanto al tamaño, el favicon mostrado junto a los títulos de las páginas web mide 16 x 16 píxeles; manteniendo la proporción, puedes crearlo de mayores dimensiones. Lo más recomendable es crear un favicon con tamaño de 32 x 32 píxeles.

¿Por qué es importante tener un favicon?

Antes ya os hemos dado algunas pinceladas sobre la importancia de tener un favicon: propicia que una página web sea fácilmente reconocible por el usuario.  Pero además, el favicon web tiene otras bondades:

  • Capta la atención de los usuarios.
  • Conseguimos mantener una línea visual coherente en nuestra presencia digital.
  • Consigue un código fuente de nuestra página web limpio: el navegador automáticamente buscará el archivo “favicon.ico”. (Cuidado: si no lo encuentra, arrojará un error 404).
  • Ayuda a potenciar la imagen de marca de la empresa.

Un favicon puede usarse en cualquier página web, blog, tienda online o app. Además, el favicon que se realiza en los formatos actuales, es soportado por todos los navegadores (Google Chrome, Safari, Microsoft Edge, Firefox, Internet Explorer).

El favicon se mostrará tanto en las páginas abiertas como en los marcadores y además en como icono de app cuando el usuario la ancla a la pantalla de inicio de su teléfono móvil. Tres ubicaciones ideales para ser recordados por los usuarios, para tener un hueco en su mente.

¿Cómo hacer un favicon personalizado para tu web o blog en WordPress?

Crear un favicon para web es mucho más fácil de lo que pueda parecer a priori y tienes diferentes formas de hacerlo sin demasiadas complicaciones. Nos vamos a centrar en dos: herramientas de edición de imagen, en nuestro caso Photoshop y en herramientas de creación de favicon online (gratuitas).

¿Cómo crear el favicon en Photoshop?

Photoshop hoy en día es el editor de imágenes más completo y utilizado. Basarte en otras herramientas como Paint podría sacarte de un apuro, pero no es aconsejable. Así que vamos a centrarnos en cómo usar Photoshop para crear un favicon.

Una vez que hayas elegido la imagen que quieres que se convierta en el favicon de tu página web, tienes dos opciones:

  • Abrir un proyecto nuevo en Photoshop con un tamaño de 32 x 32 píxeles. Inserta en él la imagen que has elegido. Ahora tendrás que adaptar la imagen al tamaño del lienzo y eliminar la capa “fondo” para que no tenga fondo blanco y se quede transparente.
  • Abrir directamente la imagen elegida en Photoshop, redimensionándola al tamaño de 32 x 32 píxeles (y eliminando la capa “fondo” para conseguir que el mismo sea transparente).

Una vez que la imagen tenga el tamaño adecuado, con fondo transparente y atractiva visualmente, guárdala en formato png. Photoshop no permite guardar imágenes en formato ico, así que si este es el formato que necesitas, tendrás que llevar a cabo unos pasos más.

Pasos para convertir una imagen en icono de Photoshop

Sigue los siguientes pasos y verás cómo no te resulta nada difícil convertir una imagen en icono de Photoshop.

Paso 1: descarga el archivo para guardar en formato .ico

Para convertir una imagen png a .ico tendrás que descargar este archivo que nos permite guardarla justamente en formato .ico.

Paso 2: pega el archivo en los plugins de Photoshop

Una vez descargado en formato ZIP, descomprime la descarga y quédate con la parte que nos interesa, el archivo ICOFormat64.8ibi, que tienes que pegar en la instalación de Photoshop. Para las últimas versiones la ruta será algo así:

  • Si tienes Photoshop en inglés> C:Program FilesAdobeAdobe Photoshop CC2020RequiredPlug-InsFiles Format
  • Si tienes Photoshop en español> C:Archivos de programaAdobeAdobe Photoshop CC2020PluginsFormato de archivos.

Una vez pegado el archivo, abre o reinicia Photoshop y sigue con el siguiente paso.

Paso 3: convertir la imagen en icono

Retoma la imagen que quieres usar como favicon, elige “guardar como” y seleccionar entre todas las opciones que aparecen en el despegable la extensión .ico. Recuerda usar los tamaños adecuados, 16 x 16 ó 32 x 32 píxeles, ya que en imágenes más grandes la extensión .ico no aparecerá.

> Importante: guarda la imagen con el nombre de favicon.ico.

 

Generar el archivo favicon.ico gratis con una herramienta online

Una opción rápida y fácil es utilizar una herramienta online para crear el favicon para web. Puedes usar Favicon Generator o Favicon Ico Generator, aunque puedes encontrar muchas más de este tipo.

Ambas herramientas online para crear un favicon funcionan de la misma manera:

  • Sube a la herramienta elegida el archivo de tu imagen png / jpg / gif en tamaño 32 x 32 (o 16 x 16 si lo has creado con estas dimensiones).
  • Elige si quieres el favicon para su uso en diversos dispositivos (Webs, Apps, Android o iOS -iPhone y iPad-) o solo un favicon.ico para web.
  • Al pinchar en “Create favicon”, la herramienta generará el favicon.ico listo para descargar en tu ordenador y usarlo en tu página web.

Cómo generar un favicon

Cómo subir tu favicon.ico a los archivos de tu web de WordPress

Añadir tu favicon a una web en WordPress es muy fácil:

  • En el escritorio de WordPress, ve a Apariencia > Personalizar 
  • Busca Identidad del sitio > Icono del sitio
  • Seleccionar imagen: se abrirá la biblioteca de medios de tu WordPress.
  • Sube tu archivo favicon.ico y selecciónalo.
  • Como tendrá las medidas requeridas, no será necesario recortarlo.
  • Dale a publicar para que se guarden los cambios y ya tendrás visible tu favicon al lado del título / url  de tu web.

En principio el archivo de tu favicon no debería pesar mucho; si aún así quieres que sea más ligero, utiliza alguna herramienta para optimizar la imagen como por ejemplo TinyPNG.

Crear favicon directamente en WordPress

Tienes otra opción más y aunque las anteriormente descritas son más recomendables porque podrás utilizar tu favicon para más utilidades, esta sin duda es la más rápida y fácil. WordPress te da la opción de crear el favicon directamente en tu sitio web.

Los pasos son prácticamente iguales a los anteriores:

  • Ve a Apariencia > Personalizar
  • Identidad del sitio > icono del sitio
  • Seleccionar imagen > se abrirá la biblioteca de medios de tu WordPress.
  • Elige una de las imágenes que ya tienes incluida en tu biblioteca o sube una.
  • WordPress te dará la opción de recortar la imagen para adecuar el tamaño.
  • Recorta, publica los cambios y ya tendrás el favicon visible para tu diseño web en WordPress.

Subir favicon.ico usando CPanel o FTP

Puedes subir el archivo favicon.ico también utilizando CPanel o subirlo por FTP:

  • Ve a archivos del tema o plantillas.
  • Sube el archivo favicon.ico a la carpeta de imágenes.
  • La ruta de acceso variará dependiendo de la plantilla, pero será algo así> wp-content/themes/nombre de la plantilla/images/favicon.ico 

En el caso de que uses otro CMS que no sea WordPress, también podrás seguir el mismo proceso; tu servidor de hosting puede ayudarte a encontrar el lugar correcto donde pegar el archivo favicon.ico en caso de duda.

Conclusión

A todos nos gusta que nuestra página web sea recordada por el usuario. Que lo tenga muy fácil para reconocerla entre las demás, que la identifique de un simple vistazo entre todas las pestañas que tiene abiertas en el navegador o que encuentre tu app en su pantalla de inicio a la primera.

Con un favicon bien ideado es posible. Recuerda mantener la línea visual corporativa de la empresa, crea tu favicon de forma fácil tal y como hemos explicado en este artículo y espera resultados con este tipo de tarjeta de presentación virtual de tu marca.

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
One Response

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *