Vormgeving - Design en Joomla 4

Nederlandstalige stap voor stap handleidingen voor Joomla 4

Hoe kan ik mijn favicon aanpassen in Joomla 4

Je wil je favicon aanpassen van je Joomla 4 website, maar hoe maak je een favicon en waar moet je het .ico of .svg bestand plaatsen?

In dit artikel leg ik stap voor stap uit hoe jij je favicon kunt aanpassen van je Joomla 4 website.

Je hebt een FTP client (bijvoorbeeld FileZilla - een gratis FTP client) nodig om het favicon te uploaden naar je website. In sommige gevallen kun je vanuit de Joomla template een favicon uploaden.

Lees ook mijn artikel over FileZilla FTP programma

 Klik op de afbeeldingen voor een vergroting.

Inleiding

Als je Joomla 4 installeerd dan wordt het standaard Joomla favicon getoond. Hieronder 2 voorbeelden.

Standaard favicon joomla 4 voorbeeld 1

Standaard favicon joomla 4 voorbeeld 2

Het is dus altijd mooi voor een stukje herkenning voor je bezoeker indien je een eigen favicon gebruikt.
In het standaard Joomla 4 template Cassiopeia wordt het favicon (in dit voorbeeld als svg bestandsnaam) op de volgende locatie opgeslagen: 

  • /templates/cassiopeia/images/joomla-favicon.svg voor Joomla 4.0.
  • /media/templates/site/cassiopeia/images/joomla-favicon.svg voor Joomla 4.1 en hoger.

Enkele voorbeelden van andere website die een eigen favicon hebben zoals bijvoorbeeld Akeeba Backup, JCE Editor, RSJoomla en NU.nl.

Standaard favicon joomla 4 Akeeba

Standaard favicon joomla 4 JCE Editor

Standaard favicon joomla 4 RS Joomla

Standaard favicon joomla 4 nu.nl

Wat is een favicon?

Een favicon is dus een klein pictogram of logo dat wordt gebruikt om een website te identificeren en te onderscheiden van andere websites. Het wordt weergegeven in de adresbalk van een webbrowser, in de bladwijzers of favorieten van een gebruiker en vaak ook in de tabbladen van een webbrowser. Het is meestal een afbeelding van 16x16 pixels, maar kan ook groter zijn. Het doel van een favicon is om een visuele herinnering te creëren voor de gebruiker, zodat ze de website gemakkelijk en snel kunnen identificeren. 

Het maken van een favicon is niet moeilijk en kan op verschillende manieren worden gedaan. Hier zijn enkele manieren om een favicon te maken:

  1. Gebruik een online favicon-generator: Er zijn verschillende online favicon-generators beschikbaar die je kunt gebruiken om een favicon te maken zonder dat je enige technische kennis nodig hebt. Je hoeft alleen maar een afbeelding te uploaden die je als favicon wilt gebruiken en de tool genereert automatisch een favicon.ico-bestand dat je kunt downloaden.

    Bijvoorbeeld via: https://www.favicon-generator.org/

  2. Gebruik een grafisch ontwerpprogramma: Je kunt een favicon ook maken met behulp van grafisch ontwerpprogramma's zoals Adobe Photoshop, Adobe Illustrator of GIMP. Maak gewoon een afbeelding van 16x16 pixels of 32x32 pixels en sla het op als een ICO-bestand.

  3. Gebruik een online afbeeldingseditor: Er zijn verschillende online afbeeldingseditors beschikbaar, zoals Canva of Pixlr, die je kunt gebruiken om een afbeelding te maken die je als favicon wilt gebruiken. Maak gewoon een afbeelding van 16x16 pixels of 32x32 pixels en sla het op als een ICO-bestand.

Zodra je de favicon hebt gemaakt, moet je het favicon.ico-bestand opslaan en uploaden naar je website. Wanneer je website wordt geladen, zal de browser de favicon automatisch laden en weergeven in het tabblad van de browser en in de favorietenlijst. In het volgende hoofdstuk leg ik uit hoe en naar welke locatie jij je favicon moet uploaden

Stappen uploaden favicon

Je hebt een favicon gemaakt en wilt deze uploaden naar je website met het Cassiopeia template. Volg hiervoor de onderstaande stappen:

  1. Download en installeer FileZilla, mocht je deze nog niet geinstalleerd hebben.
  2. Configureer FileZilla zodat je een FTP verbinding kunt opzetten naar je hostingomgeving van je website.
  3. Maak verbinding naar je hostingomgeving.
  4. Upload het favicon.ico (of favicon.svg) bestand en plaatst deze in de map: 
    /media/templates/site/cassiopeia/images/ voor Joomla 4.1 en hoger.
  5. Er komt een melding in beeld indien er al een favicon.ico bestand in deze map staat.
    Je kunt het oorspronkelijke bestand evtentueel hernoemen naar favicon_old.ico of favicon_old.svg, of het bestaande bestand overschrijven.
  6. Nadat het bestand geupload is, ga dan naar de front-end om te kijken of het favicon aangepast is.
    Indien je een ander template gebruikt raadpleeg dat de website van de template bouwer of zoek waar in jouw geval het favicon bestaat staat.
    In sommige gevallen staat deze in de root van je Joomla installatie en in de root van je template map.

 

Lees het artikel van Marc Dechèvre: Joomla 4 – Cassiopeia Template – a bunch of Tips & Trick

 

Terug naar het overzicht    Terug naar categorie Vormgeving - Design