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.
- Create Your Favicon
- Upload Favicon to Your Company Website
- Export Your Mautic Theme
- Add Favicon Info to HTML file
- Repackage Your Theme
- 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!