Utilidades para crear un favicon

En la UNION DE BLOGGERS HISPANOS hacen un repaso sobre la creación y diseño de un favicon, es esa imagen chiquita que se ve al lado de la url de una web en la caja de direcciones de tu navegador. Es un signo distintivo de la web que estás visitando, puede ser un logo diminuto o una letra, o incluso un dibujo original.

En internet tenemos un montón de herramientas en línea que te pueden ayudar a hacerte uno, o a inspirarte en algún modelo de tantos que hay, a continuación os exponemos unas cuantas:

Manuales

  • ¿Cómo hacer un favicon con photoshop?: En este sencillo manual su autora nos explica cómo hacer un favicon con el photoshop e incluso el plugin que necesitas para convertir los archivos en .ico (Está en inglés)

Ejemplos para que te inspires

  • Smashing Magazine: Pone a tu disposición una serie de favicones de varias webs para que te sirvan de inspiración a la hora de realizar el tuyo.

Generadores en línea de favicon

  • Favicon from pics: Este te genera el archivo .ico que necesitas subir para que aparezca tu imagen de favicon, súbelo desde tu propio pc.
  • DinamicDrive: Entre sus muchas herramientas encontramos un generador en línea de favicon con todos los pasos que hay que seguir y el código que tienes que poner entre las etiquetas <head></head> de tu blog para que se visualice.
  • DeGraeve.com: Pone a tu disposición tanto un editor para que fabriques tu propio favicon o la posibilidad de subir cualquier imagen y convertirla en .ico para que puedas subirla a tu servidor.
  • Favicongenerator: Otro generador de archivos .ico que convierten cualquier imagen de 100×100 en un favicon.

Edición de favicon en línea

  • DeGraeve.com: Aparte de ser un generador de archivos .ico también sirve para crear en línea tus propios favicones.
  • Javascript Favicon generator: Diseña tu favicon y finalmente obtiene la url directa a la imagen, ideal para los bloggers que publican en Blogger u otros scripts de hosting remoto.

Alojamiento para favicones:

  • MyFavatar: Aloja gratuítamente tus favicones o favatars

Plugins y Software

  • Telegraphics.com: Selección de plugins y programas gratuítos para pc relacionados con los favicon.

Tutorial para hacer un favicon:

  1. El primer paso es tener una imagen, para ello podemos hacer lo siguiente, o bien realizar la imagen en nuestro editor, o bien utilizar directamente uno de los editores para favicon en línea que os expusimos antes. La imagen basta con que tenga un tamaño de 16×16 px, hay algunos generadores que las aceptan más grandes pero ese es un tamaño óptimo.
  2. Si no habéis utilizado un editor en línea para vuestro favicon, ahora deberéis convertir esa imagen en un archivo .ico (los editores en línea que expusimos ya los realizan automáticamente) que es el formato de imagen que se puede poner de favicon. Para generar un archivo .ico podéis utilizar los diferentes generadores que también expusimos o el software del que dispongáis para hacerlo.
  3. Una vez generado y descargado vuestro favicon, ahora tendréis que subirlo al directorio de vuestra web en el servidor. Si no disponéis de él también hay varias alternativas como MyFavatar o Javascript Favicon Generator (las letras asiáticas son el enlace a la imagen).
  4. Cuando tu favicon se encuentre en el servidor, simplemente tienes que escribir el código que lo llama entre las etiquetas <head></head> del código de tu blog.

<link rel="shortcut icon" href="/favicon.ico" />

Siendo /favicon.ico la ruta a tu favicon, si por ejemplo tu favicon está en otro alojamiento distinto, pon la ruta completa a la imagen.

<link rel=”shortcut icon” href=”http://www.alojamientodetufavicon.com/favicon.ico” />

11 Responses to Utilidades para crear un favicon

  1. […] • Para más información sobre el tema: Utilidades para crear un favicon […]

  2. Gem@ dice:

    Muy buena información

  3. Rob dice:

    Aquí te dejo una web para crear favicons que no está reflejada en la lista ya que está recién salida del horno. Espero que sirva de ayuda porque es de las pocas que he visto que están en español y en inglés.

    Un saludo

  4. Pablo dice:

    Gracias por compartir este material

  5. Recuweb dice:

    Aqui teneis otro generador de favicon online

    http://herramientas.recuweb.com/favicon/

    Espero que os sirva,

    Saludos

  6. Edwi Molina dice:

    Man quisiera saber en si donde y como puedo poner eso, xq sinceramente no entendi, ademas, si alguien sabe, favor decirme para que entre a mi web y me diga donde, como, esperando, mi web es http://www.frusps.forospanish.com

  7. victor dice:

    Hice todo y nada que me funciona

  8. Edwi, te recomiendo que pongas la dirección que pones en el enlace del código que aparece arriba directamente en el navegador, a ver si se ve. Normalmente, el fallo está en que no se pone bien la dirección del favicon.

    Hay también otra guía sobre como hacer un buen favicon en http://www.getfavicon.org/es/howto.php auqnue está en español no lo ponen en la lista de arriba y me parece bastante interesante.

  9. Dan dice:

    «http://programas.todotrucos.co.cc/» ACA encontre la forma perfecta para colocar mi favicon y que aparezca en cualquier navegador.

  10. Dan dice:

    encontre la forma perfecta para colocar mi favicon y que aparezca en cualquier navegador. en esta pagina=http://programas.todotrucos.co.cc/

Deja un comentario