[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla

# Cómo cambiar el favicon en plantilla Cassiopeia de Joomla 4

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)   08 Junio 2022    [Tips Joomla](https://sergioiglesias.net/blog/joomla)   2 - 4 minutos    Visitas: 5763  -
- [ Proyecto Joomla ](https://sergioiglesias.net/etiquetas/proyecto-joomla)
- [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla)
- [ Joomla4 ](https://sergioiglesias.net/etiquetas/joomla4)

  ![](https://sergioiglesias.net/images/blog/tips/cassiopeia-favicon.webp) 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

  [  Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/como-cambiar-el-favicon-en-plantilla-cassiopeia-de-joomla-4 "Compártelo")   [  Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-cambiar-el-favicon-en-plantilla-cassiopeia-de-joomla-4&text=C%C3%B3mo%20cambiar%20el%20favicon%20en%20plantilla%20Cassiopeia%20de%20%23Joomla%204%20-%20%23Joomla4 "Postéalo")   [  Envíalo ](https://api.whatsapp.com/send?text=C%C3%B3mo%20cambiar%20el%20favicon%20en%20plantilla%20Cassiopeia%20de%20%23Joomla%204%20-%20%23Joomla4%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-cambiar-el-favicon-en-plantilla-cassiopeia-de-joomla-4 "Enví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](https://www.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](https://imagen.online-convert.com/es/convertir-a-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

  [  Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/como-cambiar-el-favicon-en-plantilla-cassiopeia-de-joomla-4 "Compártelo")   [  Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-cambiar-el-favicon-en-plantilla-cassiopeia-de-joomla-4&text=C%C3%B3mo%20cambiar%20el%20favicon%20en%20plantilla%20Cassiopeia%20de%20%23Joomla%204%20-%20%23Joomla4 "Postéalo")   [  Envíalo ](https://api.whatsapp.com/send?text=C%C3%B3mo%20cambiar%20el%20favicon%20en%20plantilla%20Cassiopeia%20de%20%23Joomla%204%20-%20%23Joomla4%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-cambiar-el-favicon-en-plantilla-cassiopeia-de-joomla-4 "Envíalo")

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado

### ¿No sabes bien en qué estado

está tu web Joomla?

Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.

Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML

[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables

[![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior

Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.

[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")

### Suscríbete a mi newsletter

¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**.

[Quiero apuntarme!](https://sergioiglesias.net/newsletter)

###  No hay comentarios

###  Deja tu comentario

 En respuesta a Some User

 Nombre \*

 Dirección de email \*

 Texto del comentario \*

 Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*