0

A new favicon for FileRun with support for all devices, platforms and browsers

Rudhra 4 weeks ago in Feature requests updated 4 weeks ago 0

Suggestion: 

Update the html files: 

filerun/html/system/modules/fileman/sections/default/html/pages/index.html

filerun/html/system/modules/fileman/sections/default/html/pages/login.html

Replace:

    <link rel="icon" type="image/x-icon" href="favicon.ico">


For:

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

This way, there is a favicon for every possibile platform! (Windows 10 start menu tile, Safari, iOS Touch icon, MacOS mask icon, iPadOS and large icons for Android homescreens and of course regular desktop browsers).


I went ahead and created a new favicon (and used the website below to generate favicons for all mentioned platforms) using FileRun twitter profile pic (it is the highest quality I could find). I kept the logo intact as much as possible but it did require some editing to make it look shap and neat. For example I decided to not make the inside white area transparent, only outside, for better visibility on dark mode (and non-dark mode).

Here is a zipfile with all required assets that should be extracted in the htlml folder. Make sure to update the index.html and login.html file as stated above and enable favicon as explained in the documentation

favicon.zip

After doing that, you can check if it works correctly for all platforms, devices etc via this website, everything should be green: 

https://realfavicongenerator.net/

The end result PNG file (you can't see it, but the surrounding area of the square is transparent):


I hope others who do not use FileRun as whitelabel solution can enjoy this logo.

I also hope the suggestion to update the html files will make it in an update :)