Como crear un favicon con Photoshop y subirlo a tu web

Emiliano

Créeme, no necesitas ser un usuario profesional de photoshop, con solo tener el programa y seguir los pasos podrás fácilmente crear tu favicon y subirlo a tu blog en minutos.

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 Jennifer Apple de PhotoshopSupport.com. (En ingles).

Logos y favicones

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
Logos y faviconesSi 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
This entry was posted on Miércoles, Febrero 27th, 2008 at 9:27 pmand is filed under Diseño / Herramientas, Mejora tu Blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

21 Responses to “Como crear un favicon con Photoshop y subirlo a tu web”

Leave a Reply