(Squarespace) Adding Twitter X Icon next to Site Title

[tuanphan]

To add a Twitter X Icon next to Site Title, like this.

You can use this code to Code Injection > Footer. Remember to change X URL.
If code doesn’t work, you can comment below, message or email me.

<script>
window.instagramUrl = 'https://x.com/';
window.instagramIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>';
function createSocialIcon() {
  let siteTitles = document.querySelectorAll('#site-title');
  
  siteTitles.forEach(function(siteTitle) {
    let link = document.createElement('a');
    link.href = window.instagramUrl;
    link.className = 'second-button';
    link.innerHTML = window.instagramIcon;
    
    siteTitle.parentNode.insertBefore(link, siteTitle.nextSibling);
  });
}
document.addEventListener('DOMContentLoaded', function() {
  createSocialIcon();
});
</script>

and this to Custom CSS box.

div.header-title-text {
    display: flex;
    align-items: center;
}
a.second-button {
    width: 30px;
    margin-left: 20px;
}

To change X size, change this.