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.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE DE CONTENIDOS
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.
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.
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.
Cupón: horizonweb
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
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 favicon de formato PNG a ICO
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Amigo, hice todo tal cual lo indicaste en el vídeo y no me salio el Favicon. Tengo la plantilla Zeriff Lite, no se si esa plantilla tenga algún problema para que apareza el fagicon
Buenas Mario,
No conozco la plantilla Zeriff Lite. Puedes probar a subir la imagen con otro formato que no sea .ico. Pero, yo lo que haría sería contactar y consultar al desarrollador de la plantilla