Como cambiar el favicon en Moodle

Una de los elementos que definen el diseño de una web es el favicon: ese pequeño icono que aparece en la pestaña del navegador. En esta guía te enseñaré a cambiar el favicon en Moodle, y como ya es habitual, algunos consejos más 😀 .

¿Para qué sirve el favicon?

Este icono es una de las herencias que nos dejó el internet explorer de Microsoft, el cual por muchos años fue el navegador más usado del mundo.

Inicialmente sirvió como una imagen que identificara rápidamente los favoritos de internet explorer (marcadores en algunos navegadores), pero  después se constituyó en un elemento identificador de un sitio web.

Actualmente es un elemento de marketing web poderoso.

Para insertarlo en una web se necesita un archivo de imagen, generalmente un logotipo representativo. Pueden usarse varios tipos de imágenes, pero las más soportadas por los navegadores son: ICO, PNG y GIF.

Desarrollo de un favicon en Moodle

Para su uso en Moodle, el favicon debe estar en formato ICO, de 16 pixeles de alto por 16 pixeles de ancho (16×16).

Puedes usar la imagen que desees, la mayoría usan algo que representa el sitio web.

Al ser una imagen tan pequeña, recomiendo usar pocos elementos simples y bien definidos. De esta manera se apreciará mejor lo que quieres trasmitir con tu favicon.

Si tienes un logo ya definido que contiene muchos elementos, intenta colocarle colores bien diferenciados, sobre todo que resalte del fondo de la imagen.

Puedes dejar la imagen sobre un fondo transparente 😎 .

Tip
Es recomendable que la imagen final sea cuadrada para que aproveches todo el espacio que dispone el navegador

Como necesitamos un archivo de imagen ICO, puedes usar un editor gráfico como Photoshop o GIMP para crear el diseño y guardarlo luego como formato .ico con un tamaño de 16×16 pixeles.

En esta guía usaré la imagen .png que observas debajo, y lo convertiré en .ico con el generador online favicon-generator.org.

Favicon moodleprueba

Puedes usar cualquier tamaño de imagen, pero te recomiendo que no mayor a 512×512 pixeles. El generador online la transformará al tamaño que necesitamos. La que diseñé tiene 64×64 pixeles.

Para darle uniformidad a mi web usé la paleta de colores y la tipografía de la guía Como cambiar el logo en Moodle 3.x.

Generando la imagen .ico

Una vez tengas el diseño, vamos a favicon-generator.org y ubicamos la imagen en nuestra computadora con el botón: Seleccionar archivo. Para obtener sólo el archivo .ico, marca la opción: Generate only 16×16 favicon.ico, posteriormente haz clic al botón: Create Favicon.

Favicon generado online

El tiempo que se tarde en generar dependerá del tamaño de la imagen subida, por lo general son solo segundos si no tiene más de 100 kilobytes.

Al final nos llevará a otra página donde descargaremos la imagen con el link: Download the generated favicon. Guarda el archivo resultante .ico, debe llamarse: favicon.

Favicon generado online pantalla final

Cambiar el favicon en Moodle

Nota
Como es habitual en la Serie: Como instalar Moodle en tu PC, usaremos nuestro servidor local Wampserver (el cual instalamos en nuestra PC en esta guía), como referencia. Para un servidor en la web, es prácticamente igual, solo cambian las rutas donde están los archivos, ya que la estructura de Moodle es la misma.

Usaré el tema Clean (es el predeterminado del Moodle 3.x), para explicar cómo cambiar el favicon en Moodle. La carpeta pix es necesaria en todos los temas.

Vamos a la carpeta donde instalamos el Moodle en la www del Wampserver, dependiendo de donde lo instalaste. En la guía que te referencié antes están los detalles. En mi caso la carpeta es D:\wamp64\www\moodleprueba.

Ahora debemos ir a la carpeta de imágenes de tema Clean, ésta se encuentra en theme\ clean\pix. Aquí veremos el favicon.ico que usa el tema actualmente, bórralo o renómbralo si quieres conservarlo.

Copia en esta carpeta pix el favicon.ico que hemos generado.

Con eso nuestro Moodle tiene nuevo favicon 😀 . Recarga la página para que veas el resultado.

Para que puedas obsérvalo es posible que debas borrar el caché del navegador.

Si sigues sin ver el cambio, debes loguearte como administrador e ir a Administración del sitio > Apariencia > Temas > Ajustes de temas, habilita el check en Modo de diseño de temas y Guarda. Recuerda deshabilitarlo en un servidor en la web cuando concluyas los cambios.

Te dejo un pantallazo de como quedó el mío 😉 .

Pantallazo favicon en moodle

Cualquier duda, déjala en los comentarios. Saludos 🙂 .

Califica este artículo

Puntuación promedio 0 / 5. Votos: 0

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

7 comentarios en “Como cambiar el favicon en Moodle”

  1. A mi no me funciona el favicon. Lo he cambiado en absolutamente todos los temas, y me sale una bola del mundo en vez del que yo he puesto, ya no me sale el antiguo ni el que he puesto. ¿no lo reconoce? es .ico y he comprobado en propiedades que su tamaño es 16×16. No entiendo lo que pasa.

    Responder
  2. Hola, un saludo, en este momento utilizo moodle 3.6, un host y alojamiento de milaulas y no dispongo de un cpanel, aún así desearía cambiar el favicon de mi sitio.

    Responder
    • Hola David.
      En ese caso sera necesario que accedas al directorio donde esta tu Moodle, con las herramientas que ofrezca tu hosting y seguir las instrucciones de esta guía.
      Lamento no poder ayudarte mas.
      Saludos.

      Responder
  3. Cordial saludo:

    Yo estoy tratando de quitar el favicon, pero hay una particularidad, la aplicación de MOODLE la tengo en un servidor de AWS Amazon, la versión es la 3.3.

    ¿Como tengo que hacer para poder cambiarla?

    Responder

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.

Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete