Como crear un favicon con Photoshop y subirlo a tu web
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!
No hay post relacionados
Febrero 28th, 2008 at 5:24 am
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.
Febrero 28th, 2008 at 6:27 pm
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.
Febrero 28th, 2008 at 6:27 pm
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.
Febrero 28th, 2008 at 7:27 pm
Gracias chicos, me alegro que les haya gustado y sido util
Un Abrazo a los 2
Emiliano
Marzo 22nd, 2008 at 7:21 pm
Marzo 22nd, 2008 at 7:59 pm
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
Abril 19th, 2008 at 1:45 am
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
Abril 19th, 2008 at 12:08 pm
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
Agosto 27th, 2009 at 6:50 am
No necesitaís instalar ningún plugin.
Guardaís la imagen en formato jpg y despues cambiaís la extensión del archivo (botón derecho en la imagen y cambiar nombre), la renombraís a ico y listo ya teneís un archivo valido para cualquier favicon de la web.
Septiembre 22nd, 2009 at 3:54 pm
[...] este link se explica como crear el .ico con photoshop y como usarlo. Dejar un [...]
Diciembre 13th, 2009 at 11:44 pm
No hizo mención a al tutorial original?
Muy mal!
Aqui el original: http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
Diciembre 14th, 2009 at 10:45 am
Rpinop, no se donde estabas leyendo, pero en el 2º parrafo del post esta la mención y el link al tutorial original.
Saludos
Marzo 16th, 2010 at 2:18 pm
Es cierto si se hace mención a la fuente del tutorial original.
Hay que leer bien antes de criticar.
Mayo 16th, 2010 at 2:23 pm
Muchas gracias, de verdad.