ComboStrap Site Metadata - Logo
About
A logo is an icon that illustrates your website and is part of what's called branding
Usage
Metadata
Your logo is used as default page image illustration:
- for search engine such as google
Navbar Brand
You can use your logo in the brand component of the top navigation bar.
Example:
<menubar>
<brand title="ComboStrap Home" color="#075EBB" width="30">
ComboStrap
</brand>
</menubar>
- Result:
Browser
The browser uses it as favicon.
Identity page
In the 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 favicon getting started article.
Order of precedence
ComboStrap searches a compliant logo in the following places by order of importance. This list uses the png format but the same order is used for others format such as svg
- :logo.png
- :wiki:logo.png
- :favicon-32×32.png
- :favicon-16×16.png
- :apple-touch-icon.png
- android-chrome-192×192.png
Bonus
Collection
Logdust is an open source collection of logos with designs of various cool shapes and types.
Check the quality of your logo
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 |