esto es un favicon

Qué es un Favicon y para qué sirve

Cada vez que realizo una conferencia o un curso, suelo mirarme las páginas web de los asistentes. Para ello, la organización del evento me envía un listado con sus URL y las voy abriendo en un mismo navegador pero en diferentes pestañas. Por desgracia, cuando tengo las páginas abiertas y puedo ver los fav icons de todo el mundo, observo que una buena parte de ellos son los favicons de los CMS utilizados para construir sus páginas web (normalmente el de Joomla o el de WordPress), no un favicon corporativo, que es lo que debería ser.

Así que aquí va este breve artículo explicando qué es un favicon y para qué sirve, a ver si de esta manera, consigo que la gente le otorgue la importancia que se merece.

 

Qué es un favicon

Es un pequeño icono (normalmente de 16×16 píxels o de 32×32 px) que se utiliza para identificar un sitio web en las pestañas de un navegador, en un listado de favoritos, o en cualquier otra parte que requiera una identificación pequeña.

En este blog que estás leyendo, el favicon es una “MP” con fondo fucsia que puedes ver junto a la URL o en la pestaña de la página tu navegador.

 

Para qué sirve un favicon

Es un símbolo que transmite imagen corporativa, así que sirve para:

  • Transmitir nuestra imagen de marca cuando alguien navega por nuestra página web y fija su mirada en la zona de la URL del navegador.
  • Para que nuestra página sea fácilmente identificable cuando alguien tiene abiertas varias pestañas en su navegador.
  • Para que nuestra página sea fácilmente identificable cuando alguien la guarda en sus favoritos.

 

esto es un favicon

Cómo podemos crear un favicon para nuestra página web

Existen muchos programas que te ayudarán a crearlo. Este es el que yo utilizo para crearlos: creador de favicons.

Mi consejo es que crees tu favicon en 32×32 píxels y que sea parecido a tu logo. Puedes crear favicons a partir de imágenes… quizás esto puede serte de ayuda, pero píxel a píxel también es fácil de crear. Otro consejo: antes de diseñar tu favicon mira favicons de otras empresas en Google Imágenes, esto puede ayudarte a inspirarte para el tuyo y a asegurarte de que sin querer, no utilices algún favicon que ya ha sido creado por alguien más.

Cuando ya lo tengas creado, debes guardarlo utilizando el nombre favicon.ico y subirlo por FTP al directorio raíz de tu página web. Algunos gestores de contenido como WordPress  disponen de una sección en el panel de administración para que indiques la URL exacta del favicon… aunque funciona igualmente si allí no indicas nada pero dispones de favicon en tu directorio raíz. También algunas plantillas de WordPress llevan ya una zona en la que indicas la URL de la imagen de tu favicon y ya está.

Para que tu favicon se vea lo antes posible, puedes dar a conocer su existencia a través del código fuente de tu página web, utilizando en los metatags la siguiente línea de código:

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

Aunque de nuevo, si no utilizas la línea de código, el navegador lo verá por si solo en algún momento. En Firefox y Chrome se ve casi al momento, en Explorer tarda un poco más.

Esto es todo.
Que vaya todo bien… (y cuando tengas un momento, asegúrate de que tu página web dispone de su propio favicon ;-)

Nos hablamos

