Back to Top

How do I add a favicon to my Big Cartel shop?

Filed in Header, Footer & Menus

A favicon is the icon that appears in the browser address bar when viewing your site.

Google Favicon

1. Create your favicon using a generator, such as Dynamic Drive’s Favicon Generator.

2. Download your favicon (to your computer hard drive) once you are happy with its appearance.

3. Upload your favicon to a public location such as your own web site, or use Dropbox as detailed in the support article How do I upload images or files for my Big Cartel page content? (note that TinyPic will not accept ico format uploads).

4. Once you have a public URL for your favicon, confirm it is available by entering the URL in your web browser. e.g. http://www.google.com/favicon.ico

5. Navigate to the Customize design > Advanced (advanced) section of your shop admin and click the page title Layout to locate your Primary Custom Options (refer to How do I use the Custom Options for my Big Cartel theme?).

6. In the {{ META & HEAD OPTIONS }} section of the custom options, locate:

{% assign favicon_url = '' %}

and enter the public URL for your favicon, for example:

{% assign favicon_url = 'http://www.google.com/favicon.ico' %}

Click the Save link when you have finished editing your Layout page options.

Apple Device and Facebook Sharing Icon

The Apple device icon is used when your web site is saved to the home screen of iPhones, iPads, etc. It is also used as the default image in Facebook share posts (if a product or content image is not available).

To add an Apple device and Facebook sharing icon create a png format image with the exact dimensions of 129 pixels wide by 129 pixels high. Upload the image as described in steps 3 and 4 above.

In the {{ META & HEAD OPTIONS }} section of your Primary Custom Options, locate:

{% assign apple_device_icon_url = '' %}

and enter the public URL for your favicon, for example:

{% assign apple_device_icon_url = 'http://www.apple.com/apple-touch-icon.png' %}

Click the Save link when you have finished editing your Layout page options.

Related articles...