Qué es un favicon, cómo diseñar tú mismo el tuyo y los motivos por los que tienes que tener uno

Qué es un favicon, cómo diseñar tú mismo el tuyo y los motivos por los que tienes que tener uno

Seguramente no los hayas notado (o estás tan acostumbrado a ellos que ni los veas) pero muchas páginas web cuentan con un icono.

Sí, eso que aparece a la izquierda de cada pestaña.

Pues ese pequeño dibujo es mucho más importante de lo que su tamaño podría indicar y en este post, te contamos todo lo que necesitas saber sobre él: qué es un favicon, qué ventajas aporta una web, cómo crear uno y mucho más.

Si tu web no tiene, es de lectura obligatoria. 😉

¿Qué es un favicon?

Como ya es costumbre en este blog,  arrancamos con la definición de la Wikipedia:

Un favicono, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular.

Y como una imagen vale más que 1.000 palabras, te mostramos ejemplos reales de favicons.

Ejemplo de favicon

En resumen, podemos decir que un favicon es una imagen (o un icono, para ser más exactos) que sirve para identificar a una página web.

En concreto, sirve para destacarla en:

  • Los navegadores.
  • La lista de favoritos.
  • El historial.
  • Los marcadores.

Y eso ha sido un pequeño spoiler de por qué tu web tiene que usarlo. 😉

¿Por qué tu web debería tener un favicon?

Porque no puedes permitirte tener una página sin favicon, y el motivo te lo resumimos en 2 puntos.

1. Ayudan a retener al usuario

Puede sonar increíble, pero esa pequeña imagen puede disparar tus métricas de visitas de forma increíble.

¿Cómo es posible? Tiene lógica si te paras a pensarlo…

Para empezar, ofrece un extra de visibilidad entre todas las páginas y por tanto, si una persona quiere acceder a tu sitio lo identificará antes.

Y si no piénsalo, ¿cuántas pestañas sueles abrir cuando navegas? Y de todas esas, ¿a que encuentras mejor las que usan favicon?

Y lo mismo ocurre con el historial, favoritos, marcadores,…

Todo eso por no hablar de que ayuda a mejorar tu imagen de marca, porque da a tu web un aspecto más profesional y cuidado.

Y hablando de conseguir más visitas, te recordamos que en este otro post te enseñamos cómo hacerlo.

2. Mejora tu SEO

Esta es una ventaja oculta de añadir un favicon a tu web. De hecho, ¡poca gente es consciente de ella!

Y es que cuando la gente habla de SEO, suele centrarse en los mejores plugins de WordPress para posicionarhacer cursos SEOconocer sus claves, etc…

Todo eso está muy bien y hasta cierto punto es necesario pero, ¿sabes qué? Una parte muy importante del SEO es que la experiencia del usuario sea lo mejor posible y que vuelva a tu web cuantas más veces mejor.

Y como hemos visto, justo a eso ayuda el favicon.

Por no hablar de los navegadores siempre piden esta imagen y si no existe, recibirán un erro 404. Así que por ahí también ayuda a tu posicionamiento.

Cómo crear tu propio favicon

¡Basta de teoría! Llega el momento de ponerse manos a la obra y enseñarte cómo diseñar un favicon para tu página web. Trabajo para el que tienes 2 opciones, y te enseñaremos ambas.

Eso sí, optes por el método que optes, ten claro lo siguiente:

  • Haz un diseño simple.
  • No incluyas palabras.

Ten en cuenta que «solo» sirve para identificar tu página, así que lo relevante es que destaque.

1. Modo offline

Empezamos por el método más «manual» que consiste en crear el icono para tu página web con un editor gráfico.

¿Cuál es mejor? Eso depende de a quién le preguntes pero para nosotros las opciones son 2: Photoshop o Gimp.

El primero es el software de edición de imagen por excelencia (aunque es de pago) y el segundo es casi igual de bueno y de software libre (y es gratis).

De todas maneras, si estás acostumbrado a la herramienta de Adobe, recuerda que tienes 30 días para usarlo sin pagar nada.

Una vez hayas elegido uno, el primer paso es abrirlo y empezar un proyecto nuevo con las siguientes características:

  • Tamaño: 51×512 pixels.
  • Resolución: 72 ppp.
  • Modo de color: RGB a 16 bits.

Ahora solo tienes que dibujar el favicon según quieras y cuando termines, recuerda exportarlo como png.

2. Modo online

Si lo tuyo no son los editores gráficos (o necesitas hacerlo de forma urgente y no tienes ninguno a mano) existen distintas páginas web con las que diseñarlo de forma online.

De todas las alternativas que tienes, nuestras principales recomendaciones son:

En todas ellas basta con seguir los pasos que van indicando. Fácil, rápido y para toda la familia. 😉

Cómo añadir tu favicon en WordPress

Una vez que tengas el icono listo para tu web, toca subirlo y como es muy probable que utilices este CMS, te explicaremos cómo hacerlo en él.

Además, por suerte para ti y la velocidad de tu página web, no necesitas instalar ningún plugin y es súper-sencillo.

Lo primero (y más obvio) es acceder al panel de administración con tu usuario. Una vez en él, busca en el menú izquierdo la opción «Apariencia».

Pon el ratón encima y en el submenú que aparece elige ahora «Personalizar».

Esta acción abrirá el panel de personalización de tu plantilla y en él, haz clic en «Identidad del sitio». En el menú que aparece ahora, baja hasta que te topes con la sección «Icono del sitio».

Ahí verás una descripción del elemento y abajo del todo, un botón que dice «Seleccionar imagen». Pincha ahí, sube la imagen, dale al botón de «Cambiar» y listo.

Así de sencillo es añadir un favicon en WordPress. 😉

¿Tu página web tiene favicon?

Ahora que sabes qué es un favicon, todo lo que aporta a tu página web y lo fácil que es diseñarlo y subirlo, si tu sitio no cuenta con uno es porque no quieres.

¡Pero nuestro consejo es que lo pongas!

Igual que también te recomendamos que uses un hosting de calidad contrastada para alojar tu página web.

¿Piensas que son muy caros? Lo ideal es que lo veas como una inversión pero de todas maneras, recuerda que en nuestra página de inicio tienes cupones descuento de las mejores empresas.