¿Qué es un Favicon y cómo lo uso?

Favicon, en primer lugar, es una palabra compuesta y se deriva de la frase “Favorite Icon”; por tanto se pronuncia “fav-aicon” y no favicon como se lee…

En segundo lugar, un favicon es una imagen que los desarrolladores web incluyen en el sitio y aparece en la barra de direcciones, favoritos y bookmarks (en la mayoría de navegadores).

La imagen en mención, normalmente es el logo o icono distintivo de la empresa, institución o persona para quien el sitio ha sido desarrollado. Sirve para promocionar su imagen, su marca y crear sitios más personalizados. Los desarrolladores profesionales, lo hacen para sus clientes.

Hay varias herramientas con las que se puede hacer un favicon, las que más he usado son Microangelo, Corel (creo que la versión 10 fue la última que un día probé), The Gimp, KIconEdit (el que más me ha gustado) y en la web, el Favicon from Pics.

¿Cómo agrego mi favicon en todas las páginas?

Bueno, la cosa es sencilla. Para que tu favicon se vea en una página, pues lo puedes poner en el mismo nivel de la página en la que quieres que se vea. Por ejemplo, si quieres que se vea en www.tudominio.com/blog/index.php entonces el favicon debe estar ubicado en ese mismo nivel (www.tudominio.com/blog/favicon.ico), esa será la primera dirección en la que el navegador la buscará. Sino lo encuentra en ese mismo nivel, pues buscará en el nivel superior: www.tudominio.com/favicon.ico; de allí que poniendo el favicon.ico en el “top-level” tendrás el favicon predeterminado para todas las páginas de tu sitio ;)

Ahora, dependiendo del navegador y su configuación, el favicon podría no mostrarse (aún si lo tienes ubicado en las ubicaciones antes dichas); por ello, es necesario que lo declares entre las etiquetas head de tu código:

[link type="image/x-icon" href="favicon.ico" rel="icon" /]
[link type="image/x-icon" href="favicon.ico" rel="shortcut icon" /]

A hacer bien las cosas!

Actualizado: Por alguna razon el administrador de contenido de wordpress le agregaba algunos caracteres al codigo. Como nota, en lugar de [ pones < y en lugar de ], pones >.

7 Respuestas para “¿Qué es un Favicon y cómo lo uso?”

  1. 1
    NEO_JP dice:

    uh? Nunca he visto ese tipo de código, eso no es XHTML o si? O_o

    PD: Estaba por empezar un tuto de como insertar favicon en clab xD Me ganaste :p

  2. 2
    pedro dice:

    Saludos Neo,

    En mi Actualización arriba explico lo del código.
    Éxito! ;)

  3. 3
    soundwave dice:

    mira que bien !!! como siempre estas aportando ;)

  4. 4
    LA100RRA dice:

    Juas! XD buen artículo, por cierto yo estoy usando ahora mismo el IconCool Studio y funciona muy bien ;)

  5. 5
    Freddie® dice:

    Excelente articulo, muy instructivo y muy necesario

    PD. Osea si :P

  6. 6
    hugo dice:

    perfecto muy buen articulo ya aprendi a usar ese codigo a la perfecion gracias al que lo escribio.

  7. 7
    alex dice:

    hola!
    a mi me funciona sólo en Firebox, pero no en IExplorer.
    http://www.scoutsvalencians.org/

    alguien puede ayudarme?
    gracias

Comentarios y Búsqueda

Tú también puedes comentar acerca del tema, en el siguiente formulario. Nada más te ruego lo hagas con respeto al autor del sitio y los demás que -como tú- lo visitan. Comentarios ofensivos y con la finalidad de hacer SPAM o polemizar, serán moderados.

En caso que no hayas encontrado lo que necesitas, puedes utilizar la caja de Google dispuesta al pie del sitio para seguir buscando en la Web o en este Blog.

Deja un comentario, no seas tímido.

Cerrar
E-mail It