Icono para tu website

Icono favicon ¿Te has fijado que, al abrir algunas páginas web, la dirección URL en la barra del navegador está precedida por un icono? ¿Verdad que es una buena forma para recordar mejor esa página? Pues no son más que simples logotipos, tal como el de Microsoft, el de Windows, Nike, Adidas, Xeros, el de Blogger o el de Bitácoras.com, por mencionar solamente algunos reconocidos.

¿No te gustaría tener un icono en la barra de tu navegador, para que identifique tu website? Pues aquí te diré cómo conseguirlo.

Hace poco más de un mes, yo surfeaba por las múltiples categorías de la bitácora llamada ñblog, utilidades y recursos para blog, punto de encuentro casi obligado para todos los que desarrollamos bitácoras, por las interesantes recopilaciones que Blogum hace de lo que él denomina:”Herramientas y sitios útiles para mejorar tu blog.” Fue cuando me encontré con la anotación relativa al Generador de Favicons.

Yo ya había estado observando esos pequeños íconos que acompañan a las direcciones url en las barras de los navegadores, y me habían parecido interesantes. Después de leer la nota quise tener mi propio icono, así que puse manos al asunto. El tag parecía simple pero, por aquel entonces yo estaba muy novato en esto de los códigos html y no supe interpretarlo bien, por lo que me encontré con problemas que, afortunadamente, Blogum tuvo la gentileza de esclarecerme satisfactoriamente. Después de eso, en el post ya mencionado de su bitácora, en la sección de comentarios, colaboré dejando unas cuantas aclaraciones sobre la instalación del Favicon. Trataré de explicar aquí, con algo de mayor amplitud pero en forma sencilla, los 10 pasos que yo di para obtener mi Favicon.

1.- Lo primero es tener un icono que te identifique. Y te aseguro que elegir uno es la parte más difícil. ¿Por qué tipo decidirse: una letra, un símbolo, una caricatura, un anime o alguna fotografía? Algunos optan por un retrato personal. No es una decisión fácil. Pero una vez que la hayas tomado tendrás listo el 70%. Hurgando en ñblog podrás encontrar aplicaciones para generar íconos, incluso animados. Y no me lo digan. Ya sé que esas categorías son un caos a la hora de buscar algo, pero no es culpa de Blogum. Es que Bitacoras.com no tiene habilitada la posibilidad de colocarlas por orden alfabético, sino en el orden en que se van creando. Por ello les doy una ayudita extra indicándoles que, una de esas aplicaciones, se encuentra en la anotación denominada Logo para tu blog de Cooltext.

Icono favicon2.- Siempre valorando más lo personal, yo me decidí por crear mi propio logo. Una vez en mente lo que quería, no me compliqué demasiado la vida. Utilicé mi caballito de batalla, el Picture-It Photo 7.0 (que suele, o solía, venir con Windows) para hacer un sencillo fotomontaje alusivo al nombre de mi bitácora. Para ello tomé la fotografía de un faro marino que me gustó por sus líneas clásicas, (un par de horas de navegación en la web) y otra foto de una vieja puesta de sol que tenía por ahí perdida en mi colección de mar y cielos. (Cinco minutos de revisiones).

Cortando, raspando, pegando, fundiendo, enfatizando tintes y ajustando contrastes, en poco más de una hora obtuve un faro colgado de la nada, alumbrando al universo, que sería el icono personal de mi weblog. Por tratarse de un icono, para darle más fuerza expresiva a la simpleza, me decidí por los colores cálidos, para contrastar con los azules que predominan en la fotocomposición de la cabecera actual en esta bitácora. En este punto del trabajo no hay que preocuparse para nada por el tamaño y los KB de la imagen.

3.- A continuación, entré en la página web del Generador de Favicons, perteneciente a FavIcon From Pics que, por cierto, tiene una galería de favicons que pueden consultarse para ayudarnos a generar nuestra idea. Seguí las sencillas instrucciones en inglés, que consisten en indicar la ruta del archivo en donde tenemos guardada la imagen en el ordenador, y el sistema se encarga de subirla y cargarla.

4.- Siempre online, FavIcon genera una vista previa del icono. En realidad no hace más que reducir el tamaño de la imagen, creando a dos formatos, uno con medidas de 16×16 y otro de 32×32 pixels. No existe ninguna necesidad de registrarse para obtener este servicio.

