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.
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.
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.
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 Boost (es el predeterminado a partir de Moodle 3.7), 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 (o en la carpeta de publicación de tu hosting), 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 Boost, ésta se encuentra en theme\boost\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 y de Moodle.
Para borrar el cache de Moodle debes loguearte como administrador e ir a: Administración del sitio > Desarrollo > Purgar cachés, luego haz clic al botón: Purgar todas las cachés.
Dato
Si aun sigues sin ver los cambios, dirígete a Administración del sitio > Apariencia > Temas > Ajustes de temas, habilita el check en Modo de diseño de temas, Guarda los cambios. Deshabilita esta opción en cuanto veas el nuevo favicon.
Te dejo un pantallazo de como quedó el mío.
Cualquier duda, déjala en los comentarios. Saludos 🙂.
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.
Hola Marina,
Con estas instrucciones debería funcionar, comprobado por mi muchas veces 😉
Saludos.
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.
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.
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?
Solo necesitas acceder al servidor vía el panel de control que dispone AWS para ti, lo demás es seguir la guía 😀
Saludos.
me solucionaste la viiiida *-*