Hoy voy a intentar explicaros cómo crear un favicon en la web para que salga junto al título en la barra de navegación. De este modo la web quedará más profesional que si dejamos que aparezca el hueco en blanco y ayudaremos al usuario a identificar más rápidamente nuestro sitio.
Lo primero que necesitamos es una imagen de 16 x 16px. Como el tamaño es bastante pequeño, recomiendo tomar un detalle de la web (por ejemplo un trozo del logotipo), ya que de lo contrario, si intentamos abarcar una zona muy grande, no se verá nada. Photoshop cuenta con una herramienta de recorte que nos permitirá coger el detalle que queramos de una imagen y extraerlo al tamaño que deseemos.
Una vez tengamos la imagen, lo que hay que hacer es convertir el formato actual al formato .ico. Para ello necesitamos usar algún programa que nos facilite la conversión para asegurarnos que será compatible con la mayoría de los navegadores.
Por último, cuando ya tengamos el favicon, lo guardamos en una carpeta del sitio y ponemos el siguiente código dentro en el head de la web:
<link rel="shortcut icon" type="image/x-icon" href="icono.ico">Con esto ya tendríamos el icono de favoritos en el navegador, algo que siendo diseñador web freelance estoy acostumbrado a hacer de manera recurrente en los proyectos en los que trabajo.
Como complemento a lo anterior, podéis usar la herramienta online FavIcon Generator de Dynamic Drive para convertir la imagen en .ico. Los formatos que soporta la aplicación son: .gif, .jpg, .png, y .bmp. Depende de si queréis conservar transparencias, usad un formato u otro para convertirlo (.gif y .png).
Deja una respuesta