¿Qué es un favicon y para qué sirve?

Imagina que estás navegando por Internet y tienes un porrón de pestañas abiertas (como hago yo 😅) en tu navegador. ¿Sabrías decir cuál es cuál? Pues aquí es donde entra en juego el favicon.

Un favicon es un pequeño icono que no solo ayuda a los usuarios a reconocer las páginas web de un simple vistazo, sino que supone una pieza fundamental tanto para la identidad corporativa de marca como para la usabilidad de tu sitio web.

En este post, voy a enseñarte qué es un favicon, por qué es tan importante y cómo puedes crear un favicon fácilmente para que tu sitio no pase desapercibido entre muchos.

Coge papel y boli, y léete el post hasta el final.

¡Vamos allá! 🤗

¿Qué es un favicon y para qué sirve?

Un favicon es un diminuto icono gráfico que representa a una web o a una marca. Seguramente hayas visto este icono en distintas ubicaciones de un sitio web, y no te darás cuenta ahora mismo.

Suelen estar en las pestañas en la parte superior del navegador, en la barra de favoritos, en el historial o junto a la URL de la página.

Para que lo entiendas mejor, te muestro de ejemplo nuestro favicon:

Ahora ya te das cuenta de lo que es un favicon, ¿no? ☺️

Pues el objetivo del favicon es ayudar a identificar visualmente una web en el navegador, facilitando al usuario la localización fácil y rápida de tu web entre varias pestañas abiertas o en su lista de marcadores. De este modo, el favicon contribuye a mejorar la usabilidad y el reconocimiento de marca.

¿Por qué es importante tener un favicon en tu web?

Al principio de este post, te mencionaba que el favicon juega un papel fundamental en una página web, y es totalmente cierto. Aquí, te explicaré algunas razones por las cuales es imprescindible tener un favicon en tu web, ¡sí o sí! Y como dice el refrán: el que avisa, no es traidor 😉

• Identificación de marca: Como te decía antes, un favicon ayuda a los visitantes a identificar de una sola pasada tu web entre las distintas pestañas abiertas en el navegador, consolidando así la identidad de tu marca.
• Potencia tu marca: Refuerza la identidad visual de tu marca al estar presente en distintas ubicaciones del navegador y en los resultados de búsqueda, de forma que tu imagen de marca resulte coherente.
• Mejora la usabilidad de tu web: Facilita la navegación al permitir que los usuarios encuentren fácilmente tu web, mejorando así la experiencia de usuario.
• Aumenta la credibilidad: Contar con un favicon en tu sitio web transmite profesionalidad e influye positivamente en la percepción de los usuarios hacia tu web.

Sabiendo todo esto, ya tienes una ligera idea de qué es un favicon y por qué deberías plantearte añadir uno a tu web desde ya. ¡Si es que aún no lo tienes, claro! 🙂

¿Qué formato de favicon hay que usar?

Cuando vayas a ponerte manos a la obra para crear favicons, es crucial entender los formatos y medidas adecuados según el dispositivo en el que se vayan a visualizar. Al fin y al cabo, queremos que se mantenga siempre su calidad como gráfico.

Por eso, debes familiarizarte con los tipos de archivos de imagen adecuados para crear tu favicon. En el pasado, solamente se podían usar favicons en formato ICO de Windows, pero ahora varios navegadores admiten formatos de imagen estándar (como PNG y SVG).

Y seguramente te estarás preguntando: “¿Qué es eso de ICO de Windows, PNG y SVG?” ¡No te preocupes! Voy a explicarte cada uno de estos términos para que no te quede ninguna duda al crear un favicon o, simplemente, para refrescarte un poco la memoria (¡que siempre viene bien!😅)

Favicon en ICO de Windows

Se trata del formato más común para favicon debido a la disponibilidad de bibliotecas de archivos ICO Windows que cuentan con una gran variedad de favicons gratuitos ya diseñados.

El archivo ICO es especialmente útil para un icono de 32 píxeles. Una de las principales ventajas es que es compatible con todos los navegadores y permite añadir imágenes de varios tamaños en un único archivo.

Además, crear un favicon ICO permite dimensionar y escalar la imagen sin depender del navegador. Incluso cuando se guardan otros tipos de archivos, los navegadores suelen preferir mostrar la versión ICO.

Favicon en PNG

El formato PNG es muy popular y puede usarse como favicon sin necesidad de conocimientos técnicos o de diseño gráfico. Está recomendado para aquellos que desean tener alta calidad en sus imágenes originales y gráficos y, además, es ideal para crear un favicon transparente.

