1236237 - Document icon assets usage for web developers

Status: RESOLVED DUPLICATE of bug 945041

(Developer Documentation Graveyard :: General, defect, P5)

Description

[Daniel]

:: Developer Documentation Request

      Request Type: New Documentation
     Gecko Version: unspecified
 Technical Contact: 

:: Details

Please create web developer documentation for all the various icon assets used by Firefox products.

Below follows the notes I've made for my own purposes when trying to get my websites looking great in all Firefox versions.


Firefox for Android, iOS, and PC uses favicons but different sizes in different places on different screens. Multi-sized .ico file seem to work everywhere. What about <link rel=icon sizes>? Firefox for PC (except Mac) uses the first declared <link rel=icon> regardless of the sizes attribute. Using multi-sized ico files is the only way to support HIDPI on Windows.

Firefox for Android uses msapplication assets from meta elements in the document, but not the recommended /browserconfig.xml file to generate tiles for Top Sites. Will fallback to screenshots. msapplication-TileColor is used to set the tile background color.

Firefox for iOS uses apple-touch-icons or the largest favicon for Top Sites. Different sizes required for iPhone and iPad, but the sizes attribute is ignored. If the outer edge of the icon has one solid color all the way around, this is used as the tile background color. If not, the tile gets a white background with a splash of an auto detected dominant color behind the icon.

Firefox for PC uses screenshots for Top Sites. Except for the default partners that get nice icons.  :-(

Lastly, a plea for all Firefox products to start supporting <link rel=icon sizes=any href=icon.svg>. It would be so much easier for everyone. The SVG can contain its own background color information and would work in all current and future designs as icon sizes wouldn't be locked down by legacy assumptions.

Comment 1

[Daniel]

Actually, regarding favicons it seems Firefox for Mac, Windows, and Linux all behave differently and all handle HIDPI differently. Oh, what joy. Mac picks the best size depending on resolution, Linux picks the last defined icon, Windows picks the first defined or the best size if on HIDPI. It’s a bit hard to test all these variations and hardware configurations. Would be really nice if Firefox behaved the same on all platforms, but in any case documentation on how it’s supposed to behave would be highly appreciated.