Favicon

A favicon is a small icon, symbol or logo.

It mainly appears in a website tab or bookmark and is an important element as it helps users to recognize a brand faster.

General#

  • It has to be used as favicon only and can't be integrated into any content.
  • The complete definition of the favicon can be found in the SCHWARZ Corporate Design Manual PDF.
  • All sizes are available in the SCHWARZ CAKE UI Fundamentals assets folder.

Types#

  • There is a positive and negative favicon.
  • Use the positive favicon if the device is in light mode with light backgrounds.
  • Use the negative favicon if the device is in dark mode with dark backgrounds.
VersionPreview
PositiveFavicon positive
NegativeFavicon positive

Size#

  • The device resolution depends on the browser and device.
  • The favicon is therefore available in different sizes.
  • The table below demonstrates the according use cases.
SizeDevice or purpose
16x16Browser favicon (SVG, PNG)
32x32Taskbar shortcut icon
70x70Windows 10
96x96Desktop shortcut icon (and Google TV)
120x120iPhone Retina (iOS 7)
128x128Chrome Webstore icon
152x152iPad Retina (iOS 7)
167x167iPad Pro (iOS 8+)
180x180iPhone 6 Plus (iOS 8+)
196x196Android Chrome icon
228x228Opera Coast icon
270x270Windows 10
310x310Windows 10
310x150Windows 10

Change log#

5.2.0 Fundamental & 5.2.0 Web - 2021-07-22#

Changed#

  • Doc: "Favicon" | Clean up the documentation for the right structure and sentence case