How to set a favicon in ApostropheCMS

I have tried to set a favicon image from apostrophe-assets in my ApostropheCMS site but I haven't been able to do that. I have found this solution:

<link rel="shortcut icon" type="image/png" href="{{ apos.attachments.url(image, { size: 'one-sixth' }) }}"

But, I don't know hot to get the image object. Thanks in advance for your answers.

Solution

In order to set and get access to the image object you reference in your code above, you will have to add the favicon image to one of the schemas on an object in your project. If you want the favicon to be the same across your entire site, the Global object might be a good place to keep it - there is only ever one global object created on a single website, so it should work well for this purpose.

In order to add the image to the global schema, you will want to create a file at lib/modules/apostrophe-global/index.js, if you haven't already. Inside of that file, you will want to add the following code:

module.exports = {
  addFields: [
    {
      type: 'attachment',
      name: 'favicon',
      label: 'Site Favicon'
    }
  ]
};

This will add a new field onto the Global object called Site Favicon. You can choose an image to use as the favicon by logging into your site and clicking the Global button on the Apostrophe toolbar, then selecting a file for the Site Favicon property. In order to get the correct object and add it to the link tag you specified above, you would use this:

<link rel="shortcut icon" type="image/png" href="{{ apos.attachments.url(data.global.favicon, { size: 'one-sixth' }) }}"

This will find the URL of the attachment specified in the Global object. Once you choose an image for the Global object, the URL for the file should be automatically inserted into your link tag.

There is a lot more information about the Apostrophe global object and how to access fields from templates at this URL: https://apostrophecms.org/docs/tutorials/getting-started/settings.html