Personalizar icono en favoritos
He recorrido muchos sitios en donde salen los pasos a seguir para que se vea un icono a un costado del titulo cuando se agrega un sitio a los favoritos.
Siempre son las mismas lineas y no me resulta.
¿Alguien puede ayudarme?
Siempre son las mismas lineas y no me resulta.
¿Alguien puede ayudarme?
1 Respuesta
Respuesta de blackprince
1
Una de las preguntas más frecuentes que recibo es la que hace referencia a la forma de personalizar el icono que aparece en el menú Favoritos de Internet Explorer cuando se guarda una página web.
Internet Explorer, como buen producto Microsoft, permite personalizar el icono que aparece tanto en este menú como el que se muestra en la barra de direcciones cuando se visita una de nuestras páginas, mediante una imagen especial, un icono, que se llama favicon.ico y que debe estar en el directorio raíz de nuestro sitio web.
Fíjate bien en el nombre de la imagen, favicon.ico, es decir, debe ser una imagen que se llame favicon y que tenga extensión .ico, los famosos iconos de Microsoft.
Para crear una imagen de este tipo, tendremos que usar unos programas gráficos especiales, uno de los cuales, el más conocido es Microangelo, de la casa ImpactSoft, del que podemos descargar una versión demo desde http://www.impactsoft.com.
La interfaz de este programa es simple e intuitiva, permitiendo la creación directa de un icono o la importación de cualquier tipo de imagen (basta copiarla en la aplicación origen y pegarla en Microangelo). Las imágenes aparecen en la interfaz en modo pixels, es decir, formada por cuadraditos de colores, cada uno de los cuales representa un pixel.
1.- En primer lugar, abrimos Paint Shop Pro y capturamos el logotipo que desees, usando la herramienta capture en su modalidad área, procurando aproximarnos lo más posible a una captura rectangular.
2.- Limpiamos la imagen de parásitos de la captura, dejando sólo el logo y el color de fondo adecuado. Para ello seleccionamos el cuentagotas y marcamos el color de fondo como colores de fondo y de borde de nuestro trabajo, haciendo click con ambos botones del ratón sobre el color de fondo de la captura. Luego seleccionamos la herramienta pincel y borramos todos los restos indeseados.
3. Tenemos que buscar una imagen cuadrada, ya que nuestro objetivo, favicon, debe tener esta forma, y lo normal es que la captura no nos quede así. Para solucionarlo, vemos las dimensiones de nuestra imagen actual, calculamos el rectángulo más pequeño que la contenga y creamos una nueva imagen de ese tamaño, con color de fondo igual que el buscado, pegando encima de ella la imagen anterior, centrándola adecuadamente.
4. Ahora debes pasar esta imagen a Microangelo, creando primero en este programa una nueva imagen tipo icono, de 16x16 o 32x32 pixels, 16 ó 256 colores, y copiando la imagen de Photoshop, la pegamos en Microangelo. Debemos comprobar que se vea bien a ese tamaño, ya que se suelen deformar bastante los contornos. Guardamos la imagen con el nombre de favicon.ico y la abrimos en un navegador, viendo cómo queda.
5. Retocamos en Microangelo pixel a pixel hasta lograr un aspecto adecuado.
Otra forma de crear un logo es directamente en Microangelo. Deberemos procurar diseñar una imagen lo más simple posible, con pocas curvas, con trazos de 1 pixel. Se hace simplemente seleccionando los el color deseado en la paleta correspondiente y utilizar luego sobre el lienzo la herramienta de dibujo necesario (pincel, rectángulo, círculo, etc.).
Una vez conseguido n uestro icono, sólo nos queda subirlo al directorio raíz de nuestro sitio web; es decir, si tu página principal es:
http://www.pc-click.com.mx/index.html
La ruta del icono debe ser:
http://www.pc-click.com.mx/favicon.ico
A veces esto no funciona, sobre todo cuando no tenemos dominio propio, sino que nuestras páginas están en un hosting gratuito. En estos casos, podemos situar el icono en la carpeta que deseemos, y luego hacer referencia en las páginas a dicho icono mediante la etiqueta LINK:
<link rel="shorcout icon" href="http://www.pc-click.com.mx/images/favicon.ico">
Internet Explorer, como buen producto Microsoft, permite personalizar el icono que aparece tanto en este menú como el que se muestra en la barra de direcciones cuando se visita una de nuestras páginas, mediante una imagen especial, un icono, que se llama favicon.ico y que debe estar en el directorio raíz de nuestro sitio web.
Fíjate bien en el nombre de la imagen, favicon.ico, es decir, debe ser una imagen que se llame favicon y que tenga extensión .ico, los famosos iconos de Microsoft.
Para crear una imagen de este tipo, tendremos que usar unos programas gráficos especiales, uno de los cuales, el más conocido es Microangelo, de la casa ImpactSoft, del que podemos descargar una versión demo desde http://www.impactsoft.com.
La interfaz de este programa es simple e intuitiva, permitiendo la creación directa de un icono o la importación de cualquier tipo de imagen (basta copiarla en la aplicación origen y pegarla en Microangelo). Las imágenes aparecen en la interfaz en modo pixels, es decir, formada por cuadraditos de colores, cada uno de los cuales representa un pixel.
1.- En primer lugar, abrimos Paint Shop Pro y capturamos el logotipo que desees, usando la herramienta capture en su modalidad área, procurando aproximarnos lo más posible a una captura rectangular.
2.- Limpiamos la imagen de parásitos de la captura, dejando sólo el logo y el color de fondo adecuado. Para ello seleccionamos el cuentagotas y marcamos el color de fondo como colores de fondo y de borde de nuestro trabajo, haciendo click con ambos botones del ratón sobre el color de fondo de la captura. Luego seleccionamos la herramienta pincel y borramos todos los restos indeseados.
3. Tenemos que buscar una imagen cuadrada, ya que nuestro objetivo, favicon, debe tener esta forma, y lo normal es que la captura no nos quede así. Para solucionarlo, vemos las dimensiones de nuestra imagen actual, calculamos el rectángulo más pequeño que la contenga y creamos una nueva imagen de ese tamaño, con color de fondo igual que el buscado, pegando encima de ella la imagen anterior, centrándola adecuadamente.
4. Ahora debes pasar esta imagen a Microangelo, creando primero en este programa una nueva imagen tipo icono, de 16x16 o 32x32 pixels, 16 ó 256 colores, y copiando la imagen de Photoshop, la pegamos en Microangelo. Debemos comprobar que se vea bien a ese tamaño, ya que se suelen deformar bastante los contornos. Guardamos la imagen con el nombre de favicon.ico y la abrimos en un navegador, viendo cómo queda.
5. Retocamos en Microangelo pixel a pixel hasta lograr un aspecto adecuado.
Otra forma de crear un logo es directamente en Microangelo. Deberemos procurar diseñar una imagen lo más simple posible, con pocas curvas, con trazos de 1 pixel. Se hace simplemente seleccionando los el color deseado en la paleta correspondiente y utilizar luego sobre el lienzo la herramienta de dibujo necesario (pincel, rectángulo, círculo, etc.).
Una vez conseguido n uestro icono, sólo nos queda subirlo al directorio raíz de nuestro sitio web; es decir, si tu página principal es:
http://www.pc-click.com.mx/index.html
La ruta del icono debe ser:
http://www.pc-click.com.mx/favicon.ico
A veces esto no funciona, sobre todo cuando no tenemos dominio propio, sino que nuestras páginas están en un hosting gratuito. En estos casos, podemos situar el icono en la carpeta que deseemos, y luego hacer referencia en las páginas a dicho icono mediante la etiqueta LINK:
<link rel="shorcout icon" href="http://www.pc-click.com.mx/images/favicon.ico">
