Discussions
How to set Favicon and Page Title in Responsive Builder landing pages
The responsive builder is a great way for users to build quick and reliable landing pages, with lots of flexibility in structure and templates offered. It's really easy to use, surprisingly intuitive, and the code output is decent. But it does have its limitations.
There are two tiny things that I would expect to set on any web page: the page title and the shortcut icon, known as a "favicon". These are used in bookmarks, in browser window title bars, and in the case of search engines, the page link text.
Each one is just one line of HTML, and it boggled my mind that neither is available as a standard setting, nor can you use the "Additional Meta Tags" box to add them - both <title> and <link> tags are stripped out when you save.
Fortunately, all is not lost - both of these can be set with one of these workarounds:
- a Custom Code block - except the favicon does not show up in Chrome
- a small piece Javascript in the page settings - except the page title doesn't show up in search engines
How to Do It:
Open any landing page created using one of the orangey-pink responsive templates.
... with a Custom Code block
This is the better option if how search engines list your page is important to you. Note that visitors using Chrome will not see your custom icon in their bookmarks or browser window.
- Drag the Custom Code content block from the Design Components toolbar to the top of your responsive page.
- Click on it to select it and open its editor, and paste in the following code:
<title>Page Title - Site Name</title><link rel="shortcut icon" type="image/x-icon" href="https://your.link.to/your/favicon.ico" />
- Change the title text and favicon link as needed
- In the Padding section of the toolbar on the left, set the padding on all sides to 0.
- Click "Save"
... with a piece of Javascript
This is the better option if how your visitors see your page is most important to you, and you aren't worried about how search engines will list your page.
- Click on the cog icon to open the Landing Page Settings tab, and scroll down to the last section - Code and Tracking.
- If you don't already have any custom Javascript added to your page, click on the "Add" button under the "Additional Javascript" box. (Otherwise, it'll say "Edit")
- Paste the following code into the popup editor:
window.onload = function(){ // Set title var title = document.createElement('title'); title.innerHTML = "Page Title - Site Name"; document.getElementsByTagName('head')[0].appendChild(title); // Set favicon var favicon = document.createElement('link'); favicon.type = 'image/x-icon'; favicon.rel = 'shortcut icon'; favicon.href = 'https://your.link.to/your/favicon.ico'; document.getElementsByTagName('head')[0].appendChild(favicon);};- Replace the blue text in line 4 with your desired page title, and the blue text in line 10 with your favicon url.
- Click "Apply", and save your page.
If you have other custom Javascript which includes a window.onload function call, you will need to combine them - just paste lines 2-11 immediately after the start of your window.onload function.
... with a bit of both!
What if you want your visitors to see your custom icon AND search engines to list your page with a useful page title? You can use both!
- Add the Custom Code block as above.
- Add the Javascript snippet as above, but delete lines 2-5.
What about Custom HTML landing pages?
I see occasional questions on Topliners about it, so it makes sense to collect all the related information together in one place. HTML landing pages can use the standard HTML tags as in the Custom Code block above, but in the right place in the HTML - inside the <head> tag. No workarounds needed!
Just add the following lines of code inside your page's <head></head> tag, and edit accordingly.
<title>Page Title - Site Name</title><link rel="shortcut icon" type="image/x-icon" href="https://your.link.to/your/favicon.ico" />
I hope this is useful for others!
Comments
-
Updated: Added information about using the Custom Code snippet, with thanks to @Devon Guerrero who mentioned it in a comment elsewhere: How to add <title> in <head> in landing page created with Design Editor ?