Adding a Favicon Via the Backend in October CMS

Question

I want to create an file upload option for a favicon using the Theme Customization options: https://octobercms.com/docs/themes/development#customization

However, if I understand correctly, favcicons (and Apple Touch Icons) need to a) have a particular name and b) be located on the root directly (i.e., www.website.com/favicon.ico).

Is it possible to use the theme customization fileupload field and have the files uploaded to the root directory and given the names required to function as favicons and apple touch icons?

If so, any idea how?

Thanks.

Answer 1

For both favicon and Apple Touch icon you can declare a href attribute

<link rel="icon" type="image/png" href="http://example.com/myicon.png">

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

We may, alternatively, install this this free plugin: SEO Extension

Answer 2

<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">

Place this code in your layout file and give the full path of the favicon.

Answer 3

You can probably do it by creating a plugin that defines a new form widget that can be used for the image upload and then for generating the required files for the favicon.