How to create a favicon.ico for your web site Cómo crear un favicon.ico para su sitio web

by Ross McKillop on May 2, 2007 por Ross McKillop el 2 de mayo de 2007

Web Design & Dev

This brief tutorial will show you how to create a unique favicon.ico (that icon in your address bar - ex. Simplehelp’s favicon.ico is Este breve tutorial te mostrará cómo crear una única favicon.ico (que icono en tu barra de direcciones - ex. Simplehelp es la favicon.ico ) for your own site. ) Para su propio sitio.

A favicon (short for Favorites Icon) is a great way to give your site a memorable and unique icon that will display in the browser address bar. Un favicon (abreviatura de favoritos icono) es una gran manera de darle a su sitio una memorable y singular icono que aparecerá en la barra de direcciones del navegador. In addition, favicon’s show up next to ‘your site’ when people bookmark it, and since most folks have a very messy bookmark list, a graphical reminder of your site beside the bookmark name it is a good way let them find it again. Además, el favicon se muestran junto a "su sitio" cuando la gente marcador, y ya que la mayoría de la gente es muy desordenada lista de favoritos, un recordatorio gráfico de su sitio al lado del nombre del marcador es una buena forma de dejar a encontrar de nuevo .

  1. First, select the image you want to use as a favicon. En primer lugar, seleccionar la imagen que desea utilizar como un favicon. Something that blends in with your sites look, colour scheme and general “feel” is best. Algo que combina en sus sitios web con aspecto, el color y el régimen general "sensación" es lo mejor. Since favicons are quite small, it’sa good idea not to try and get too complicated. Desde favicons son muy pequeños, es una buena idea de no tratar de ser muy complicado. The image you choose should be a square (64×64, 32×32 etc), and can be a jpg, gif, png, bmp etc. La imagen que usted elija debe ser un cuadrado (64 × 64, 32 × 32, etc), y puede ser un archivo JPG, GIF, PNG, BMP etc
  2. Next, visit A continuación, visita FavIcon from Pics Favicon de Fotos - an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic - Una absolutamente brillante (y gratuita) herramienta en línea que puede generar un favicon a partir de una imagen, logotipo o cualquier otra gráfica
  3. Upload your picture and click the magic Generate Favicon.ico button. Sube tu foto y haga clic en el mágico botón Generar favicon.ico. You’ll be given a preview of your favicon, and if you’re happy with it, click the Download Favicon button. Se le proporcionará una vista previa de su favicon, y si eres feliz con él, haga clic en el botón Descargar favicon. Favicon from Pics will prompt you to save a .zip file - save it to your desktop or wherever you prefer to save files. Fotos de favicon se le pedirá que guarde un archivo. Zip - guárdelo en su escritorio o donde quiera que se prefiere para guardar archivos. Unzip it. Descomprimir la misma.
  4. Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload the favicon.ico file to the root of your site*. Usa tu programa favorito de FTP (o cualquier instrumento que se utiliza para cargar los archivos a su sitio web) y cargar el archivo favicon.ico a la raíz de su sitio web *. You’ll want the file to be located at www.your-site.com/favicon.ico. Usted desea que el archivo que se encuentra en www.your-site.com/favicon.ico.
  5. Visit your web site to check out your new favicon! Visite su sitio web para ver su nuevo favicon! If it doesn’t appear, you may need to clear your browsers cache and then reload. Si no aparece, puede que sea necesario para borrar la caché de su navegador y vuelva a cargar.
  6. * = if you don’t have access to the root of your site, add the following line of code somewhere in the <head> of your html: * = Si no tienen acceso a la raíz de su sitio web, añada la siguiente línea de código en algún lugar de la <head> de su html:

    <link rel=”shortcut icon” href=”http://www.your-site.com/path/to/favicon.ico”> <link rel="shortcut icon" href="http://www.your-site.com/path/to/favicon.ico">

Related Posts: Puestos relacionados con:
  • How to revert to the “old” Google favicon ¿Cómo volver a la "vieja" Google favicon
  • Simplehelp Recap: May 2007 - wow, and thank you! Simplehelp Resumen: mayo de 2007 - wow, y gracias!
  • How to create a custom iPhone and iPod touch icon for your web site Cómo crear una costumbre iPhone y el iPod táctil icono de su sitio web
  • Welcome! Bienvenido!
  • How to insert a Google Map into your website using iWeb ¿Cómo insertar un mapa de Google en su sitio web mediante iWeb
  • Get Simple Help tutorials just like this one in your email inbox every day - for free! Get Simple tutoriales de ayuda al igual que este un mensaje de correo electrónico en su bandeja de entrada cada día - para libre! Just enter your email address below: Sólo tienes que introducir tu dirección de correo electrónico a continuación:

    You can always opt out of this email subscription at any time. Usted siempre puede optar por salir de este mensaje de correo electrónico de suscripción en cualquier momento.

    { 4 trackbacks } (4) Trackbacks

    20 Free RSS Readers Reviewed - Simplehelp 20 libre lectores RSS Revisado - Simplehelp
    05.06.07 at 6:40 pm 05.06.07 a 6:40 pm
    WordPress: The Complete Post-Install Checklist, Redux - Simplehelp WordPress: Completa Post-Lista de comprobación de instalación, Redux - Simplehelp
    05.26.07 at 2:15 pm 05.26.07 a 2:15 pm
    How to revert to the “old” Google favicon - Simplehelp ¿Cómo volver a la "vieja" Google favicon - Simplehelp
    05.30.08 at 9:12 pm 05.30.08 a 9:12 pm
    Favicon Design : ..:.:.. Favicon Diseño: ..:.:.. Todd And = Marketing + Media ..:.:.. Todd Y = Media + Marketing ..:.:..
    07.22.08 at 4:59 pm 07.22.08 a 4:59 pm

    { 1 comment… read it below or (1 comentario ... leer a continuación o add one añadir un } )

    1 1 LGR LGR 05.30.07 at 9:55 am 05.30.07 a 9:55 am

    Good post. Buen post. I have used that favicon generator in the past and it works well. He utilizado favicon generador que en el pasado y funciona bien. Sometimes I don’t have the time or creativity to make my own and have found some great free favicons here: A veces no tengo tiempo ni creatividad para hacer mis propias y han encontrado un gran libre favicons aquí: http://www.freefavicon.com/

    Leave a Comment Déjanos tu comentario

    You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> Puede utilizar estas etiquetas HTML y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>