What you need to know before launching your website!
Look - I get it. You just spent way too long a decent amount of time creating your new website and you can’t wait to post the link on social media! But when you post the website URL, will a thumbnail image show up or just an empty space where it should be? And when visitors come to your new, “custom” site, will that horrible Squarespace square icon still be on your browser tab? If you answered yes to both questions, hold off the launch party just yet because you still have some work to do, my dear!
Today I’m going to walk you through exactly how to create your favicon and social sharing image for your website. Don’t worry, it’s not as hard as you may think!
For starters, go to Design and click the first link Logo & Title. Scroll down. This is where you can add both the Favicon and the Social Sharing Logo.
Creating a Favicon
“A Favi-what?” A Favicon is the small (more like tiny) icon that shows up in your browser tab when you have a website up. Notice how all of the tabs currently up in your browser have an icon - a recognizable image that helps to solidify their brand. You may not have noticed or even thought about it before, but it’s a small graphic that reinforces your brand rather than presenting yourself like a generic Squarespace site.
First, make sure you have this icon available. It displays at 16px X 16px but you’ll want to upload an image that’s larger - at least 100px X 100px. It should either be your logo or a simpler version of your logo. If you need help creating one, reach out to the designer who created your logo (or me, if you don’t remember who that was!) Also, because the favicon is so small, if your primary logo is comprised of thin lines or small details, you may want to set it in front of a solid background and remove some of those details. Once you choose it, upload it and click save!
See the example below:
Creating a Social Sharing Icon
For the social sharing image, you’ll want to choose the image that’s most compelling to show off your product, company or brand. In my case, I chose a custom image that shows multiple devices and my work displayed inside. For you, it might be a logo or the image used in the banner of your homepage. Whatever you think will be most recognizable, eye-catching and best for marketing your brand! Once you choose it, upload it and click save!
Possibly the most important part of this is testing both the favicon and social sharing icon to make sure they work properly. For the favicon, simply refresh your browser to make sure it’s pulling in correctly and looks good. For the social sharing, there are two ways to test it.
Facebook: Start to write a post with your web URL. At the end of the URL click the space bar (don’t post unless you really want to!) and the image should pop up (see below).
2. Facebook Debugger Tool: Click this link and in the URL space, type out your full URL and click DEBUG. This will show you the current image and text that’s being pulled in. If you just changed the image, click the Refresh button.
And voila! Now you’re ready to launch!