Un favicon no es mas que un pequeño gráfico, normalmente de 16×16 pixeles, que aparece en la barra de direcciones del navegador cuando visitamos ciertas páginas. Aunque parezca una chorrada, no deja de ser otro detalle mas de cara a la personalización de tu sitio y ayuda a los usuarios a identificarlo visualmente. Crearlo no es complicado, puedes diseñarlo a mano pero también existen muchas páginas webs que hacen la función de generador online de favicon, automatizando todo el proceso.
En su día escribí una entrada donde mencionaba un servicio de este tipo llamado Genfavicon para crear un favicon online pero existen muchas mas, y hasta donde yo se todas pecan de lo mismo, te crean un favicon sin fondo transparente. Cuando el favicon es cuadrado no hay problema, pero si tiene una forma mas irregular queda horrible ver el fondo sin aprovechar del favicon todo de color blanco. Lo ideal es que esos pixeles que el favicon no aprovecha se hagan transparentes, así que os voy a enseñar una manera muy sencilla de crear favicones transparentes con Photoshop sin necesidad de acudir a ninguna página y por supuesto usando transparencias.
Antes de empezar a trabajar, y ya que hemos dicho que vamos a usar Photoshop, es preciso que descargues e instales un plugin para poder crear archivos .ICO, ya que Photoshop no es capaz de exportar de serie a dicho formato (al menos las versiones CS y CS 2 que son con las que he trabajado yo). El enlace para la descarga os lo dejo al final de la entrada, no es mas que un archivo comprimido en formato .ZIP. Lo descomprimimos y a continuación simplemente copiamos el archivo con el nombre “ICOFormat.8bi” dentro del apartado de formatos de archivo de la carpeta de plugins de Photoshop.
(Normalmente suele estar ubicada en una ruta similar a esta C:\Archivos de programa\Adobe\Photoshop CS\PlugIns\Formatos de archivo. Una vez hecha la copia, el plugin ya está instalado y disponible para su utilización la próxima vez que arranques Photoshop.)
Ahora vamos a ver como crear el favicon.
Yo voy a diseñar uno muy básico con forma redonda y usando un tamaño de lienzo de 80×80 pixeles, para trabajar mas cómodo, aunque cualquier tamaño cuadrado os valdría. No obstante recordad que el tamaño final del favicon va a ser de 16×16px, por lo que el diseño debe ser sencillo y sin detalles ya que luego se pierden al disminuir el tamaño.- Observad que el fondo que no está pintado tiene la clásica cuadrícula de ajedrez indicando que luego se verá transparente. Una vez terminado el diseño cambiamos sus dimensiones (desde el menú “Imagen”, opción “Tamaño de imagen..”) a 16×16 pixeles, que será su tamaño final.
- Por último vamos al menú “Archivo”, seleccionamos la opción “Guardar como..”, escogemos el formato de archivo .ICO y le ponemos de nombre al resultado favicon.ico
Con esto ya tenemos nuestro favicon finalizado, pero aún falta colocarlo en su sitio para que empiece a aparecer en la barra de direcciones. Tras crear el favicon, lo mas apropiado es subirlo con tu cliente de FTP favorito a la raíz del sitio web y a continuación es preciso añadir una simple linea de código en la cabecera de tu sitio web o blog.
Si tienes un blog basado en Wordpress, es algo tan fácil como incluir una linea como ésta en el archivo header.php entre las etiquetas <head> y </head>.
Si es cualquier otro tipo de web, puedes adaptar la sintaxis y poner algo similar a lo siguiente, el caso es que el sistema sepa en todo momento donde está el icono alojado.
El resultado final..
Y ya está.. joer, soy incapaz de hacer una entrada breve ni aunque me obliguen :P Vaya tocho me ha salido solo para explicar algo tan trivial. Espero al menos que os sea útil ;)
Venga, que paséis unas felices fiestas y portaros bien, ojo con el alcohol!
ohhh
y si me ayudas como regaño navideño??
es que soy la torpeza en grado sumo.
pero también un dulce
(ojitos pestañeando)
felix navidad!!!
[...] Xeduced.com, han publicado un bastante útil tutorial que nos muestra lo fácil que es crear un favicon con fondo transparente, usando para ello Adobe Photoshop + un plugin para guardar el trabajo final en [...]
Yo siempre tengo problemas de espacio con los dichosos favicons.. :) util para muchos veo que sigues escribiendo y no abandonas tu blog xD
Tenía el mismo problema que vos, pero como no sé usar bien el photoshop (ni lo tengo instalado) seguí buscando y encontré un sitio que si subes una imagen .gif con fondo transparente, te mantiene el fondo transparente en el favicon. A mí me funcionó lo más bien.
http://tools.dynamicdrive.com/favicon/
[...] http://www.xeduced.com/2008/12/24/como-crear-un-favicon-con-transparencia/ [...]
Muchísimas gracias, me ha servido bastante este artículo, por fin pude tener mi favicon .ico transparente ^^
Si me permites, agrego este código, para que también se pueda visualizar el favicon en IE sin ningún problema :3
Un Saludo, pasa lindo día ^^
Por lo visto no se pudo publicar =/
Espectacular, gracias. Sobre todo por el plugin.
Gracias, ya lo hice y se ve muy lindo en la barra de direcciones, pero en las pestañas se sigue viendo el cuadro blanco. Qué hacer?
Gracias
GRacias por el plugin, pero no logro que se vea transparente en el navegador :(
SAludos =)