# 推荐Logo分辨率提示

**URL:** https://meta.discourse.org/t/logo-recommended-resolution-tips/105053
**Category:** Feature
**Created:** [2018年十二月26日 04:21 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053 "2018-12-26T04:21:03Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![dylanh724](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dylanh724/32/119642_2.png) [@dylanh724](https://meta.discourse.org/u/dylanh724)
#### Post date: [2018年十二月26日 04:21 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/1 "2018-12-26T04:21:03Z")

</div>

I have no idea what any of the logo dimensions or aspect ratios are. 1 of them says “square shaped”, **but doesn’t mention the recommended resolution minimum**. The rest both doesn’t mention the aspect ratio and further doesn’t mention the recommended resolution, especially since the previews are all wide boxes that don’t match the expected dimension. This creates unnecessary confusion.

- For aspect ratio, you could make the box the proper `x:y` dimensions so you don’t have to add more text.
- For recommended minimum sizes, simply list it: `128x128 (256+ recommended)` or something.
- Some of the text is sorta bloaty and unnecessarily tedious (with broken examples). For example, the mobile one:

```plaintext
Custom logo url used on mobile version of your site. If left blank, `logo_url` will be used. eg: https://example.com/uploads/default/logo.png

```

If you actually go to `https://forum.mysite.com/uploads/default/logo.png` on your own site, it’s 404 (yes, swapping out `mysite.com` 😛 ).

Even `Custom url used on mobile version of your site` is super lengthy/redundant where one couldve said the exact aspect ratio/dimensions in 1/2 that length. This is already obvious since the header was called **“Mobile Logo”** ~

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年十二月26日 05:33 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/2 "2018-12-26T05:33:51Z")

</div>

Possibly @johani can advise here and update our copy in Discourse to offer more detail on what is recommended.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2018年十二月28日 09:04 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/5 "2018-12-28T09:04:03Z")

</div>

The way the logo size is set in CSS relates to the font-size used. As the base font-size is increased, so will the size of the logo, this ensures that the UI scales with font-sizes.

[https://global.discourse-cdn.com/meta/original/3X/8/9/89fd7332c304ba4fd37ace11dcdb1a8598279dcd.mp4](https://global.discourse-cdn.com/meta/original/3X/8/9/89fd7332c304ba4fd37ace11dcdb1a8598279dcd.mp4)

We have a general recommendation that the large and mobile logos should be a wide rectangular shape. This is based on the shape of the header and we recommend that the small logo be a square shape because of the way we place it in the interface.

Here’s something more specific

**Large and mobile logos**  
wide rectangular shape with a height of 120px and an aspect ratio greater than 3:1

**Small logo**  
Square shape with a resolution of 120x120

* * *

A couple of things I would advise against doing:

1. don’t use logos with a height greater than 120px because it is probably excessive since 120px already factors 17px font-size on HiDPI screens.

2. don’t use images with height greater than width.

I have a small PR to update the copy and will get that merged in a bit

[https://github.com/discourse/discourse/pull/6819](https://github.com/discourse/discourse/pull/6819)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年十二月28日 09:37 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/6 "2018-12-28T09:37:40Z")

</div>

I suggest merging it, I see no downside to improved copy here.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年十二月31日 00:08 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/8 "2018-12-31T00:08:25Z")

</div>

> [@Johani](#):
>
> wide rectangular shape with an aspect ratio greater than 3:1 and a minimum height of 120px

Can’t we simply make the recommendation of 240px height? I worry that … larger than 120px can be interpreted as … however large you want it to be… that is not that good.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2019年一月2日 06:14 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/9 "2019-01-02T06:14:13Z")

</div>

That makes a lot more sense. I updated the copy

[https://github.com/discourse/discourse/commit/2914431729e05f4882f9e28036111be7ba8017fb](https://github.com/discourse/discourse/commit/2914431729e05f4882f9e28036111be7ba8017fb)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019年一月8日 02:09 UTC](https://meta.discourse.org/t/logo-recommended-resolution-tips/105053/10 "2019-01-08T02:09:39Z")

</div>

This topic was automatically closed after 5 days. New replies are no longer allowed.
