Tutorial tanto para generar iconos con extensión .ico, como para luego poderlos poner en la barra de direcciones (url) de nuestra web.
Ambas cosas son sencillas y fáciles de hacer, pero seguro que a más de uno, incluido el que escribe, habrá pasado más de un quebradero de cabeza hasta conseguirlo.
Al menos en mi caso, el problema es más bien por la caché del navegador, que se comporta de un modo un tanto extraño con este tipo de archivos.
Cómo crear iconos con extensión .ico
- Para hacer correctamente nuestro icono primero debemos hacer una imagen cuadrada, por ejemplo de 32 x 32 pixeles, en jpg, gif o png.
- Si queremos nuestro icono con fondo transparente, entonces esta imagen inicial cuadrada debe ser obligatoriamente en PNG con fondo transparente.
- Una vez tenemos nuestra imagen en ese tamaño, hay que convertirla en .ico.Yo suelo usar siempre esta web que cumple a la perfección su función:
- En esa web subes tu imagen de 32 x 32, le das a «Create Icon» para previsualizarlo online, y si está bien, le das a «Download Favicon»
Cómo colocar nuestro icono .ico en la barra de direcciones de nuestra web:
- Una vez tenemos nuesto icono .ico, es recomendable renombrarlo a favicon.ico, ya que algunos navegadores buscan por defecto esta extensión y lo colocan automáticamente sin hacer nada más.
- Subir nuestro favicon.ico a la raiz de nuestra web, en donde esté colocado el index. Se puede colocar también en la carpeta imágenes o donde se quiera, pero como comentaba en el punto anterior, algunos navegadores como por ejemplo Firefox, Safari u Opera, buscan por defecto esta ubicación.
- Para asegurarnos que el navegador encuentra nuestro favicon, es recomendable insertar esta línea de código entre las etiquetas <head></head> de nuestra web, indicando la ruta del favicon, que como en nuestro caso es en la raiz, queda tal cual:
<link rel=»Shortcut Icon» href=»favicon.ico» type=»image/x-icon» />
Consejos:
- Si usas Firefox, tal vez tengas que cerrarlo y volverlo a abrir para poder ver tu flamente nuevo icono en la barra de direcciones y en las pestañas.
- Si quieres cambiar de icono, no te desesperes si actualizas, borras la caché, cierras y vuelves a abrir y aún así…. permanece el anterior icono, ya que como comentaba al principio de este post, este tipo de archivos .ico se comportan de un modo un tanto extraño con la caché, y a veces hay que borrarla y esperar un tiempo hasta que los cambios se pueden visualizar. En cualquier caso, haz el cambio y prueba desde otro navegador u ordenador y verás que los cambios se han producido correctamente.
