tough.zone Documentationtough.zone Documentation
General
Technical
Branding
GitHub
General
Technical
Branding
GitHub
  • Introduction
  • Layout / Mailing

    • Border radius
    • Custom Email Templates
    • Custom Email Address
  • Colors / Typography

    • UI colors
    • Typography
  • Images / Icons

    • Cover page
    • Client logo
    • (Fav) Icons
    • Stage Tiles
    • Reactions

(Fav) Icons

toughzone has the ability to include multiple vendor-specific and general icons for different

use-cases outlined below.

Regular Favicon

Most regular favicons types are supported. Browser support varies across types and browser versions.

File TypeSizesFile NameBrowser support
.ico16 x 16 pxfavicon.icoall
.png16 x 16 pxfavicon-16x16.pngvery good
32 x 32 pxfavicon-32x32.png
.svg64 x 64 pxfavicon.svgmediocre

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.

SizeFile Name
36 x 36 pxandroid-icon-36x36.png
48 x 48 pxandroid-icon-48x48.png
72 x 72 pxandroid-icon-72x72.png
96 x 96 pxandroid-icon-96x96.png
144 x 144 pxandroid-icon-144x144.png
192 x 192 pxandroid-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 .svg file with its viewBox set to 0 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.

Edit this page on GitHub
Last Updated:
Prev
Client logo
Next
Stage Tiles