---json
{
    "page_id": "j4o3mrafz6xxwtmdibt3w"
}
---
====== ComboStrap Site Metadata - Logo ======

===== About =====
A ''logo'' is an [[docs:content:icon|icon]] that illustrates your [[docs:app:app|website]] and is part of what's called [[branding|branding]]
===== Usage =====

==== Metadata ====
Your logo is used as default [[docs:page:image|page image illustration]]:
  * for social card such as [[..:social:facebook|facebook]] and [[..:social:twitter|twitter]]
  * for search engine such as [[..:social:google|google]]


==== Navbar Brand ====

You can use your logo in the [[docs:menubar:brand|brand component]] of the [[docs:menubar:menubar|top navigation bar]].

Example:
<webcode  iframe>
<code dw>
<menubar>
    <brand title="ComboStrap Home" color="#075EBB" width="30">
    ComboStrap
    </brand>
</menubar>
</code>
  * Result:
</webcode>

==== Browser ====

The browser uses it as [[howto:getting_started:6_favicon|favicon]].

{{strap:favicon_verification.png|}}

==== Identity page ====
In the [[docs:app:identity|identity forms]] such as the login, profile or resend password page, the logo is used to reenforce branding.
===== How to create and install your logo =====
To create and install your logo, you should follow the [[howto:getting_started:6_favicon|favicon getting started article.]]

===== Order of precedence =====

''ComboStrap'' searches a compliant logo in the following places by order of importance. <inote>This list uses the **png** format but the same order is used for others format such as **svg**</inote>

  - '':logo.png''
  - '':wiki:logo.png''
  - '':favicon-32×32.png''
  - '':favicon-16×16.png''
  - '':apple-touch-icon.png''
  - ''android-chrome-192x192.png''



===== Bonus ===== 

==== Collection ====
[[https://logodust.com/|Logdust]] is an open source collection of logos with designs of various cool shapes and types.

==== Check the quality of your logo ====
[[https://logolab.app/|Logolab]] is a nice piece of software that extracts the most important function of a logo and shows yours in different context.

^ Characteristic ^ Definition ^
| balance | One side shouldn’t draw all of the attention. |
| color | It should works not only in color (black and white included) |
| color blind | color blindness proof |
| scalability | Be seen in different sizes from really big to really small |
| containers | A logo should fit into a few common shapes. |
| pixelated | The logo form is still visible at low resolutions. |
| blur | blurred logo demonstrate the first glance (quick recognition) |
| slices | Recognizable even when only seeing a small part of it |
| app icon | Render as icon app on a mobile device. |
| attention | Attention comparison with other logo |