[typhoon] ICO favicon with multiple sizes (16+32) not supported

[Fifis]

Good afternoon!

So far, most recommendations on the main forum have been about modifying twigs to get proper PNG favicons.

However, in small raster image design, there are explicit recommendations to edit 16x16 or 32x32 files directly to achieve the best crispiness and legibility and to avoid poor anti-aliasing / blurriness due to rescaling.

I have created a proper ICO file that has 16x16 and 32x32 variants, but the Grav CMS won’t accept it. In addition, many usability analysers explicitly recommend putting favicon.ico into the root folder.

Is there a possibility to upload a fully compatible hand-optimised ICO without getting the ‘Unsupported MIME type’ error? Or to safely excise this link rel="icon" property from the site so that the default favicon.ico be served from the site root?

I am using Grav 1.7.44, I purchased the Typhoon professional theme a couple of days ago, and its version is 2.4.5.

Thank you in advance!

Yours sincerely, Andreï.

[rhukster]

Frankly .ico is very 2000's, it's quite redundant these days as .png is fully supported and a better more portable format. Even better is an .svg which is supported in all modern formats, and is vector so can scale for any size + very small KB. With hiDPI displays (mobile, destkop, etc) become more popular it's usually just best to create a larger image (64px or even larger) and let the browser render as it needs. If your logo is very detailed, it's probably better to create a more simplified version for the favicon.

Regarding the ability to change this, it's not something that is done often, so is not in the admin. You should just add the favicon (.png/.svg/.ico/etc), to the theme's images/ folder via FTP/SFTP/etc, and then modify the base.html.twig to reference it. it's a very simple process.

[Fifis]

Thank you for the prompt reply! As ‘2000s’ as ICO files are, they work the best on FullHD desktops because Firefox is showing 16×16 ones in the tabs, and the bilinear down-scaling of a hi-res 128×128 PNG one results in a very ‘mushy’ and illegible 16×16 version. And those multi-resolution ICO files seem to work just out of the box, and are very quick and easy to create by merging the different PNG files into a single ICO without modifying a single line of code; it just seemed to me that putting favicon.ico into the root folder would be wrong from the technical point of view. This is why I would like to use the pre-generated optimal versions for each size and serve what’s needed. Since PNG files can only hold one layer / page, is it possible to declare multiple favicon sizes (e.g. favicon16, favicon32 etc.) in the twig? E.g. would it be valid (or optimal) to write something like this?

<link rel="icon" href="/path/to/favicon-16.png" sizes="16x16">
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
<link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">

(Sorry, accidentally clicked the wrong button, didn’t mean to close the issue yet.)

[rhukster]

Frankly if you really want to have multiple ico images like that, simply edit the partials/base.html.twig and add them yourself. That way you have complete control.

[Fifis]

Thank you, I am going to do that in a child theme with inheritance.