How to make a favicon ¿Cómo hacer un favicon

Posted on April 10, 2008 at 5:10 am Publicado el 10 de abril de 2008 a 5:10 am

Looking for a way to create a FavIcon ? ¿Buscando una manera de crear un FavIcon? If you browse the web regularly, you’ve probably noticed that a lot of sites have a small icon that appears in front of the website address in your browser or bookmarks. Si navegas por la web con regularidad, de lo que has observado que una gran cantidad de sitios con un pequeño icono que aparece en frente de la dirección del sitio web en su navegador o marcadores. Many websites use favicons (aka Favorite Icon) as a way to brand their website, so that when you see that icon, you automatically know which company or product it represents. Muchos sitios web utilizan favicons (aka Icono favorito) como una forma de marca de su sitio web, de modo que, al ver que el icono, automáticamente sabe que una empresa, un producto que representa.

For example, take a look at your address bar right now and you’ll notice that to the left of URL is a small icon that looks like a grid: Por ejemplo, echa un vistazo a la barra de direcciones, ahora y va a ver que a la izquierda de la URL es un pequeño icono que parece un cuadrícula:

Also, if I look at my Firefox Bookmarks or IE Favorites, I also see the same favicons next to any websites that are using them: También, si miro a mis favoritos de Firefox o IE favoritos, también veo la misma favicons junto a una de las páginas web que utilizan ellos:

Using a FavIcon for your site is a good practice as it helps visitors to quickly identify your site among large numbers of bookmarks, etc. So how do you go about creating a FavIcon for your site? Utilizando un FavIcon para su sitio web es una buena práctica, ya que ayuda a los usuarios a identificar rápidamente su sitio entre los grandes números de los marcadores, etc Así que, ¿cómo avanzamos en la creación de un FavIcon para su sitio?

How to make a FavIcon ¿Cómo hacer un FavIcon

The first step in creating a FavIcon is to actually find a picture or create a graphic that you want to use as your icon. El primer paso en la creación de un FavIcon es en realidad encontrar una imagen o crear un gráfico que desea utilizar como su icono. A FavIcon always has a 16×16 pixel dimension, so you should be very careful when choosing or creating your own picture. Un FavIcon siempre tiene un 16 × 16 píxeles dimensión, de modo que deben ser muy cuidadosos al momento de elegir o crear tu propia imagen.

Try to find an icon or graphic that has very little going on with it in terms of design. Trate de encontrar un icono o gráfico que tiene muy poco pasando con ella en términos de diseño. The simpler graphic you can find, the better your FavIcon will turn out. El gráfico más simple que usted puede encontrar, la mejor de su FavIcon resultará. Also, make sure that the graphic is a square, so basically where the length and width are equal. También, asegúrese de que la gráfica es un cuadrado, de modo que, básicamente, en que la longitud y anchura son iguales. If you have a portrait or landscape picture, it will be resized to 16×16 and therefore become either stretched or squished. Si tiene una foto de retrato o paisaje, que se modificará el tamaño de 16 × 16 y, por lo tanto, convertirse en cualquiera de estirado o squished.

You can also create your own image using Microsoft Paint or similar photo editing software. También puede crear su propia imagen con Microsoft Paint o similar programa de edición de imágenes. When you are done, make sure you save the file into GIF, JPG, PNG, or BMP format. Cuando haya terminado, asegúrese de guardar en el archivo GIF, JPG, PNG, BMP o formato.

Now that you have your image, go to Ahora que tiene su imagen, vaya a DynamicDrive DynamicDrive and let’s use their FavIcon generator to create our FavIcon from the picture. Y que vamos a usar sus FavIcon generador para crear nuestro FavIcon de la imagen.

Go ahead and browse to the location of your image file and then choose Create Icon . Seguir adelante y buscar la ubicación de su archivo de imagen y seleccione "Crear Icono.

And really that’s it! Y realmente eso es todo! You’ll now get a preview of how your FavIcon would look in an actual browser and you can either proceed to download the FavIcon or you can simply choose another image. Usted ahora obtener una vista previa de la forma en que su FavIcon vería en un navegador real y usted puede proceder a descargar el FavIcon o simplemente puede elegir otra imagen.

What I like about this site is that it also gives you instructions on how to install a FavIcon to your website, which is a little bit harder than actually creating the FavIcon itself. Lo que me gusta de este sitio es que también te da instrucciones sobre cómo instalar un FavIcon a su sitio web, que es un poco más duro que en realidad la creación de la propia FavIcon. Here’s what you need to do: Esto es lo que hay que hacer:

First, download the file and then upload the FavIcon, which by the way should be named “ FavIcon.ico ” to the ROOT directory of your site. En primer lugar, descargue el archivo y, a continuación, subir el FavIcon, que, por cierto, debe denominarse "FavIcon.ico" a la RAÍZ directorio de su sitio. It’s very important that the file be named favicon.ico and that it be located in the root directory on your web server. Es muy importante que el archivo sea llamado favicon.ico y que se encuentra en el directorio raíz de su servidor web. You can verify that you uploaded it correctly by typing Puedes verificar que has subido correctamente escribiendo

http://mysite.com/favicon.ico Http://mysite.com/favicon.ico

in the browser’s location, where “mysite.com” is your web site’s Internet address. En la ubicación del navegador, donde "mysite.com" es su Web site de la dirección de Internet. Now you need to insert one line of code into the <HEAD> section of your web sites pages. Ahora necesita insertar una línea de código en la sección de su <HEAD> páginas de los sitios web. Note that this code has to be on every page that you want the FavIcon to appear for. Tenga en cuenta que este código tiene que estar en todas las páginas que desea que el FavIcon para aparecer. This is easy if you have a site that uses templates and pulls in header, footer, and other files individually. Esto es fácil si tienes un sitio que utiliza plantillas y tira en la cabecera, el pie de página, y otros archivos individualmente.

If all of your pages are static and you do not use templates or includes, you’ll have to manually edit the HTML in each page. Si todas sus páginas son estáticas y que no incluye el uso de plantillas o, tendrá que editar manualmente el código HTML en cada página. The line of code you’re going to want to add is as follows: La línea de código que vas a querer agregar es el siguiente:

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

The icon may not show up immediately, so be patient. El icono puede que no aparezca inmediatamente, así que tenga paciencia. Also, sometimes it doesn’t appear at all, especially with IE as there is a browser bug. También, a veces, no parece en absoluto, sobre todo con el IE, ya que es un bug del navegador.

Hopefully with this short tutorial you have been able to create a FavIcon and get it up and working on your site. Esperemos que con este breve tutorial que ha sido capaz de crear un FavIcon y llegar hasta ella y en su sitio de trabajo. If you have any questions, feel free to post a comment! Si tiene alguna pregunta, no dude en enviar un comentario! Enjoy! Disfrute!