Transparent Logo vs Logo on a Background Shape: which option is superior?
Most website logos consist of a text with an icon and final logo is completely transparent. However, there are endless possibilities for creating a nice logo.
In my opinion, whether you create text-only logo, icon-only logo or mix of both – your final logo should have a permanent background graphic element, similar to the dark element under Dozro logo. It means the text and icon of logo should be placed on a transparent PNG shape. For background graphic, you can try various options such as ribbon banner, blank rectangle graphic buttons, abstract banner, PNG label element, or any blank web button. → Watch Video Tutorial below.
Rationale Behind Designing Logo on a Background Shape
After analyzing hundreds of logos, I have concluded that a a background colored element should be permanent part of the logo. Final logo should be transparent but transparency should be applied on the element. However, the color of background element should have a clear contrast with that of logo text. The background element should be simple and elegant.
Suppose you have applied some dark colors in your logo because you know that the dark colored logo will appear nice on the white background of your website. But what will happen when the end user may select a dark mode to visit your website?
Your dark colored logo (with transparent background) will become invisible.
There are many other situations. For example, the color of Toyota logo is red. You cannot apply this Toyota logo on a merch (shirt, mug etc) item which also has a red color.
This was the reason I applied a dark color graphic element behind the text of Dozro logo. I can successfully use Dozro logo on any background of any color. Dozro logo will maintain its contrast and visibility whether the end user opens my website either in light mode or dark mode. The shape of Dozro logo has transparent background.
Note:
In this article, I am talking about the previous Dozro logo as shown in this image. The current Dozro logo (visible on site) does not use a shape behind the logo text because it is created in a unique color and style which does require any shape background. The current Dozro logo is transparent yet it provides optimum clarity when used on background of any color.
Update: We have updated the Dozro logo as seen on this website. You can also get your brand logo designed in same style as the current Dozro logo. Check Services page for more detail.
Examples of Logos with Background Element
This design idea is not common but you can find examples of following brands using graphic element as background for the logo mark.
Twitch uses a shadow
Examples of Logos without Background Element
Logos without background graphic element, may face contrast and visibility issues on different background colors. For our own website, we have full control to apply a contrasting background color; for example Wondershare has chosen black background color specifically for header. However, in a connected world we also display logos on other platforms where we have no control for the background color. For example, we cannot force Twitter and Facebook to use background color of our choice.
Dozro Services: Check Price for Creation of Favicon, Brand Minimalist Logo, and Small Business Website.
The color of transparent Wondershare logo is white. Therefore, it forced their design team to create a black background color for header on website for contrast and visibility of logo. The transparent white logo also compelled Wondershare to have a black background for profile image on their Twitter account – if they use transparent logo icon on Twitter, it will not be visible. However, Wondershare has probably learned from the mistake and created a permanent graphic background for the logos of its all products such as Filmora and Edraw Max.
Sprite has a transparent logo in white color. So, for twitter profile image, Sprite has to create a black background for white logo – of course for creating contrast and visibility.
Almost similar is the case with Subway which created a colored background in twitter profile image to make visible the white arrow in the logo icon.
Of course, the current logo is another example.
On the other hand Quilted Northern can easily use transparent logo for Twitter because it has colored background element. What if You Do Not Prefer Background Element?
Based on my research, I can suggest following recommendations, in case you want logotype without fix colored background.
Design Logo in Multiple Colors
I will suggest that if you don’t want to use some shape element under logotype, then create a logo in multiple colors. Multi-colored logo will not fail on different color background. For example, letters of Google logo are multi-colored. Similarly, the icon in the Microsoft logo has multiple colors; in case text of this logo ‘Microsoft’ becomes invisible on some background, at least the multi-colored icon of Microsoft will remain visible.
Change Logo Colors According to Background
If you do not want to create a fixed background graphic under logo, then your logo should be preferably text based and change the colors of your logo to create a contrast according to the background color in varying situations. However, keep the same font and design of logo in multiple colors to maintain brand identity. Take inspiration from following two examples.
Design Logo in Intermediate Color
Choose an intermediate color for your logo which fits well on most background colors.
For example, the color used for the text of Dozro logo, can have a visible contrast on both white and dark background.
McDonald’s ‘M’ logo icon has a medium color which fits well on both white and dark background.
There are many more examples of successfully using an intermediate color for logo. [RD]
More Resources
You may also be interested to learn about the Ideal Size for Website Logo in another Dozro article.
Read Dozro article about ideal design and size for Favicon of your website.
Examples of Unique Logo Design using a Single Font that is Readable.
Website Logo: Comparison of Horizontal logo with Square Logo Design | Pros and Cons.
Ideal Position of Brand Icon in Logo – Left, Right or above the Logo Text?
Check our service Charges for a Unique Logo Design.
Website Logo Best Image Format – PNG, JPG, SVG?
Text only Logo vs Graphic Icon Logo – which is better?
Logo Design Tips, Ideas and Examples.
Optimal Favicon Size for display in Google Search.
Check our guide for optimal Facebook cover size.
Learn more Website Creation and Web Design Tips.
Discover Dozro Services or check out the Home page of our website for additional learning resources.