Summary
Qué es un favicon y para qué sirve
Article Name
Qué es un favicon y para qué sirve
Description
Un favicon es un pequeño icono (normalmente de 16x16 píxels o de 32x32 px) que se utiliza para identificar un sitio web en las pestañas de un navegador, en un listado de favoritos, o en cualquier otra parte que requiera una identificación pequeña.
Author
Publisher Name
3isic.com
Publisher Logo
19 comentarios
  1. Carmen
    Carmen Dice:

    Hola Montse que tal! Existe un plugin de photoshop que te deja guardar la foto en formato .ico, también puedes hacer algo en movimiento con un gif con tu favicon y guardarlo .gif, un ejemplo de esta web que la tengo en construcción es este http://colourlaboratory.com

    Saludos!!

    Carmen

    :-)

  2. Montse
    Montse Dice:

    Muchas gracias Carmen!
    (oye, el link a colour laboratory me da error 500, imagino que es porqué estás trabajando en ella… me la miraré de nuevo dentro de un rato) –> Ya lo he arreglado (pillava el paréntesis, así que lo he quitado de tu enlace) ahora sí funciona.

    He visto el favicon en gif animado que has utilizado. Me gusta ! :-)

    Un fuerte abrazo.
    M.

  3. Montse
    Montse Dice:

    Gracias Jordi, saber esto puede ser de utilidad a mucha gente. En el caso de Joomla, además, el logo es bien conocido!!! así que cuando abres una página realizada utilizando este CMS enseguida ves el favicon de Joomla. No entiendo como algunos desarrolladores web no lo tienen en cuenta y son capaces de entregar la web a un cliente sin haber personalizado este icono :-(

  4. Miguel
    Miguel Dice:

    Por favor me podrias hacer un favicon con las letras LO de color verde y el fondo de color negro, te lo agradeceria ya tengo colocado uno pero no me convence, si eres tan amable de hacermelo por favor mandamelo a mi correo el cual te adjunto, muchas gracias de antemano, espero tu respuesta muchas gracias.

  5. Montse
    Montse Dice:

    Jajajajaja, estás de broma Miguel!!!
    Hacer un favicon es muy fácil… así que hazlo tu mismo, por favor. Crea una imagen de 32×32 píxels y guardala con el nombre de “favicon”, y la extensión “.ico”… más fácil imposible.

  6. Pablo Urani
    Pablo Urani Dice:

    Hola, Montse, muy interesabte este post. He seguido tu consejo, y me funciona con Firefox, pero no con Explorer.

    Me puedes decir en dónde he de copiar y pegar esta línea de código?

    Gracias!

    Pablo Urani

  7. Montse
    Montse Dice:

    Pablo en Explorer tarda unas horas en mostrarse.
    Como hace días que publicaste este comentario es posible que ahora ya lo tengas resuelto. Si no es así, avísame por favor….
    Un abrazo.

  8. Xavi
    Xavi Dice:

    Hola Montse,
    ens vam coneixer al curs d’Igualada.
    És molt interesant el que expliques i ja em tens enganxat, però aquest cop no me n’he sortit. El favicon se’m veu bé amb Chrome, però no amb explorer.
    En canvi la teva web es veu la M a tot arreu.
    He posat la linea al codi font, ja fa dies! i encara no es veu.
    La web: http://www.dyneke.com
    el favicon existeix: http://www.dyneke.com/favicon.ico
    la linea que he creat al codi font està lleuregament modificada de la teva proposta perue em donava error, he canviat el tipus de cometes y he suprimit l’espai abans de la / final:

    Em pots ajudar? Moltes gràcies Montse, t’envio una abraçada!
    Xavi

  9. Montse
    Montse Dice:

    Xavi, amb Internet Explorer a vegades triga una mica a aparèixer el favicon (hores normalment). Et passarà el mateix quan el canviis: veuràs el nou favicon amb Chrome i Firefox al moment, però l’Explorer encara mostrarà l’antic durant una bona estona.

    Espera 24 hores i veuràs com ja ho veus.
    Una abraçada.

  10. Jordi Oliver
    Jordi Oliver Dice:

    Hola

    Veig que el tema Favicon porta cua…
    Xavi, si tens problemes amb el IE prova d’esborrar l’historial i les cookies, i després reinicies el navegador; normalment funciona.

    Salutacions.

  11. Franklin
    Franklin Dice:

    Hola Montse,

    Unas consultas:
    hay algún problema si creo el favicon en photoshop ?
    Porque siempre debe llevar como nombre favicon ya que deseo ponerle el nombre del dominio ?

    Gracias,
    un Saludo!

  12. Montserrat
    Montserrat Dice:

    Franklin, no hay ningún problema. Para que el navegador lo detecte automáticamente sí debe llamarse favicon.ico, pero si utilizas un WordPress tu plantilla será capaz de indicarle al navegador que utilice otro fichero con el nombre que tu quieras.

  13. Julio Suarez
    Julio Suarez Dice:

    Muchas gracias tenía dudas de que era un favicon que vi en un tutorial y quería saber para que me sirve, muy bien ya hasta cree uno. Gracias.

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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