Favicon file type

eeeee

I had trouble changing the favicon (icon showing the browser tab), was always showing the BB default one.
Its worked now but didnt when I tried to upload a 64x64 ico file.
Are only certain dimensions accepted?

Waqas Khan

Yes, favicons typically need to follow certain formats and dimensions to display correctly across all browsers. While you mentioned trying to upload a 64x64 .ico file, most browsers expect favicons to be 16x16 pixels, especially for legacy support.

Here are some key guidelines for favicon dimensions and formats:

Standard Dimensions:
16x16 pixels – Standard for browser tabs.
32x32 pixels – Sometimes used by newer browsers or when a higher resolution is needed.
48x48 pixels – Common for shortcut icons.
64x64 pixels – Not commonly used, but some platforms may accept it for higher resolutions.
Formats:
.ico – The most widely supported format across browsers.
.png – Also supported by modern browsers, especially for higher resolutions and transparency.
Other Considerations:
Some browsers may require the favicon to be named "favicon.ico" and placed in the root directory of your website.

eeeee

Interesting, thanks. The nodebb Admin panel doesnt currently allow upload of .png for favicon

phenomlab

@eeeee that's because the expected browser format is ico

julian

@eeeee what was the error you saw? Browsers use the favicon as fallback, but will use the brand icon (touch icon) if available.

eeeee

Ah, I was unsure about the meaning of touch icon. I thought it might have been a mobile option.
I did load a 512x512 png there, but it defaults to the favicon! ?

Also, what does the 'Maskable' icon upload do?

julian

@eeeee my mistake, only brand:favicon is used as the favicon.

As you assumed, the touch icon is used for mobile devices. We expose it in the page meta tags as an optional icon for mobile devices to use in bookmarks and when added to the home page.

The "maskable" icon is meant to be an image that is preferable to be edited computationally. An One example of a maskable icon used would be the icons in your phone's notification bar — they're shrunken down and flattened to black-and-white. Some sites would prefer a different icon (maybe one that is less busy, or fewer colours, etc).

For example, on another site I admin, OpenBeta, the icon is white-on-orange. When automatically masked, the icon ends up white on white, which is undesirable, so this site uploaded a black-on-white "maskable icon" that shows up correctly when masked.