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.
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.
Paso 1: Crear el ícono
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.
Otra manera más rápida y sencilla de crear nuestro ícono es utilizar servicios online como Logaster. En solo algunos pasos podrás obtener tu archivo con extensión .ico que solo tendrás que subir a tu servidor y pasar al Paso 3.
Paso 2: Convertir PNG a ICO
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: Definir favicon con HTML
Por último, vas a tu código HTML, y entre los tags de <head> le agregarás el siguiente código:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
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:
<link rel="shortcut icon" type="image/x-icon" href="/logos/favicon.ico" />
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.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