5.- FavIcon genera un archivo comprimido en extensión zip que se descarga en el escritorio (o en el directorio en donde tengas predeterminadas las descargas.) Al descomprimirlo obtendrás los dos iconos (que por defecto denominan favicon.ico), en las dimensiones que ya mencioné, además de un archivo de texto ReadMe.txt con las instrucciones y el código html. También obtienes una foto del icono, llamada “prewiev_16x16.png” que puede ser editada con diversos programas que manejen imágenes por capas con extensión png. Precisamente como el Picture-It Photo.

6.- A continuación, abrí Bitacoras.com, entré en el Administrador de Archivos de mi bitácora y abrí el WebFTP, que básicamente es el directorio raíz de los archivos, en donde se encuentran: el menu.bit, index.bit, enlaces.xml y los demás. Después de renombrar el de 16×16 como faro.ico (solamente por gusto personal) lo subí directamente al Directorio Raíz. Puede colocarse en la carpeta img que viene por defecto en ese directorio, o en cualquier otra carpeta de imágenes que hayas creado, pero se recomienda colocarla en el Directorio Raíz. Más adelante explicaré la razón para ello.

7.- El archivo ReadMe.txt que ya indiqué, contiene el código HTML del lik-tag que hay que colocar.

¿Eso es todo? Sí, ese es todo el código. No se necesita más.

Quienes estamos alojados con Bitácoras.com debemos colocarlo en el sitio apropiado del archivo index.bit para que el icono pueda aparecer en donde queremos, que es la barra del navegador al abrir la página principal de nuestra bitácora. Sin embargo, también es conveniente, aunque no necesario, ponerlo en los archivos: historial.bit y comentarios.bit, a fin de que se muestre igualmente cuando se abran estas otras páginas. El lugar específico para colocar el código es en cualquier parte entre el inicio y el cierre de las etiquetas (tags) de cabecera (HEAD) Y (/HEAD). Yo lo puse inmediatamente antes de comenzar el código (script language=”JavaScript” /)

8.- Las instrucciones de FavIcon indican que, donde dice “favicon.ico” debe sustituirse por la ruta URL (o referencia) en donde hemos archivado el icono en el administrador de nuestra bitácora. Es decir, en el caso específico de mi bitácora es el siguiente: (href=”guardafaro.net/faro.ico)”

Así lo hice con esta parte, pero la primera parte de la etiqueta, el link rel=”shorcut ico” me confundió tontamente, pues me parecía entender que debía ser cambiada por el shorcut de alguna dirección con respecto al icono. Pero no es así. Esto no debe cambiarse. No lo toquen.

9.- Después de esto, reinicias tu bitácora y voila, el encantador icono que has creado aparece en la barra de dirección del navegador y respiras aliviado, sintiéndote el propio Steve Jobs.10.- Se entra entonces en la página de validación de FavIcon From Pics y se continúa con lo que ellos denominan la validación del icono generado. Ellos chequean online y emiten un informe de que, en efecto, aparecen tanto el favicon.ico como el link-tag correspondiente. La primera vez que lo intenté, yo tenía el icono en una carpeta de imágenes y eso me dio problemas. Por alguna razón, si se coloca el icono en otra carpeta y no en el directorio raíz, aún cuando se indique la url completa y precisa, FavIcon no lo encuentra y emite el siguiente mensaje:

Notes: This page has a valid favicon.ico but it does not use a favicon link tag (or) although this is not a problem, the favicon link tag is likely to be more compatible with upcoming browser versions.

Claro, a estas alturas, uno ya se está haciendo las siguientes consideraciones:

– FavIcon no me crea el icono, puesto que yo lo he tenido que hacer.
– También puedo darle las dimensiones necesarias.
– El código para su colocación en la dirección URL es algo que cualquier que maneje HTML conoce.
– ¿Y entonces para qué necesito a FavIcon?

Bueno, yo no tengo la respuesta. Quizás sea cierto que, como ellos dicen: aunque la falta del link-tag de FavIcon no es un problema, (para el correcto funcionamiento del icono) es probable que lo haga más compatible con versiones futuras de los browsers. ¿Pero cómo saberlo?

