Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.
  ]
}
like image 514
Marty Avatar asked Jul 27 '15 17:07

Marty


1 Answers

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

like image 163
Yury Lebedev Avatar answered Oct 11 '22 12:10

Yury Lebedev