Skip to main content

¿Qué es un favicon?

Un favicon es un icono personalizado asociado con una página web o sitio web que aparece junto a la dirección http en la ventana URL de un navegador. También ocupará pestañas abiertas en navegadores habilitados para pestañas y se mostrará junto a los enlaces marcados. El término combina las palabras "favoritos" e "icono". Microsoft Internet Explorer versión 5.0 introdujo la capacidad de mostrar favicons, seguido de otros navegadores principales. Firefox, Netscape, Opera, Safari y Konquerer se encuentran entre los muchos navegadores que admiten esta función.

Un favicon es tan pequeño que se mide en píxeles. Un píxel es la unidad de medida más pequeña en la pantalla de una computadora. Los píxeles, que se parecen a pequeños bloques, son claramente visibles cuando se visualiza una pantalla a través de una lupa. Un favicon tiene solo 16x16 píxeles, 32x32 o, en el caso de las computadoras Macintosh, a veces 64x64 o más.

Diseñar un logotipo para un lienzo tan pequeño no es una tarea fácil, por lo que es más fácil comenzar con un lienzo más grande y luego cambiar el tamaño de la imagen. Dado que la reducción de una imagen puede hacer que pierda claridad, es mejor comenzar con un tamaño de lienzo de aproximadamente 64x64 píxeles.

Estos iconos se pueden diseñar en monocromo, 16 colores, 256 colores o más, utilizando casi cualquier programa de gráficos. Una vez que el diseño se reduce y guarda, se puede convertir en un archivo de icono . No todos los programas gráficos guardan archivos como archivos .ico, pero hay muchos programas gráficos disponibles en línea que son específicos para la creación y conversión de archivos .ico. Al abrir un archivo .bmp, .jpg, .gif u otro archivo de imagen en uno de estos programas y elegir "Guardar como", puede convertir la imagen al formato .ico adecuado y nombrar el archivo favicon.ico.

El icono ahora puede cargarse en el directorio raíz de su sitio web. Los navegadores buscarán este archivo y lo mostrarán si lo encuentran. Además de subirlo al sitio web, se deben agregar dos líneas de código simple en la sección <head> </head> de la página web como se muestra a continuación. Cambie "website.com" por el nombre real de su sitio web:

<link rel="icon" href="http://website.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://website.com/favicon.ico" type="image/x-icon" />

Si un sitio web está marcado en Internet Explorer antes de que tenga un favicon, es posible que no se muestre uno nuevo. Elimine el marcador, vacíe el caché del navegador y reinicie el navegador. Ahora navegue manualmente al sitio web y debería ver el favicon. Marque el sitio para agregarlo a favoritos .

Si bien Internet Explorer requiere que el favicon sea un archivo .ico, Firefox, Netscape y otros navegadores populares también pueden mostrar archivos .gif, .jpg y .png. Si usa un tipo de archivo de imagen que no sea .ico, el código debe cambiarse para reflejar el tipo de imagen correcto. Por ejemplo, si usa favicon.png, el código leería: type="image/png" /> lugar de type="image/x-icon" /> .

Asociar un favicon con un sitio web crea una marca visual que puede ayudar a un surfista a recordar su sitio web y su contenido con una simple mirada a sus marcadores. Ya sea un mini logotipo o diseño original, su imagen idealmente reflejará algo del contenido, carácter o nombre del sitio. Hay varias compañías en línea que diseñarán un favicon para usted, si lo desea. Sin embargo, para aquellos con habilidades informáticas básicas, crear una es una tarea simple y agradable que puede llevar desde unos pocos minutos hasta una tarde o una noche.