Favicon en SVG

El formato SVG para favicon destaca por su ligereza. Crea imágenes de alta calidad sin afectar al rendimiento o a la velocidad de carga del sitio web. Es compatible con la gran mayoría de navegadores como Microsoft Edge, Mozilla Firefox y Opera.

Y estos son los formatos de favicon más frecuentes, pero aquí no queda la cosa. Sigue leyendo, que te daré la clave de cómo hacer un favicon 🙂

¿Qué tamaño de favicon es el correcto?

Con respecto al tamaño de los favicons, es común que tengan dimensiones de 16×16 píxeles o 32×32 píxeles, aunque también pueden ser de 96×96 píxeles para adaptarse a pantallas de alta resolución.

Sin embargo, los navegadores suelen mostrar los favicons en diferentes tamaños según el contexto, por lo que es recomendable crear versiones del favicon en múltiples tamaños para una mejor compatibilidad y visualización en diferentes dispositivos.

Veamos los distintos tamaños de favicon según el dispositivo en el que se vayan a ver:

• 16×16 píxeles: Al diseñar un icono para favicon, debes considerar que el tamaño más utilizado es de 16×16 píxeles. A pesar de que este formato de favicon sea diminuto, proporciona muchas ventajas al mostrar el icono en cualquier parte del sitio web, en la barra de búsqueda o en el navegador.
• 32×32 píxeles: Esta medida de favicon es perfecta para quienes desean promocionar contenido en una barra de tareas o en su sitio web. Además, se adapta fácilmente a Mac iOS y Safari, ya que es el tamaño estándar de la sección “Leer más tarde” de este navegador.
• 72×72 píxeles: Pese a que los favicons tradicionales de 16×16 píxeles eran un formato universal, la aparición de nuevas tecnologías y dispositivos ha ampliado las opciones de medidas. Si quieres llegar a usuarios con dispositivos móviles o iPads, es fundamental contar con un tamaño de favicon de 72×72 píxeles.
• 96×96 píxeles: Para captar la atención de los usuarios de Google TV, es recomendable usar un favicon más grande, de 96×96 píxeles, para evitar que distorsione o pierda calidad al mostrarse en una resolución más alta.
• 114×114 píxeles: Este tamaño de favicon es perfecto para usuarios de la última versión del iPhone. Debido a que los iconos de las aplicaciones son mucho más grandes y la pantalla retina ha duplicado su tamaño, es clave usar un tamaño de favicon que no pierda calidad o se vea pixelado.
• 128×128 píxeles: Estas dimensiones más grandes de favicon están pensadas para aquellos que desean promover su sitio web mediante Google Chrome Web Store.
• 198×198 píxeles: Este tamaño de favicon no suele ser muy común, ya que está enfocado para quienes quieren captar la atención de usuarios que utilizan el navegador Opera o la función Opera Speed Dial.

Ahora ya conoces todos los formatos y tamaños habidos y por haber y ya estás casi listo para comenzar a crear un favicon. Pero ojo, no te pierdas lo siguiente que te voy a explicar si no quieres tener problemas (ya de primeras) con tu favicon 😉

¿Qué debe tener un buen favicon?

Antes de empezar a crear tu favicon, es crucial que conozcas las características que debe tener sí o sí. De este modo te aseguras su efectividad y su usabilidad.

• Reconocible: Debe ser fácilmente identificable y representar claramente la marca de tu sitio web, incluso a tamaños pequeños como 16×16 píxeles.
• Simple: Debe ser sencillo y evitar detalles innecesarios que puedan hacerlo difícil de distinguir en tamaños muy reducidos.
• Relacionado con la marca: Debe reflejar los colores y la identidad visual de tu marca.
• Escalable: Debe adaptarse bien a diferentes tamaños, desde 16×16 píxeles o 32×32 píxeles o más, según las necesidades del diseño y la plataforma.
• Legible: Si tiene texto, este debe ser comprensible incluso en tamaños pequeños y en diferentes fondos de color.
• Compatible: Debe estar en el formato adecuado (.ico) para garantizar la compatibilidad con todos los navegadores y sistemas operativos.
• Optimizado: Debe estar optimizado para que la página web tenga un buen rendimiento de carga.

4 ejemplos de favicon en sitios web

Ahora que has llegado hasta aquí, puede ser útil que te enseñe algunos ejemplos para que te hagas una mínima idea de las diversas opciones de favicon que verás en las páginas web de grandes marcas.

Pero antes de avanzar con esto, y por si no estás al tanto de ciertos términos de diseño gráfico, te explico rápidamente y de forma clara en qué se basan.

