Logo and favicon
Although optional, a logo can greatly help you make your site unique and create a brand image (see Branding). Your logo is the first opportunity to communicate, at a glance, your website’s purpose.
If your website is a single page utility or represents your brand, then this section might not interest you.
Design a beautiful logo that clearly represents your app. Combine an engaging design with an artistic interpretation of your app’s purpose that people can instantly understand.
Embrace simplicity. Find a concept or element that captures the essence of your website and express it in a simple, unique way, adding details only when doing so enhances meaning. Too many details can be hard to discern and can make the icon appear muddy, especially at smaller sizes.
Establish a single focus point. A single, centered point of interest captures the user’s attention and helps them recognize your site at a glance. Presenting multiple focus points can obscure the icon’s message.
If text is essential for communicating your site’s purpose, consider creating a graphic abstraction of it. Actual text in an icon can be difficult to read and doesn’t support accessibility or localization. To give the impression of text without implying that people should zoom in to read it, you can create a graphic texture that suggests it. This graphical icon could be placed next to the text when space is sufficient.
Maintain visual consistency in all icon sizes. As icon size decreases, fine details become muddy and hard to distinguish. At the smallest sizes, it’s important to remove unnecessary features and exaggerate primary features to help the content remain clear. As you simplify icons that are visually smaller, don’t let them appear drastically different from their larger counterparts. Strive to make subtle variations that ensure the icon remains visually consistent when displayed in different environments. For example, if people drag your icon between displays with different resolutions, the icon’s appearance shouldn’t suddenly change.
Use logo variations when needed. Depending on your needs, it may prove useful to have a full version of your logo, wordmark, lettermark, a simplified logo version, a favicon, an avatar. All these variations need to reflect each other and stay within your logo’s general style.