CODE

Custom Apple Touch Icon

ESTIMATE 1-MINUTE READ

Saving a webpage bookmark on your mobile device or desktop computer displays a graphic placeholder. This is usually a company logo. Here is how to change from the generic graphic to custom art for your website.

Simple Steps For Most Websites

The graphic (logo) can be 512x512 or 1024x1024 pixels. Name the file apple-touch-icon.png and place it in the home directory. This is now the default logo for Twitter as well as mobile devices when a user saves a bookmark.

Add the following code within the header of each page on your website if the logo is not in the home directory. (Replace /apple-touch-icon.png with actual location):

<link href="/apple-touch-icon.png" rel="apple-touch-icon" />

Simple Steps For Shopify Websites

Shopify does not provide access to the home directory. But it does include URL 301 redirects so the instructions are a little different. First check your them customizations to see if there is already an option to upload a social media image. If not, follow the steps below.

Go to Settings: Files and upload your logo named apple-touch-icon.png. Copy the resulting path. Then go to Navigation: URL Redirect. Create a new URL Redirect that points /apple-touch-icon.png to the link of the uploaded logo.

The theme.liquid file is common to all pages of your Shopify website. If the custom bookmark icon does not appear, add the following line of code within the header of theme.liquid:

<link href="/apple-touch-icon.png" rel="apple-touch-icon" />

Devices look in the intended pace for the the specifically named file and are redirected to the Shopify file directory for the image.

Code samples include hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. You may need to replace HTML less-than (&lt;) and greater-than (&gt;) with actual characters. Are you interested in more tips like this? Please indicate so within the comment field.

Kevin Williams is a Shopify Partner that has been program­ming data­base systems since 1990 and writing since 2010, before main­tain­ing an e-commerce site in Perl. Along with him, explore the Shopify platform and Liquid programming with marketing and writing tips.

Join Discussion