Store favicon for mobile device bookmarks and favorites

Farris_Jewelers
Tourist
4 0 2

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.

Suture
Shopify Expert
648 0 105

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">

 

Farris_Jewelers
Tourist
4 0 2

Thank you.  Worked perfectly.

0 Likes
Erica_Nicole
New Member
1 0 1

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.

Okemi_Tomioka
New Member
4 0 0

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?

0 Likes
Suture
Shopify Expert
648 0 105

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.
 

Okemi_Tomioka
New Member
4 0 0

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?  

 

0 Likes
Suture
Shopify Expert
648 0 105

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

0 Likes
Okemi_Tomioka
New Member
4 0 0

Hi,

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

0 Likes
Suture
Shopify Expert
648 0 105

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?

0 Likes