When I began setting up this site a little over a year ago, I knew I wanted to use Squarespace—I wanted the feel and functionality of an advanced CMS with the ease-of-use of a drag-and-drop, WYSIWYG CMS. But the devil is in the details and that’s where Squarespace’s support community shines.

E.g.: I really wanted the ability to add retina-quality icons to my site. Is it a vital detail? I guess not, but to me, every detail is vital. Luckily, I found Will Kujawa’s instructions on how to achieve this.

Fast-forward to a couple of months ago—I made some design changes to site and wanted the changes to be reflected in my favicon and iOS home screen icons. Only problem? I couldn’t find Will’s instructions—his site was no longer being updated.

If you’ve read this far, you probably can figure the rest out. I messaged him on Twitter, he was kind enough to send me the instructions, and with his permission, I’m reposting them here so that others can find them once again. Enjoy!

When setting up this website I wanted to have iOS touch icons for adding bookmarks to the spring board. Squarespace's updated CMS doesn't exactly make this easy and there aren't many up-to-date resources on how to go about adding them—so I figured I should make one.
Before we get started you will need a PNG file of the logo image in three sizes: 72x72 pixels, 114x114 pixels and 144x144 pixels. You can add a fourth size (57x57px) if you want to include non-retina phones, but I chose not to bother as most everyone is using at least an iPhone 4 these days.
The image files *must* be named as so:
* 114x114px image: touch-icon-iphone-retina-precomposed.png
* 144x144px image: touch-icon-ipad-retina-precomposed.png
* 72x72px image: touch-icon-ipad-precomposed.png
Tip: if you don't want the ugly drop shadow Apple adds to bookmark icons, attach '-precomposed' to the end of each image file's name like I did above, however it is optional and won't matter if it's removed.
Once the graphics are sized and named, the next step is to upload the image files to your Squarespace site. Because Squarespace removed user facing access to the file storage system in version 6 we have to add each icon individually as a 'non-linked' page.
To do this—on the main content management panel—click to add a new page in the 'Not Linked' section.
Squarespace gives you several options for the type of page you can create; for this purpose we want to select 'Link'.
In the subsequent pop-up, select anywhere in the 'Click to add URL' field and the drop-down menu pictured will appear. Select the 'Files' option to add a new image file.
From here we can either drag and drop one of our three image files onto the square, or click the 'plus' sign to use the finder to select the right file.
Repeat those last steps to create a new 'Link' page for each additional icon image.
Once all the icons are uploaded as individual pages, head to the 'Code Injection' section of the Settings Menu and add the following code to the Header field and click, 'Save Settings':
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/s/touch-icon-ipad-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/s/touch-icon-iphone-retina-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/s/touch-icon-ipad-retina-precomposed.png"/>
Make sure the file path of each image page matches exactly with what is being linked to the header code after the 'href='. If they do not match, edit the header code to make it link to the correct file path. (In my case I had to add '/s/' to each link in the header code.)
Finally, I went back and grouped the three link pages together into a folder named 'iOS Icons' to organize and hide them out of sight.
Now, every time a reader taps the little action arrow in mobile Safari while viewing your site, instead of an ugly screen shot they will see a nice custom icon that can easily be added to their home screen.

And I have one additional tip of my own to add—Squarespace 6 allows for you to easily set a favicon for your website in the settings menu. Because the majority of users who see your site on a computer monitor will not have a retina-quality screen, what I did was set a cleaner, sans-serif version of my favicon (that matches the body text) as the site favicon, but make the retina-quality icon match the cursive logo font that I use, since it’ll only show up on higher quality screens where it is legible.

Thanks again to Will for his work and his generosity.

Joe Stracci