Squarespace Site Logo Tips – Easy Method to Add Logo
Following are some important tips for logo of your Squarespace website.
Squarespace Logo Tips
Squarespace does not require any specific size of logo for your website.
I suggest that your Squarespace logo size should be close to the rendered size of logo in most popular screen resolution. For more detail, you may consult another Dozro article about the best size for website logo.
You can change the size of logo after uploading it to your Squarespace site. I recommend that you keep the height the height almost double the pixel size of text in navigation menu.
Though recommended but it is not necessary to include an imaged logo for website. You can keep using the site title – you can apply a specific font or color to site title text in Squarespace.
However, after uploading a logo image, the site title is hidden and serves as the alt text for the site logo. Keep the alt text concise for the purpose of accessibility. By default, site title or logo appear on all pages of your Squarespace website.
Please remember that when a user clicks on logo image of your Squarespace site, it always opens the homepage of your site. However, you can set any page as homepage.
Pro Tip: You can hide homepage from navigation by sending it to Not Linked section because your site logo performs the purpose of home page.
Your Squarespace logo can be in JPG, GIF, or PNG image format. Squarespace does not support SVG image format. If your logo image is in transparent PNG format, then do not edit it with built-in Squarespace image editor as it saves image in JPG format with no transparency.
In case the website author (you) has not provided the alternate social sharing image, Squarespace will serve the site logo of your website when some user shares layout or collection pages of your Squarespace site on social media platforms such as Facebook or Twitter.
If your logo consists of an icon, you can also use it for favicon of Squarespace site with a different custom size.
To design your logo, you can use the Squarespace free logo designing tool. [RD]
Squarespace does not allow you to use a stock image (such as Getty Images) as site logo.
Squarespace does not allow stretching the logo image more than its original pixel size – and it is a welcoming feature.
Method to Add Squarespace Logo
To access logo settings, click Edit on top left of preview window, then click ‘EDIT SITE HEADER’ or click anywhere inside header area to open logo settings of Squarespace.
Squarespace allows you to set a preferred position of logo in site header. For example, you can set to display site logo on the left, or center of header area. You can set logo to appear on the left, right or above navigation menu on desktop site. On mobile site, you can display logo on any of left, center or right positions in the header.
You can set some different height of logo for desktop as well as mobile sites. Width is locked with the height axis – it means when you change height of Squarespace logo, it automatically changes width of the logo.
Squarespace even allows you to upload a separate logo which will only appear on your mobile site. If you do not upload a separate logo for the mobile site, then your default desktop global logo will automatically display on the mobile site.
Right Sized Logo Boosts Website Performance
Because the placement of website logo is above-the fold, it is the among the first assets, browser loads from server to display on user device. An unnecessary large image may slow down website speed. Please note that browser downloads the logo in full size even if you have resized the logo after uploading to website.
Therefore, I suggest that you should create a website logo which is only slightly larger in size which is required on a most common large screen computer.
You can follow this suggestion for all images on the website. Facebook also suggests uploading right sized images perform best in the browser. According to Facebook, a cover image of page loads fastest on a computer screen, when its size is only slightly (31x3px) larger than what is needed. [RD]
It is interesting to note that, in most templates of previous version of Squarespace, the maximum width of logos could be set around 200px. [RD]
For Dozro website, I created a logo in appropriate pixel size.
Alt Text for Squarespace Site Logo
Your Squarespace website should be SEO friendly and accessible to people with disabilities. The site title of your Squarespace site serves as the alt text for the site logo. Therefore, it is best idea to change the template title with your own business name before uploading logo to your Squarespace site.
If you have already uploaded the logo, then remove it temporarily, change the site title (such as ‘Dozro’ in my case) and apply the logo again.
Search engines index the site title (alt text) of your Squarespace website and boost your SEO marketing efforts. It may also appear along any page title on Google search results page. It also displays along page title when a user hovers over the browser tab of your site opened.
More Resources
Check the following helpful resources.
How I determined the ideal logo size for Squarespace website?
Check tips and ideas for Logo Design.
Squarespace favicon tips and facts.
Get Dozro Services for designing a logo.
