Cómo crear y utilizar un Favicon (favicon.ico)

Favicon es la abreviatura en inglés de icono de favoritos. El nombre se deriva de la lista de marcadores de Microsoft Internet Explorer, que se llama lista de Favoritos.

Cuando marca un sitio en su navegador o añade un sitio a su lista de Favoritos en Internet Explorer (versión 5 y superiores), éste revisa el servidor para ver si hay un archivo favicon.ico presente. Si es así, el favicon.ico se mostrará al lado del texto del marcador.

Dependiendo del navegador web, el favicon puede aparecer en diversos lugares, no sólo en la lista de favoritos. Puede mostrarse en la barra de direcciones o en el título de la pestaña de navegador por ejemplo.

Para instrucciones completas sobre crear e instalar un favicon en su sitio HostPapa, por favor, siga las instrucciones detalladas abajo:

Qué es un favicon
“Favicon” es la abreviatura para “icono de favoritos”. Este nombre se deriva de la lista de marcadores para el navegador Microsoft Internet Explorer, llamada lista de favoritos. Cuando se agrega un sitio web a esta lista, Internet Explorer (versión 5 y superior) consulta al servidor si tiene un archivo llamado “favicon.ico”. En caso de que así sea, el archivo será usado para proporcionar un icono que aparecerá junto al texto del marcador.

Otros navegadores, como Mozilla Firefox, también brindan soporte adicional para favicon. Dependiendo del navegador, el favicon puede aparecer en diversos lugares, no sólo en la lista de marcadores (de hecho, puede que ni siquiera aparezca en esta lista). Este icono puede mostrarse en la barra de direcciones o en el título de una pestaña de navegación, por ejemplo.

Cómo crear un favicon
Para crear un elemento “ favicon.ico”, simplemente cree un archivo .PNG de 16 x 16, y conviértalo a recurso de icono con png2ico. Si lo desea, puede añadir más imágenes al mismo recurso para proporcionar alternativas diferentes. La mayoría de navegadores emplean sólo una imagen de 16 x 16, pero en un contexto diferente (por ejemplo, al arrastrar una URL desde la barra de direcciones hasta su escritorio) aparecerá un icono de mayor tamaño. Si el recurso de icono sólo contiene una imagen 16 x 16, ésta será escalada a un tamaño apropiado, así que técnicamente nunca hay necesidad de añadir resoluciones diferentes. Sin embargo, hacerlo puede aumentar la calidad del icono desplegado.

Al crear las imágenes para incluir en su favicon.ico, no olvide que el icono puede aparecer en contraste con varios colores de fondo, así que es mejor utilizar un fondo con transparencia en vez de uno sólido si desea evitar que su icono aparezca dentro de un cuadro. Tenga en cuenta que los recursos de icono sólo tienen soporte para transparencia binaria; a saber, un píxel puede ser o no visible, pero nunca aparecer translúcido al 30 por ciento.

Instalar un favicon
Para agregar su nuevo archivo favicon.ico a una página web, colóquelo en el servidor, dentro del mismo directorio en el que se encuentra la página; por ejemplo, “www.ejemplo.com/foo/favicon.ico” para “www.ejemplo.com/foo/index.html”. Ésta es la primera ubicación donde un navegador buscará; si no encuentra un icono allí, el programa revisará en el directorio de nivel superior del servidor (en “www.ejemplo.com/favicon.ico” para el servidor “www.ejemplo.com”, por ejemplo), de modo que al colocar el archivo en esta ubicación, podrá tener un favicon predeterminado para todas las páginas de tu dominio. Dependiendo del navegador y de la configuración, el favicon.ico no siempre es interpretado incluso si se encuentra en alguna de las ubicaciones superiores, a menos que la página web declare su presencia de modo explícito. Para declarar que su página web tiene un icono, deberá añadir las dos siguientes líneas en la sección “<head>” de su página:

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

Artículos relacionados

Esta publicación también está disponible en: EnglishFrançais
Conéctese a Internet con nuestro alojamiento web asequible

Conéctese a Internet con nuestro alojamiento web asequible

Aprenda más ahora
HostPapa Mustache