Para un mejor entendimiento sobre este artículo, se recomienda la previa lectura de “Favicon la frutilla del postre”.
El siguiente post es una traducción de un tutorial de
Un favicon es un pequeño icono personalizado que aparece al lado de la URL de un sitio, en la barra de dirección del buscador y en las pestañas de las ventanas.
Y cuando digo pequeño, no exagero, el tamaño de un favicon es de 16 píxeles por 16 píxeles. Asi que si te gustan los desafíos de diseño, prueba con este!
Todo lo que necesitas para añadir un favicon a tu pagina, es crear un archivo de Icono de Windows llamado favicon.ico, el cual luego subirás en el directorio principal de tu sitio para hacerlo visible para todo el mundo.
Descargar el plugin
Necesitaras bajar un plugin para poder exportar en Photoshop, el archivo en el formato que se requiere para un favicon (formato de Icono de Windows - .ICO). Puedes bajarte el plugin aquí.
Este plugin lee y escribe archivos ICO en 1, 4 y 8-bit indexados y 24-bit en modo RGB, también lee y escribe 32-bit “XP” iconos (con 8-bit canal alpha).
Si no entendiste nada de la última oración, no te hagas problema.
Asegúrate de instalar el plugin antes de empezar con este tutorial, si lo instalas con el Photoshop abierto, deberás salir y reiniciar el programa para que lo reconozca y te permita guardarlo bajo el formato de archivo de un favicon (.ico)
Empecemos
Dado que 16 x 16 es un área demasiado pequeña, puede ser difícil ser creativo. Por esto en vez de empezar tu proyecto en un área de 16 x 16, hazlo en una de 64 x 64 (siempre que planees redimensionar tus archivos, usa múltiplos de tamaño). Para esto selecciona “Archivo>Nuevo”, y elige un tamaño personalizado de 64 x 64 pixeles.
El diseño
Si ya tienes un logo, deberías reducirlo al tamaño de 16 x 16 pixeles para ver si se adecua y queda bien. Si no luce bien en este tamaño, trabaja con el lienzo de 64 x 64 y trata de crear un diseño simple que incorpore colores de la paleta usada en tu sitio.
Cuando estés listo para probarlo, selecciona Imagen>Tamaño de imagen y reduce el tamaño a 16 x16. Clickea en “remuestrear la imagen” y elige la opción “bicubica” (este último paso solo si tienes Photoshop CS).
Este es el mejor seteo para evitar que una imagen se ponga borrosa cuando redimensionas su tamaño.
Si sientes que el favicon no ha quedado como tu esperabas, sigue probando hasta que estés conforme. Trabajar en un tamaño tan pequeño puede hacer que te lleve unos cuantos intentos antes de lograr un buen resultado.
Guardando tu favicon
Ve a “Archivo > Guardar como” y asegúrate de nombrar el archivo “favicon.ico”. Dentro del mismo menú, en el formato (“tipo”) debes elegir Windows Icon (ICO). Recuerda que este formato solo estará disponible en Photoshop luego de haber descargado e instalado el plugin.
Ya que en el próximo paso necesitaras subir este archivo al directorio raíz de tu sitio web, es una buena idea guardarlo y colocarlo en ese lugar de tu disco duro ahora.
Subiendo el archivo Favicon.ico
Conéctate a tu servidor y sube el archivo Favicon.ico a tu sitio.
Para esto, debes colocarlo en el mismo directorio que tu página de inicio (índex), y dejarlo suelto. Asegúrate de no colocarlo en alguna carpeta de imágenes o algún otro directorio.
Algunos buscadores trataran de rastrear un link en el código HTML de tu sitio hacia el archivo favicon.ico. Puedes ayudar a estos buscadores añadiendo este link en la sección de encabezado de cada página en donde quieras que aparezca el favicon.
Aquí está el código del link que debes incluir: <link rel=”Shortcut Icon” href=”/favicon.ico”> Una vez que hayas añadido este código, recarga todas las paginas que hayas modificado.
Testeo
Si tu nuevo favicon no se muestra de inmediato, prueba refrescar la pagina o escribe un ‘?’ al final de la url, que engañara al browser haciéndole creer que la pagina es nueva y no está en la memoria cache.
Inspiración
Si necesitas algo de inspiración, échale un vistazo a esta hermosa colección de favicones. También mira a la lista de 50 diseños categorizados de Smashing Magazine. Podrías encontrar alguno que despierte una idea para el tuyo.
Eso es todo. Disfruta de tus favicones!
Buen tutorial. Bajaré el plugin pues photoshop por defecto no tiene la capacidad de guardar los archivos con la extensión ico, y por lo tanto había que recurrir a utilidades online para fabricarlos.
hOLA EMILIANO. MUY BUENA EXPLICACION DE LOS FAVICON. Como tu dijiste, son uno de los tantos medios para reforzar tu marca o logo comercial, o como se llama técnicamente “branding”
Saludos y hasta la próxima.
hOLA EMILIANO. MUY BUENA EXPLICACION DE LOS FAVICON. Como tu dijiste, son uno de los tantos medios para reforzar tu marca o logo comercial, o como se llama técnicamente “branding”
Saludos y hasta la próxima.
Gracias chicos, me alegro que les haya gustado y sido util
Un Abrazo a los 2
Emiliano
Hola Karina, me alegro que te haya gustado y servido el tutorial.
Yo veo perfectamente tu favicon en Firefox y en IE, de todas maneras si se visualizo y ahora no (y no has cambiado nada) debería ser problema de Internet Explorer y no tuyo.
De todas maneras y aunque debas mirar con atención que pasa con el explorer porque lo usan tus usuarios, si tu lo usas te aconsejo que lo dejes YA y empieces a usar Firefox.
Saludos
Emiliano
Hola, el tuto esta super. Hace mucho tiempo que quería saber como se hacia esos simbolos antes del http://www., bueno el tema es que no se en que carpeta coloco el plugin(efectos,imp-exp,etc.). POR FAVOR AYUDA.
GRACIAS
Patricio, el plugin del tutorial es una extensión para Photoshop, debes bajar el archivo, descomprimirlo y ejecutarlo.
A partir de ahi, cuando abras photoshop, estarás en condiciones de exportar y guardar archivos con el formato ICO.
Solo debes ejecutarlo, no importa en que carpeta de tu disco lo coloques.
Suerte
Emiliano