• Logotipo: Solo tiene la tipografía de la marca.
• Isotipo: Consta de un simple icono.
• Imagotipo: Es la combinación de logotipo e isotipo.
• Isologo: Junta una parte gráfica con otra de texto. Por ejemplo, los isologos de BWW o Burguer King.

Por lo tanto, al diseñar la identidad de tu marca, es muy importante tener estos conceptos en cuenta para poder adaptarla a cualquier tipo de dispositivo.

¡Ahora, vamos al salseo!

He recopilado algunas marcas reconocidas que utilizan favicons en sus páginas web. ¿Te gustaría ver cómo son?

¡Veamos! 🤗

Favicon de LucusHost

Como no podía ser de otra manera, el favicon de LucusHost. Si nos sigues desde hace tiempo, reconoces nuestro logo, ¿verdad? Contamos con un “imagotipo”. En este caso, consiste en las iniciales del nombre de la marca junto con la tipografía.

Da mucho juego, ya que se puede descomponer por partes para utilizar una u otra. Como puedes ver en la imagen, para el icono del favicon de LucusHost usamos las iniciales.

Favicon de WordPress.org

Otro ejemplo de favicon que quiero mostrarte es el de WordPress.org. Si eres un usuario fiel de este gestor de contenidos tan popular, habrás visto una y mil veces su isotipo tan reconocido que consta de una “W”.

Gracias a su simplicidad, ayuda mucho al utilizarlo como icono de favicon.

Favicon de Elementor

¿Alguna vez te has fijado en el favicon de Elementor? Seguramente sí, sobre todo si has usado este constructor web en alguna ocasión.

Como puedes ver, se trata de un imagotipo. Tiene su parte de imagen (la inicial del nombre de la marca) y la tipografía. Al estar bien diferenciadas ambas partes, también permite descomponerlas fácilmente para usarlo como favicon de Elementor.

Este editor visual suele usar mucho su isotipo, no solo para el favicon, sino también para su propio merchandising.

Favicon de WooCommerce

Otra página web que es probable que hayas visitado en algún momento es la de WooCommerce. Esta herramienta para tiendas online utiliza un isologo en el contenido de su web, pero si te fijas en el favicon de WooCommerce, es totalmente diferente.

Simplemente lo han abreviado aún más, convirtiéndolo en un isotipo. De este modo, se puede identificar claramente la marca, sin perder calidad ni coherencia.

WooCommerce ha tenido en cuenta estos detalles para que su identidad de marca sea fácilmente adaptable en cualquier situación.

¿Cómo lo ves? ☺️

Como puedes ver, hay marcas que cuentan con diferentes representaciones de su branding, (logotipo, imagotipo, isotipo, isologo). Por ello, es necesario desarrollar de forma profesional la identidad corporativa de tu marca para no tener problemas con ello en un futuro.

Ahora que has visto algunas ideas de favicons, ¿te gustaría aprender cómo puedes crear uno para tu sitio web?

¿Cómo crear un favicon?

En estos momentos, seguro que te estarás preguntando: “¿Tengo que ser diseñador gráfico para crear un favicon?”

La verdad es que no necesariamente.

Si controlas de los programas de edición de imágenes como PhotoShop o Illustrator, puedes crear un icono favicon con cualquiera de ellos.

Pero, si no, te voy a dar alguna que otra alternativa para hacer favicon. Estate atento 😉

¿Cómo crear un favicon gratis?

Si tu idea es hacer un favicon gratis, en el mercado encontrarás una gran variedad de herramientas gratuitas de diseño con las que podrás crear tu favicon.

Si te resulta difícil utilizar herramientas profesionales de diseño (suelen ser muy completas y, por lo tanto, complicadas) y no quieres gastar ni un duro en ello, aquí te muestro mis favoritas. Seguro que las conoces 🤗

Canva

Canva es una plataforma online conocida por ofrecer una amplia variedad de plantillas que permiten a cualquier usuario crear diseños gráficos sin contar con conocimientos de diseño. Su interfaz es bastante fácil de usar.

Con Canva, puedes crear desde tu propio favicon hasta presentaciones e infografías, si así lo deseas. Además, si tienes alguna imagen que te gustaría «limpiar» o retocar para mejorar su calidad (para después utilizarla como favicon o para otros fines), también tienes la herramienta para corregir imágenes de Canva.

GIMP

GIMP es una aplicación muy útil para retocar, componer y modificar imágenes. Asimismo, es utilizada para la creación de logotipos, favicons y cualquier tipo de gráficos.

