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

Qué es un favicon y como personalizarlo
Álvaro Peredo

Contenido escrito y verificado por:
Álvaro Peredo

Última actualización: 15/05/2024 por Álvaro Peredo
Tabla de Contenidos

_ Te asesoramos sin compromiso _

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

El favicon es mucho más que un simple detalle visual en la pestaña del navegador. Es la representación visual de tu marca en el mundo digital.

Este pequeño ícono, que suele pasar desapercibido, desempeña un papel crucial en la identidad y reconocimiento de tu sitio web, aportando un toque de personalización y profesionalismo que marca la diferencia.

Entender qué es un favicon y cómo crear uno personalizado puede ser el primer paso para potenciar la imagen de tu sitio web y destacarlo entre la multitud en la vasta red de Internet.

Desde transmitir la esencia de tu marca hasta facilitar la identificación de tu sitio entre múltiples pestañas abiertas, el favicon es una herramienta poderosa que merece toda tu atención.

En este artículo, exploraremos a fondo este recurso, por qué es importante y cómo puedes crear uno personalizado que refleje la identidad de tu marca de manera efectiva.

¿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.

Por eso, este recurso puede ser una estupenda forma de que tu web quede en su memoria.

¿En qué formato se tiene que crear?

En teoría podrías usar cualquier tipo de formato habitual para crear un favicon: jpg, ico, png, gif, etc.

Sin embargo, es más que aconsejable que lo crees bien en formato ico, bien en png, por el simple hecho de que estos formatos soportan transparencias.

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?

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 lo 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 crearlo 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 crearlo 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 subir tu favicon.ico a los archivos de tu web de WordPress

Añadirlo 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 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 utilizarlo 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.

Resumen

Resumimos a continuación los principales puntos a tener en cuenta en torno a la creación y confiuración de favicons.

Son también conocidos como iconos de favoritos o favicon.ico, son pequeños iconos que aparecen en la barra de direcciones del navegador, en las pestañas abiertas y en los marcadores. Aunque son pequeños, juegan un papel importante en la experiencia del usuario y la marca.

Tamaño.

El tamaño estándar de un favicon es de 16×16 píxeles.

Algunos navegadores también admiten tamaños más grandes, como 32×32 píxeles.

Es recomendable crear un favicon con varios tamaños para garantizar una visualización óptima en diferentes dispositivos y navegadores.

Formato.

El formato más común para los favicons es el .ico. Sin embargo, algunos navegadores también admiten formatos como .png y .gif.

Se recomienda utilizar un formato que sea compatible con la mayor cantidad de navegadores posible.

Diseño.

El diseño debe ser simple, limpio y reconocible.

Debe ser fácil de ver, incluso en un tamaño pequeño.

Se recomienda utilizar un logotipo simplificado o un símbolo que represente tu marca.

Es importante utilizar colores consistentes con tu identidad de marca.

Importancia

Estos iconos ayudan a los usuarios a identificar fácilmente tu sitio web en la barra de direcciones y en las pestañas abiertas.

Un favicon bien diseñado puede mejorar la experiencia del usuario y la credibilidad de tu marca.

Los favicons también pueden ayudar a mejorar la tasa de clics en los resultados de búsqueda.

Consejos para crear un buen favicon:

Utiliza un fondo transparente para que destaque en diferentes fondos.

Evita utilizar texto o detalles demasiado pequeños.

Asegúrate de que se vea bien en modo claro y oscuro.

Ten en cuenta las directrices de diseño de los diferentes navegadores.

Herramientas para crear favicons:

Existen muchas herramientas gratuitas y de pago en línea que puedes utilizar para crearlo. Algunas herramientas populares incluyen:

  • https://favicon.io/
  • https://realfavicongenerator.net/favicon_compatibility
  • https://www.favicon-generator.org/
Qué es el favicon
Qué es el favicon de una web y cómo crear uno personalizado

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 *