Marty
Marty

Reputation: 2224

How to use favicon with the asset pipeline?

I'm implementing a favicon using an online generator (http://realfavicongenerator.net but other generators such as www.favicon-generator.org work the same). The generator supplies almost 30 files (images for android, apple, different sizes, etc.), which is why I placed all these files in the asset pipeline (assets/images/favicons/) instead of in the public folder (which would otherwise get so cluttered).

Included in the files are an xml file browserconfig.xml and a json file manifest.json (not sure what they are for exactly). In the header I load both files using:

<%= content_tag :meta, nil, content: image_path("favicons/browserconfig.xml"), name: 'msapplication-config' %>
<%= content_tag :link, nil, href: image_path("favicons/manifest.json"), rel: :manifest %>

Is it okay to use image_path this way? (even though they are not images, I have placed all favicon files together in one folder inside assets/images/favicons)

Further, both the xml and json file contain references to favicon images (see below) that are now in the asset pipeline. So in its current form, these references fail. How can I refer to the images in the xml and json files?

browserconfig.xml:

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

manifest.json:

{
  "name": "AppName",
  "icons": [
    {
        "src": "\/android-chrome-36x36.png",
        "sizes": "36x36",
        "type": "image\/png",
        "density": "0.75"
    },
    {
        "src": "\/android-chrome-48x48.png",
        "sizes": "48x48",
        "type": "image\/png",
        "density": "1.0"
    },
    # etc.
  ]
}

Upvotes: 6

Views: 2419

Answers (2)

Yury Lebedev
Yury Lebedev

Reputation: 4015

It is better to place the favicon in your public folder, because otherwise it will contain a fingerprint in the name, when it will be compiled

Upvotes: 3

Marty
Marty

Reputation: 2224

It proved less difficult then expected. I renamed the two files to .xml.erb and .json.erb and recoded the references using Ruby/Rails image_path. Now I think the references work.

Upvotes: 3

Related Questions