web-tip.top
WTT

404 error when opening favicon.ico in OctoberCMS

20.06.2024

When placing favicon.ico, site.webmanifest, robots.txt and other files in the root of the site in the browser console you can see that they give a 404 error. This happens because OctoberCMS blocks access to all files in the root of the site.

To fix this, you need to edit the .htaccess file (it is also in the root). In .htaccess, you need to find the block called White listed folders and add the following code right before the line RewriteRule !^index.php index.php [L,NC]:

RewriteCond %{REQUEST_FILENAME} !android-chrome-192x192.png
RewriteCond %{REQUEST_FILENAME} !android-chrome-512x512.png
RewriteCond %{REQUEST_FILENAME} !apple-touch-icon.png
RewriteCond %{REQUEST_FILENAME} !browserconfig.xml
RewriteCond %{REQUEST_FILENAME} !favicon.ico
RewriteCond %{REQUEST_FILENAME} !favicon-16x16.png
RewriteCond %{REQUEST_FILENAME} !favicon-32x32.png
RewriteCond %{REQUEST_FILENAME} !mstile-70x70.png
RewriteCond %{REQUEST_FILENAME} !mstile-144x144.png
RewriteCond %{REQUEST_FILENAME} !mstile-150x150.png
RewriteCond %{REQUEST_FILENAME} !mstile-310x150.png
RewriteCond %{REQUEST_FILENAME} !mstile-310x310.png
RewriteCond %{REQUEST_FILENAME} !safari-pinned-tab.svg
RewriteCond %{REQUEST_FILENAME} !site.webmanifest
RewriteCond %{REQUEST_FILENAME} !robots.txt

To create a favicon, I recommend using the service realfavicongenerator.net, which generates different favicon sizes for various devices.