d
Topic
Posts:
4
February 23, 2016

Store favicon for mobile device bookmarks and favorites

I am currently looking for a guide on how to have my store favicon show up as bookmarks/favorites on mobile device web browsers.  The Favicon I have added on my store shows up perfectfly on PC web browser tabs and in bookmarks.  I want to be able to do this without having to build an app.  Currently if you add my store web address to favorites on my iphone, the icon is a square with an "F" in the center (which is something that iOS does when there is no specifc favicon associated with website).  I have read a few different articles that stated there was code that needed to be placed in the website theme, but I could not find anything specific for shopify.

i
Replies
Ricky Shopify Partner www.suture.net
Posts:
682
February 23, 2016
g
2
upvotes

Here's one approach that should cover most devices. Maybe overkill but anyway.

1. Generate your icons http://realfavicongenerator.net/
2. Upload the icons to your "assets" directory (Don't upload the browserconfig.xml file). Don't change the file names.
3. Create a file called "browserconfig.xml.liquid" (see snippet below) and upload that to your assets directory. Be sure to change the "Tile Color".

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="{{ 'mstile-70x70.png' | asset_url }}"/>
      <square150x150logo src="{{ 'mstile-150x150.png' | asset_url }}"/>
      <square310x310logo src="{{ 'mstile-310x310.png' | asset_url }}"/>
      <wide310x150logo src="{{ 'mstile-310x150.png' | asset_url }}"/>
      <TileColor>#cc3300</TileColor>
    </tile>
  </msapplication>
</browserconfig>


4. In your "Snippets" folder create a file called favicons.liquid and add the snippet of code below. Be sure to change the "Tile Color" and "Theme Color".

<!-- /snippets/favicons.liquid -->
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="57x57" href="{{ 'apple-touch-icon-57x57.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ 'apple-touch-icon-60x60.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ 'apple-touch-icon-72x72.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ 'apple-touch-icon-76x76.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ 'apple-touch-icon-114x114.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ 'apple-touch-icon-120x120.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ 'apple-touch-icon-144x144.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ 'apple-touch-icon-152x152.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon-180x180.png' | asset_url }}">
<link rel="icon" type="image/png" href="{{ 'favicon-32x32.png' | asset_url }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ 'favicon-194x194.png' | asset_url }}" sizes="194x194">
<link rel="icon" type="image/png" href="{{ 'favicon-96x96.png' | asset_url }}" sizes="96x96">
<link rel="icon" type="image/png" href="{{ 'android-chrome-192x192.png' | asset_url }}" sizes="192x192">
<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}" sizes="16x16">
<link rel="manifest" href="{{ 'manifest.json' | asset_url }}">
<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}">
<meta name="apple-mobile-web-app-title" content="{{ shop.name }}">
<meta name="application-name" content="{{ shop.name }}">
<meta name="msapplication-TileColor" content="#cc3300">
<meta name="msapplication-TileImage" content="{{ 'mstile-144x144.png' | asset_url }}">
<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">
<meta name="theme-color" content="#cc3300">


5. Then in your "theme.liquid" file add the following in the head section.

 

{% include 'favicons' %}


6. You can also add the following if you don't have it already.

 

<meta name="theme-color" content="#cc3300">

 

Posts:
4
February 23, 2016

Thank you.  Worked perfectly.

Posts:
1
May 08, 2016
g
1
upvotes

Thank you so much! This works! I'm so thankful to have found this forum topic and for you two taking the time to ASK and ANSWER. Thank you. Thank you.

Posts:
4
May 25, 2016

I'm sure this is the answer I have been looking for.  But, I don't quite understnad how to do the following. 

3. Create a file called "browserconfig.xml.liquid" (see snippet below) and upload that to your assets directory. 

Could you give me more exact steps I should take?  Where do I have to create a file and upload where?

Ricky Shopify Partner www.suture.net
Posts:
682
May 25, 2016
g
1
upvotes

I recommend using a text editor like http://brackets.io/ or https://atom.io/

Create a blank text file and name it "browserconfig.xml.liquid"

Then copy the first code snippet shown above and paste that into the file that you just created.

Change the #cc3300 value to what ever color you wish to use. You can see more info here
http://htmlcolorcodes.com/

Then upload this file to the "assets" directory of your currently active theme.
 