Es posible que una de estas dos herramientas sea lo que buscabas pero, por si necesitas más opciones (más específicas y sencillas incluso), quiero mostrarte otra forma de hacerlo.

¿Cómo crear un favicon con un generador?

Si estás buscando una manera aún más fácil y rápida de crear un favicon sin fondo (o mejor dicho, de crear un favicon transparente), te recomiendo utilizar un generador de favicon.

Aquí tienes algunas herramientas generadoras de favicons que puedes emplear para crear un favicon gratis y, luego, subirlo a tu página web.

Favicon.cc

Favicon.cc es una herramienta online para favicons que te permite cargar imágenes en formatos como jpeg, jpg, png, bmp, gif, ico y cur. Incluye un editor gráfico con funciones básicas de edición para personalizar tus imágenes.

Favicon Generator

Favicon Generator es una de las aplicaciones online más populares para la creación de favicons. Permite imágenes en formatos gif, png y jpeg y las convierte en favicons en formato .ico para web, Android, Microsoft e iOS.

Genfavicon

Genfavicon es una plataforma online gratuita para crear favicons. Con ella, puedes diseñar iconos en varios tamaños y distintos formatos. Incluso proporciona una vista previa para que puedas ver el resultado.

¿Cómo añadir un favicon a tu web?

Si has llegado hasta aquí, es porque estás deseando saber cómo agregar un favicon a tu web. Si estoy en lo cierto, estás en el lugar indicado. Te voy a enseñar cómo hacerlo tanto si tienes una web en WordPress como si es en HTML.

¡Sin más rodeos!

¿Cómo poner un favicon en WordPress?

Si tu página web está hecha con WordPress, tranquilo. En este mismo instante, vas a aprender cómo poner un favicon en tu web en pocos segundos. ¡Así que toma nota!

Paso 1: Accede al menú de WordPress

Una vez en el escritorio de WordPress, ve a la sección de “Apariencia” > “Personalizar”.

Paso 2: Ve a la “Identidad del sitio”

Cuando selecciones “Personalizar”, se abrirá una ventana tal como ves en la captura. Haz clic en el apartado “Identidad del sitio” para añadir tu favicon.

Paso 3: Añade tu favicon a “Identidad del sitio”

Luego verás este panel, desde el cual puedes subir el favicon que creaste anteriormente.

Paso 4: Comprueba el favicon en WordPress

Desde el panel de administración de WordPress, elige la opción “Visitar el sitio” para poder visualizar tu web como un usuario.

Ya puedes comprobar desde el navegador si aparece tu favicon o si necesitas realizar algún que otro ajuste para adaptarlo mejor.

¡Y listo! ¿A qué no ha sido tan difícil? 🤗

¿Cómo poner un favicon en HTML?

Si tu página web está hecha en HTML, también puedes añadir un favicon siguiendo estos pasos:

Paso 1: Agrega el favicon en la raíz del sitio

Carga el archivo del favicon en la carpeta principal de tu directorio web. Puedes nombrarlo de una manera que sea fácil de reconocer a simple vista.

Por ejemplo: favicon.ico

Paso 2: Añade el enlace al HTML

En el “<head>” del HTML, es necesario que coloques la siguiente línea de código dentro de las etiquetas “<head>” y “</head>”.

<link rel="icon" type="image/icon" href="/favicon.ico"/>

⚠️ Advertencia: Asegúrate de ajustar la ruta “href” en caso de que hayas nombrado el archivo de otra forma o si se encuentra en un subdirectorio distinto.

Paso 3: Guarda y actualiza tu web

Una vez hecho esto, guarda los cambios en tu archivo HTML y carga tu sitio web para comprobar que el favicon se vea correctamente en la pestaña del navegador.

Ha sido pan comido, ¿verdad? 🙂

Ahora ya sabes cómo crear un favicon en tu web

Añadir un favicon a tu sitio web puede mejorar significativamente la apariencia de tu marca y la usabilidad para los usuarios, además de ayudar a destacar tu página web entre las demás que están abiertas en el navegador.

Puedes crear tu favicon usando herramientas gratuitas o más profesionales de diseño gráfico como PhotoShop e Illustrator, si así lo deseas. Incluso puedes utilizar un generador de favicons si lo prefieres.

Al crear un favicon, es crucial considerar los elementos esenciales que deben componerlo y realizar pruebas para ajustar el diseño, asegurándote de que se integre adecuadamente en cualquier dispositivo.

Ahora dime, ¿ya tenías un favicon en tu sitio web? ¿O pensabas que no era tan necesario?