Customize Your Favicon in Mautic

This article describes how to add your favicon to your Mautic Theme. Favicons are small 16×16 pixel icons that display in tabs and next to the URL bars. By default, the Mautic favicon will display on your landing pages. Customizing the landing pages to display your favicon ensures your customers get a complete branded experience.  

The steps below are broken down in detail throughout the article.

  1. Create Your Favicon
  2. Upload Favicon to Your Company Website
  3. Export Your Mautic Theme
  4. Add Favicon Info to HTML file
  5. Repackage Your Theme
  6. Import Updated Mautic Theme

 

Step 1: Create Your Favicon

There are several free favicon generators where you can create your custom favicon. Let’s use https://www.favicon.cc/ to generate the favicon for the penguin logo below. Import the image to your favicon generator. Make sure to select “Shrink to Square.”

 

Edit and Download Favicon

 

Step 2: Upload Favicon to Your Company Website

Upload your favicon.ico file to your company website. We recommend adding to your media files and ensuring that the favicon is publicly accessible. Record the URL location of your favicon.

 

Step 3: Export Your Mautic Theme

Navigate to your Mautic Theme. Configuration -> Theme and Download your current theme.

 

Step 4: Add Favicon Code to HTML File

Extract the contents of your Theme’s zip folder. Navigate to html -> base.html.twig. Open this file in an HTML or text editor. In the <head> section, add the line <link rel=”shortcut icon” href=”YOUR_URL/favicon.ico” type=”image/x-icon” />

Change YOUR_URL/favicon.ico to the location/name of your favicon.ico file.

 

Step 5: Repackage Your Theme

Highlight ALL of the files and folders in main directory pictured below and compress as a new zip folder.

On a MAC -> Compress 5 items

On a PC -> Send to Compressed (zip) folder

 

Step 6: Import Your Updated Mautic Theme

In the Mautic Theme page, select Choose File and navigate to your new zip folder. Select Install.


Test that your favicon is visible. Navigate to
Components -> Landing Pages and select your new theme. Open the builder, apply a change, and open the preview. Verify that your favicon is present and enjoy your new favicon!