Screen shot 2016 05 25 at 7.36.10 pm thumb
Posts:
4
May 25, 2016

Thank you so much for your detailed guidance.   It works perfectly with bookmarks and favorits on iphone6, but it doesn't show up for add to homescreen.  Is this the case?  

 

Ricky Shopify Partner www.suture.net
Posts:
682
May 25, 2016

I can't check becuase your storefront is password protected. The password template doesn't share the same header.

Posts:
4
May 25, 2016

Hi,

I've just removed password protection. I would be grateful if you can have a look into it.

Ricky Shopify Partner www.suture.net
Posts:
682
May 25, 2016

If you take a look at the rendered source code in the head of your site, you see a list of all the file links.
Currently they're all linking to a 404 error page.

The only one that's working is the 16x16 favicon

Did you upload the images to the assets directory?

Posts:
4
May 26, 2016

Hi Rikky,

Your instruction is perfect.  Thank you very much. You are a star.

I didn't realize I have to upload all the images and put only one of them.  I didn't follow exactly what Favicon generator gave me.

Thank you again for your help.

Posts:
2
June 23, 2016

Great resource, Ricky! 
I found one thing missing in your code though - the Safari Pinned Tab icon. Perhaps you can edit your post to add it in:

<link rel="mask-icon" href="{{ 'safari-pinned-tab.svg' | asset_url }}" color="#444444">

 

Ricky Shopify Partner www.suture.net
Posts:
682
June 24, 2016

Many thanks for spotting that.

I'm not able to edit the original post above, so I've published the update on my blog.
http://www.suture.net/add-favicons-shopify/
 

Kraken42 Member
Posts:
262
Last edited November 16, 2016

.

Posts:
7
11 months ago

Hi, im having trouble doing this. It seems the files have changed since the original post, could someone explain why my page says it cant locate snippet/favicon.liquid even though it is there?

 

Thanks in advance

Keep #DisturbingTheScene with our S-Range Sunglasses!
Ricky Shopify Partner www.suture.net
Posts:
682
11 months ago

Hi Joey

The files keep change on a constant basis as new devices are released and support for older devices is dropped. It's a constant never ending process.

Check my blog post for the most updated version.
http://www.suture.net/add-favicons-shopify/

Posts:
7
11 months ago

Thanks Ricky.. Im still having issues though, maybe im missing something?

Are you able to take a look?

 

Keep #DisturbingTheScene with our S-Range Sunglasses!
Ricky Shopify Partner www.suture.net
Posts:
682
11 months ago

Hi Joey

I can't see your website, I'm getting a shopify message, when trying to access shop.stunnerink.com

Screen shot 2016 12 11 at 8.58.33 am thumb
Posts:
1
Last edited 7 months ago

Is there any way you can tell me what I'm doing wrong? For some reason the icons aren't working on devices on my site (www.revivemi.com).

Kirk McGinnis Member
Posts:
3
4 months ago

This is great! I have to ask though. What is the "tilecolor"? Is that the background behind your icon or is that the color for the monochromatic version of your icon?

Daljit Singh Member
Posts:
12
14 days ago

It isn't working for me

Posts:
2
Last edited 10 days ago

It isn't working for me too ☹️

UPDATE: fixed all images paths, now works. Thx!

UPDATE 2: I do with my own hands, but I think that this tutorial is updated: https://www.suture.net/add-favicons-shopify/ (from Ricky)

Ricky Shopify Partner www.suture.net
Posts:
682
10 days ago

That's correct, the tutorial on this blog post is the most up-to-date version.
https://www.suture.net/add-favicons-shopify/
 

Daljit Singh Member
Posts:
12
Last edited 5 days ago

Ricky - where it says tile color and mask-icon color do i delete where it says tile-color? also i dont understand why a color is needed as only the .png favicon should be showing right? or does this color make a background in say white? #fffff.... i've followed all steps but it is not working the password to my page is buddha

Ricky Shopify Partner www.suture.net
Posts:
682
4 days ago

Hi Kevin, it looks like it's working to me. You might need to clear your browser cache memory and do a forced refresh to see the update.

Make sure you're following the tutorial on this page
https://www.suture.net/add-favicons-shopify/

The color options are used by macOS Safari pinned tabs, MacBook Touch Bar and Windows Metro tile.

Working thumb