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.
]
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With