Crear favicon para tu Web

En esta ocasión, te traemos un tutorial, muy sencillo de seguir, para lograr obtener tu favicon. El favicon es simplemente un pequeño logo que representa tu página web. Este va al lado de tu URL, y será lo que el usuario ve mientras tenga tu página web abierta. Por ahora, te enseñaremos vía HTML cómo lograr mostrarlo.

Crear un FAVICON para tu página web

En otras palabras, el favicon es otra forma de identificar tu página web. Como vemos en la siguiente imagen, este acompaña el título de una web en la pestaña del navegador de Internet.

Favicon de Regardis

 

PASO 1

Primero que todo, debemos aclarar que el formato de este ícono debe terminar en ‘.ico’. Los navegadores ahora están aceptando diferentes formatos, pero creo que es mejor adecuarse al principal.

Requerimientos:

  • Ícono de 16 x 16 pixels (o 32 x 32)
  • Acceso al código HTML de tu Web
  • Programa Gráfico como Photoshop

Lo primero que debemos hacer es crear nuestro ícono, mientras mas simple y limpio, será mejor. Este puede ser creado con fondo transparente, y lo recomendable es que se grabe la imagen con el nombre ‘favicon’ y con la extensión ‘.png’ para la calidad de la imagen.

 

PASO 2

Luego de tener nuestro archivo favicon.png, le cambiaremos la extensión por ‘.ico’. Esto se puede hacer en tu PC, manualmente, le das botón derecho al archivo,  le das click a cambiar nombre y luego reemplazas .png por .ico. También podrían utilizar un conversor online para cambiar de .png a .ico.

Ahora, simplemente subes el archivo a tu servidor.

 

PASO 3

Por último, vas a tu código HTML, y entre los tags de <head> le agregarás el siguiente código:

Esto indica que usaremos el archivo llamado favicon.ico como nuestro favicon principal. Este archivo está en el root de nuestro sitio web. Si está en otra carpeta, hay que indicar eso. Por ejemplo, si lo hemos guardado adentro de la carpeta logos, entonces nuestro código sería el siguiente:

Esto sería todo, luego podrán entrar a su sitio web y encontrar la pequeña imagen en la barra de navegación. Espero que este tutorial les haya servido, y cualquier duda, la comentan.

 

 

Suscríbete a nuestra lista de correo

Etiquetas:, , , ,

Publicidad

Deje un comentario