Adding favicon to existing landing page (lazy way)¶
5 MIN EXECUTION
This process helps you quickly add a favicon to Mautic landing pages by reusing an existing favicon from a client's website. This approach avoids theme editing.
SOP¶
Requirements¶
- Access to client's live website
- Browser developer tools
- Access to Mautic landing page editor
- Existing favicon on client's website
Steps¶
- Access the client's website in your browser
- Open developer tools (F12 or right-click > Inspect)
- Navigate to the Network tab in developer tools
- Reload the page to capture network requests
- Locate the favicon file in the network list
- Click on the favicon entry
- Select the Headers tab
- Copy the Request URL from the General section
- Access Mautic landing page editor:
- Go to Components > Landing Pages
- Open your target landing page
- Add the following code to "Script inside Head":
<link rel="icon" type="image/png" href="YOUR_COPIED_URL" />
- Save the landing page
Results¶
- You see the favicon in your browser tab when viewing the landing page
- The favicon matches the one from the client's main website
- The favicon loads correctly without 404 errors in dev tools
Note
This method is efficient because it leverages existing assets and hosting, reducing our maintenance overhead. But be aware that if the original favicon location changes, you'll need to update your landing pages (low probability).
Also useful when editing the code in GrapesJS is not possible.
Description: Quick favicon implementation for Mautic landing pages using existing website assets.