These instructions make use of the insert content method detailed in our support article Insert Content - Metadata and Scripts. Please read this article before proceeding.

To add favicons to our site we first need to create our favicon code as follows:

1. Use the tool http://realfavicongenerator.net to generate our images (we download these to our hard drive) and code. Although you can use all of the code and images generated, it is overkill. We prefer to extract out the lines that meet the minimum requirements detailed at https://github.com/audreyr/favicon-cheat-sheet.
2. Upload all of the images to our DropBox and get the public URLs — refer to How do I upload images or files for my Big Cartel page content?
3. Replace the URLs in our favicon code with our DropBox URLs.

Below is an example of what your code might look like after the above steps:

<link rel="apple-touch-icon-precomposed" href="https://dl.dropboxusercontent.com/s/iv9d5x4svlp69c1/apple-touch-icon-152x152.png">
<link rel="shortcut icon" href="https://dl.dropboxusercontent.com/s/j2ohtwd8lugvxb8/favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://dl.dropboxusercontent.com/s/qt7zy91i0920gdn/mstile-144x144.png">

Now that we have our favicon code we need to insert it into our site as follows:

1. Create a page in our Customize design > Pages admin area with the exact title:

x-ic-head-code

2. Important: Switch to HTML edit mode per How do I switch to HTML edit mode?

3. Paste the favicon code (see example above) into the content of the x-ic-head-code page.

4. Finally we click the Done button and then click the Save link to apply our changes.

Note that if we had already created an x-ic-head-code for another purpose, we would go to this existing page, create newlines at the end of the page content and then paste in our code. We can keep adding content, as needed, to our x-ic-head-code page in this way.