I recently had a lot of icons sent to me by a graphics / UX designer. It was my job to add them to a JavaFX application. Each icon was shipped in three sizes (16×16, 32×32, 64×64). The naming convention for them was like this:
- icon-name.png
- icon-name@2x.png
- icon-name@3x.png
At first I thought that this was some kind of standard naming used by graphic designers for their files but in the end it turns out to be a convention that was initially introduced by Apple for their Retina displays and adapted by the JavaFX team. The idea is that JavaFX will automatically load the appropriate image file for the current screen resolution. So when the application wants to load a 16×16 icon and JavaFX determines that the screen is a Retina / HiRes display it will then load the @2x file. The result of this are crisp graphics that take full advantage of these beautiful screens.
To enable this automatic image loading one can use CSS or code. In CSS you can define a style like this (assuming image file is in the same directory as CSS file):
.my-icon {