En estos meses he estado trabajando en un par de proyectos con Joomla 4 para gestionar diferentes elementos desde el Front. Para ambos he usado la plantilla Cassiopeia.
Cómo cambiar el favicon en plantilla Cassiopeia de #Joomla 4 - #Joomla4 Tuitéalo
Antes de meterme en materia te pongo en antecedentes del por qué de este artículo:
En primer lugar, el hecho de usar este template es por no tener que instalar ninguna plantilla ya que no hay nada en el mercado de tipo "dashboard".
En cuanto pueda, voy a preparar un template para Joomla 4 de este tipo para que me valga para estos proyectos.
En segundo lugar porque la plantilla Cassiopeia de Joomla 4 viene con muy pocos parámetros de configuración y, en concreto, no tiene uno para cambiar este "icono de favoritos".
Personalmente creo que sería fácil de implementar, pero no se ha considerado.
Después de investigar un poco el código del template vi que se podía hacer a través de "override", así que me he decidido a escribir este artículo por si a alguien le viene bien.
La verdad que es bastante sencillo de hacer y creo que merece la pena personalizarlo (aunque también es cierto que para estos proyectos no me hacía mucha falta hacerlo).
Por cierto, si no sabes qué es un favicon, te lo explico a continuación:
Se trata de un icono representativo de tu web, una especie de logo en pequeñito que se muestra al lado del título en la pestaña del navegador.
Ahora que ya sabes todo esto, vamos a ver cómo cambiarlo por uno personalizado.
Pasos para cambiar el favicon de Cassiopeia en Joomla 4
Tienes que saber que esta plantilla utiliza 3 iconos para generar el favicon:
- joomla-favicon.svg
- favicon.ico
- joomla-favicon-pinned.svg
El motivo de usar estos 3 tipos de iconos es por los diferentes tipos de navegadores: el .ico es el tradicional y funciona en todos los navegadores (antiguos y modernos). El formato SVG, en cambio, es más moderno.
El código que los va a mostrar lo puedes encontrar en la línea 22 del fichero index.php del template Cassiopeia:
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
Y la carpeta en donde se ubican es la siguiente: /media/system/images/.
Pues bien, lo primero que se te puede ocurrir es cambiar esos iconos ahí, en la carpeta original.
Pero ya sabes que, en cuanto actualices la versión de Joomla, se perderán y volverán los originales.
Entonces, lo que puedes hacer es generar los 3 iconos y subirlos a la siguiente carpeta (ojo que dependerá de la versión de Joomla 4 que tengas instalada):
- Para versiones de Joomla 4 anterior a 4.1.1:
templates/cassiopeia/images/. - Para versiones de Joomla 4 superiores a 4.1.1:
media/templates/site/cassiopeia/images/.
Con esto ya tendrías resuelto el problema de cambiar el favicon en la plantilla Cassiopeia para Joomla 4.
Herramientas para generar favicon
Como extra, te paso un par de herramientas online que te pueden ayudar a generar estos ficheros:
- favicon-generator.org: se trata de una herramienta que poniendo una imagen de tu logo te genera diferentes ficheros y el código que necesitas para ponerlo en tu plantilla HTML. Eso sí, solo genera ficheros PNG e ICO. Pero no SVG.
- Conversor SVG: esta herramienta convierte cualquier imagen a formato SVG.
Ahora ya sí que tienes todo lo necesario.
Espero que te ayude en tus proyectos
Cómo cambiar el favicon en plantilla Cassiopeia de #Joomla 4 - #Joomla4 Tuitéalo
He seguido los pasos que indicas para cambiar el favicon, pero en los resultados de búsqueda en móvil aparece el favicon de joomla, que en teoría no está en el sitio.
¿Algún consejo?