Cómo poner un icono en tu web.

También conocido como favicon

poner icono en tu web

Poner un icono en tu web, como un logotipo o motivo identificador, puede ser una buena idea para reforzar nuestra imagen de marca.

Este icono, conocido como favicon (debido a que en su origen se utilizaba en la lista de favoritos del navegador Internet Explorer), acompaña al título de nuestra página en la pestaña del navegador. También es utilizado para su misión original de ser mostrado en la lista de favoritos una vez que nuestra web forma parte de tan apreciado lugar.

marcadores favicon

El procedimiento para poder utilizarlo en nuestra web es muy sencillo y contamos con dos alternativas entre las que elegir:

1 Originalmente tan solo se admitían archivos de imágenes con la extensión .ico para este propósito y con una resolución limitada a 16×16 píxeles. Si nos decantamos por esta opción, compatible con las versiones más antiguas de los navegadores, bastará con que subamos el mencionado archivo a la carpeta raíz de nuestro servidor. Eso si deberás utilizar un nombre especial para que sea reconocido como icono de la nuestra web: favicon.ico.

Puedes generarlo automáticamente desde diversos servicios online gratuitos como, Genfavicon o Favicon Generator.

2 Actualmente, los navegadores más modernos admiten el formato .png y también el .gif, pudiendo incluir además imágenes de mayor resolución.

En nuestro caso utilizamos una imagen .png con transparencia, que nos permite mostrar nuestro querido lío.

favicon sinlios

 

Pero, ¿cómo crear e incluir estás imágenes en nuestra web?

Podemos utilizar nuestro editor de imágenes preferido, como por ejemplo Pixlr (online y gratuito) para generar una imagen con la resolución adecuada (64×64 píxeles es más que suficiente). Después lo guardamos en formato .png y añadimos el siguiente código en la cabecera de nuestra página web, entre las etiquetas <head> y </head>, cambiando “favicon.png” por el nombre de nuestra imagen:

Si utilizas WordPress, algunos temas incluyen la posibilidad de añadir la dirección del favicon en su propio panel de control, lo cual facilita mucho las cosas. De lo contrario tendrás que editar el archivo header.php en la carpeta de tu plantilla e insertar el código que te facilito arriba.

Y tu, ¿cuentas ya con un favicon en tu web?

Categorías

Autor:

Socio cofundador de SinLios.com. Biólogo, profesor, programador, blogger y apasionado de la ciencia, la tecnología y el ejercicio físico. Escéptico y humanista, me encanta la fotografía, disfruto la música medieval y soy feliz en la naturaleza. :: Perfil en Puro Marketing :: Perfil en LinkedIn :: Perfil en Alimenta tu Bienestar :: YouTube Vídeo

8 Comments
  1. Hola [email protected]!

    Me ha gustado mucho el post, y el detallazo de ¡incluir mi favicon! Me ha hecho mucha ilu 🙂

    Como lo mio son las Confesiones, os confieso que yo lo hago con la opción del Word Press, y tengo un truquillo, hay veces que la plantilla no me da la opción, así que le pongo otra plantilla, cargo el favicon y luego le vuelvo a poner la que me gusta. Es un poco pachaguerillo pero me funciona.

    Un abrazo!!!

    • Hola Jefferson!. Internet Explorer sólo muestra el favicon una vez has añadido la página a tus marcadores “favoritos”. Como bien sabes, cada navegador tiene un funcionamiento ligeramente diferente.
      Un salduo y gracias por pasarte por aquí 🙂

  2. Sergio A. Toledo

    Hola, muchas gracias por la información compartida, mi plantilla de wordpress cuenta con la opción de poner el logo y la descripción del sitio con los campos para poner el favicon y la imagen .png , además, el creador de la plantilla BW theme “WELLNESS” me dio el enlace URL de la actual pestalla que alude al mismo nombre, me gustaría saber como puedo yo crear mi logo/icono, que programa uso, como lo guardo y como lo subo a mi Hosting que es IPAGE, de antemano muchas gracias y disculpe mi ignorancia, entre tanto, buscaré en Pixlr haber que puedo hacer.

    • Hola Sergio!!. ¡La verdad es que es un poco dificil responder a tantas preguntas aquí!.
      Para crear el logo puedes utilizar Pixlr que, como bien sabes, es un editor gratuito y online para crear imágenes de todo tipo.
      Puedes guardarlo en formato PNG con transparencia y utilizar el propio gestor de archivos de WordPress para subirlo a tu servidor.
      Seguramente mi respuesta te sabrá a poco pero espero al menos haberte puesto en la pista para que logres tu objetivo.
      Un saludo y muchas gracias por pasarte por aquí 🙂

  3. Anthony Villarreal Bernardo

    No soy un experto en WEB solo quiero resolver una duda sobre este tema

    Este es el codigo que uso y pude hacer con sus consejos

    Tengo problemas por que no me aparece la imagen en la pestaña

    Navegador: google chrome
    Programa web: dreamweaver

    Por favor si pueden ayudarme se los agradeceria mucho.

  4. Frederick Heineken

    No me aparece el favicon, en el navegador tan sólo puedo ver el código que proporciona la página. Estoy trabajando en html y utilizando el navegador explorer. Lo he cargado en favoritos, pero tampoco me funciona :/

One Ping
  1. […] uso de código HTML, pero en especial es para aplicar un icono en la pestaña del buscador. Da clic aquí para ir a la […]

Deja un comentario

A %d blogueros les gusta esto: