Getting your favicon.ico to work with OctoberCMS
June 7, 2019

Getting your favicon.ico to work with OctoberCMS

First, generate your icons. One great site to help you is:

https://realfavicongenerator.net

You'll get most of the instructions there.

However, the question arises - where to put the required files?

One approach is to put it in  your assets folder and then adjust the meta link:

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

This is OK except many devices expect favicon.ico to be accessible from the website root.

So it's best to upload it straight to your public_html directory (or wherever your OctoberCMS root is. But then remember to adjust your .htaccess file! Specifically, allow access to the necessary files in the "White listed folders" part:

##
    ## White listed folders
    ##
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_FILENAME} !/.well-known/*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/uploads/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/app/media/.*
    RewriteCond %{REQUEST_FILENAME} !/storage/temp/public/.*
    RewriteCond %{REQUEST_FILENAME} !/themes/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/plugins/.*/(assets|resources)/.*
    RewriteCond %{REQUEST_FILENAME} !/modules/.*/(assets|resources)/.*
	RewriteCond %{REQUEST_FILENAME} !/favicon.ico
	RewriteCond %{REQUEST_FILENAME} !/android-chrome-192x192.png
	RewriteCond %{REQUEST_FILENAME} !/android-chrome-256x256.png
	RewriteCond %{REQUEST_FILENAME} !/apple-touch-icon.png
	RewriteCond %{REQUEST_FILENAME} !/browserconfig.xml
	RewriteCond %{REQUEST_FILENAME} !/favicon-16x16.png
	RewriteCond %{REQUEST_FILENAME} !/favicon-32x32.png
	RewriteCond %{REQUEST_FILENAME} !/mstile-150x150.png
	RewriteCond %{REQUEST_FILENAME} !/safari-pinned-tab.svg
	RewriteCond %{REQUEST_FILENAME} !/site.webmanifest
    RewriteRule !^index.php index.php [L,NC]
    ```
Getting your favicon.ico to work with OctoberCMS
Share this