(Fav) Icons
toughzone has the ability to include multiple vendor-specific and general icons for differentuse-cases outlined below.
Regular Favicon
Most regular favicons types are supported. Browser support varies across types and browser versions.
| File Type | Sizes | File Name | Browser support |
|---|---|---|---|
.ico | 16 x 16 px | favicon.ico | all |
.png | 16 x 16 px | favicon-16x16.png | very good |
| 32 x 32 px | favicon-32x32.png | ||
.svg | 64 x 64 px | favicon.svg | mediocre |
Manufacturer specific icons
Google / Android
Used by Android when installing the platform as web app on the home screen. As it is an experimental technology, we only implement icons by default. Read the MDN Web Docs for more information.
| Size | File Name |
|---|---|
| 36 x 36 px | android-icon-36x36.png |
| 48 x 48 px | android-icon-48x48.png |
| 72 x 72 px | android-icon-72x72.png |
| 96 x 96 px | android-icon-96x96.png |
| 144 x 144 px | android-icon-144x144.png |
| 192 x 192 px | android-icon-192x192.png |
Apple / iOS
Touch Icon
Used by iOS devices when installing the platform as web app on the home screen. We only implement the touch icon by default, contact us for more options.
Read the official Apple documentation for more details.
Required size is 180 x 180 px and the file name is apple-touch-icon.png.
Mask Icon
Mask icons are used by Apple's Safari browser for pinned tabs. Read the official Apple documentation for more details.
The icon must
- be a
.svgfile with itsviewBoxset to0 0 16 16 - use 100% black for all vectors
- be called
mask-icon.svg
Additionally, we need the color which should be used to render the icon.