Seleccionar página

En este post vamos a ver qué es un favicon y por qué tu web debe tener uno. Veremos también como podemos crear un favicon y que herramientas podemos utilizar.

Si lo que quieres saber es como añadir un favicon a WordPress te dejo este post: Cómo cambiar o añadir una favicon a WordPress

La manera de añadir el favicon va a depender de las circunstancias de cada caso particular.

 

 

1.- ¿Qué es un favicon?

 

El favicon en una imagen cuadrada en formato .ico que se muestra en la pestaña del navegador en la que se ha abierto el sitio web.

El favicon asociado a una web también se mostrará cuando dicha web se añada a los favoritos del navegador.

 

Qué es el favicon

El favicon aparece en la pestaña actual del navegador y en los favoritos

 

El favicon es nuestra marca, es algo así como el logo pero que se muestra en otras partes diferentes.

Habitualmente podremos utilizar alguna parte del logo para crear nuestro favicon, pero también podemos crear un favicon que no esté sacado del logo.

Tienes que tener en cuenta que el favicon debe ser cuadrado.

 

 

2.- Cómo crear Favicon

 

Para que el favicon quede perfectamente adaptado a los colores de su entorno, mi recomendación es hacer el favicon en .png con fondo transparente y posteriormente pasarlo a formato .ico

Lo que habitualmente haremos para crear el favicon será abrir nuestro logo en Photoshop y recortar un cuadrado, quitar el fondo para dejarlo transparente, ajustar el tamaño y guardar para web con formato png-24

Hoy en día lo ideal es usar un tamaño grande para crear el favicon ya que dependiendo de dónde se muestre necesitará un tamaño u otro. Si utilizamos un tamaño muy pequeño para crear el favicon y luego éste se muestra en un lugar donde se tiene que ampliar perderemos resolución.

 

cómo crar el favicon con photoshop

Crear favicon

 

De esta manera podremos generar el favicon para nuestra web.

Mi recomendación es que utilices por lo menos unas dimensiones de 128×128 px para crear el favicon. También puedes probar en otras dimensiones como 64×64 px, 32×32 px o 18×18 px.

El dispositivo ampliará o reducirá las dimensiones de la imagen según le convenga.

 

 

2.1.- Convertir favicon a formato .ico

 

Una vez tengas el favicon creado y guardado en png-24 lo que deberemos de hacer es pasarlo a formato .ico

Para ello vamos a utilizar un sitio web exclusivamente creado para convertir imágenes creadas en formato PNG a formato ICO

 

IR AL SITIO

 

Haz clic en el rectángulo con el texto: “Drop your .png or .ico files here, or clic to select them manually!”

Se abrirá una ventana en la cual podrás seleccionar el archivo del favicon en formato PNG que has creado anteriormente.

Una vez subido el favicon aparecerá un rectángulo rojo en el lateral izquierdo con el favicon desde donde podremos descargar el favicon ya en formato ICO

Haz clic sobre la flecha para descargar el archivo del favicon en formato .ico

 

Convertir formato del favicon de .PNG a .ICO

Convertir favicon de formato PNG a ICO

 

 

Compártelo ya!!

▷LLÉVATE TODOS ESTOS RECURSOS GRATIS

 

LLEVATE GRATIS:

 

👉 CURSO WORDPRESS Y DIVI (24 Clases en vídeo)

 

👉 MASTER CLASS: Claves para crear una web que consiga clientes

 

👉 TALLER SEO: Keyword research + 👉 Guía para crear una web profesional + 👉 Training Mis plugins imprescindibles

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com