Here is how to display custom art for your website when saving a web page bookmark on your mobile device or desktop computer.
Publish Insights 10 April 2021
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.