En cualquier caso, no te costará nada, ni necesitarás registrarte. Entonces obtén tu FavIcon, únete al grupo y disfruta del mejor aspecto que has obtenido para tu página.
ACTUALIZACION 31-10-2006: Me di cuenta que, por el cambio desde el CMS Bitacorae, debido a la inclusión de líneas de códigos en HTLM que WordPress no me aceptó, había desaparecido todo el texto a partir del numeral 7, cosa que hoy he solucionado. Sin embargo, además he tenido que sustituir los signos de “<" y ">” por paréntesis para poder presentar otros códigos, y he eliminado un par de líneas con código aclaratorio, pues aún no se cómo hacer para que WP me lo acepte sin interpretarlo ni modificarlo.  Recomiendo descargar el documento en PDF.
Artículos relacionados:
SpaywareBlaster

FreeRam XP Pro
Picture-It Photo


Descargar PDF
flecha subir Al inicio
Home
Esta entrada fue publicada en Análisis y valoraciones, Software y tecnología y etiquetada , , , . Guarda el enlace permanente.

7 Respuestas a Icono para tu website

  1. maria lujan dijo:

    de momento n creo que me ponga un icono, pero he visto tus comentaros de ayuda en el foro de bitacoras, y te quería pedir una ayuda.
    Como hago para sindicarme contigo, se dice así?. La pregunta es ¿como hago para que cuando tu actualices tu blog ami me llegur una señal y lea tu comentario?
    Como verás es egoismo puro, pero he visto en el foro que eres amable y didactico, y paciente, por eso me atrevo a preguntarte.
    Además me iré leyendo tus mensaje de tecnología, lo explicas muy bien.
    Suerte y que los dioses te sean propicios, guardian del faro.

  2. guardafaro dijo:

    María, como complemento a lo que te dije en el mail, te informo que, la única forma que, por ahora, yo conozco para saber cuando un blog ha actualizado es a través de algún lector de RSS.
    Los RSS son simples enlaces a los archivos de sindicacion (FEEDs), que no son otra cosa que archivos en formato XML (ATOM y RDF) cuyo contenido es un extracto de los titulos de los post y las primeras palabras, incluyendo comentarios, que se han publicado en un blog. Estos enlaces son los que utilizan los programas preparados para leer esos archivos, tales como Blogfeed o el propio Feednes.(Que Bitacoras incluye y que puedes conseguir a través de la caja de Sindicación de la barra lateral.) Por cierto que el botón de “Añadir a Feednes” a mi no me funciona. He leido algunas quejas al respecto en los foros pero no he visto respuestas concretas.
    Yo estoy suscrito desde hace poco al servicio de Feednes en el que tengo sindicados varios blogs de artículos periodísticos que me interesan. Sin embargo aún sigo prefiriendo el sistema manual, de tener en mis marcadores aquellos blogs de mi preferencia, que reviso diariamente para ver si actualizaron. Porque los lectores de feeds solamente te pondrán el texto del artículo. Sin embargo, hay blogs con contenidos muy gráficos y de gran valor estético. Sin ver esas imágenes, los post podrían no ser tan interesantes.
    Lamento no serte de más ayuda.

  3. guardafaro dijo:

    En está dirección web hay un listado recopilado por Bitacoras.com de los principales lectores de feeds, con un breve resumen de sus características.
    http://www.bitacoras.com/recursos/lectores_de_feeds.php

  4. maria lujan dijo:

    Eres y has sido de gran ayuda. He copiado ahora toda la información que das y la he puesto en mi archivo de mejoras de blog.
    Hasta ahora la única novedad tecnológica en mi blog, es que he añadido un nuevo contador de estadísticas. Parece interesante.
    http://www.traceics.com.es/
    Gracias por tu amabilidad y que los dioses te sean propicios.

  5. maria lujan dijo:

    Hola, te visito para decrte que no estás en el directorio de bitacoras. Ayer guardé tu direción y por eso he podido entrar, pero lo lógico sería, queen el directorio yo escribiera guardafaro y apareciese tu pagina.
    Bueno, cosas d internet. Simplemente que lo supieras.
    Suerte y que los dioses te sean propicios.

  6. guardafaro dijo:

    maría, gracias por tu notificación. Sin embargo debo decirte que sí estoy en el directorio de Bitacoras. Lo que ocurre es que “guardafaro” es parte de la dirección URL de la página. El título de la misma es “El guardián del faro” Si haces la búsqueda por este título, seguro que me encontrarás.

  7. Escorts dijo:

    Opino igual que la compi de arriba.
    Un saludo a todos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *