-1

Problem with logo design: doesn't scale down well

I need some advice/opinions on the attached logo and what my designer should have done to make it scaleable. It looks fine at high resolution and zoomed in over 400% in AI, but at 100% and less the speech bubble is pixelated and loses definition.Here on the test site for example it looks like a dark pixelated mass with no colour detail as it has here.As we need it for the header, it's obviously a problem which he doesn't seem to see (or pretends not to) as he says it scales fine.

enter image description here

I've attached the favicon he did too which looks awful next to the twitter logo.

My questions are: is the speech bubble colour and definition shown in the larger version something that could likely be achieved at the size we need it for the header, approx. 200px?

Any ideas or opinions appreciated. Thanks in advance RMOS PVT LTD

closed as unclear what you're asking by DA01, Hanna, Zach Saucier, Vincent Dec 4 '15 at 7:05

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    The favicon must be a .ico file and it's not used to display your logo anywhere on the website, it's only used for that little icon that shows next to your site name in the browser's tab. And it's really small, therefore, enlarging it will certainly make it look like that. – Alin Dec 2 '15 at 11:15
  • 1
    What speech bubble? Here on what test site? What favicon, attached where? I’m having a very hard time trying to figure out what actual files you have, how you’re trying to use them, and what the exact problem is. It looks like you have an Illustrator file, which should (hopefully!) have the logo in a vector format. From that, you can export basically all the sizes and variations of the logo that you want; but you’re going to have to provide some more, and clearer, detail if we are to be able to help you. – Janus Bahs Jacquet Dec 2 '15 at 11:59
  • 2
    Is it possible for you to update your question and add a screenshot of your favicon on the website? As other said, you can't compare a favicon to the real logo. A good designer will prepare a different file anyway for the favicon; It's not meant to look good at big size or be compared to your real header logo, and the way to design them is like painting square by square, and because of this you can't expect to have much details. That logo you posted is obviously not well optimized and shouldn't look so blurry. Find a new designer if he can't see the logo is poorly saved! – go-junta Dec 2 '15 at 13:27
  • The sample image is a low-pixel-count image that has been scaled up. I am guessing someone took a png/jpg file and modified it. Don't do that. Open up the AI file and export it to png (or whatever is required) using the precise pixel dimensions you need. If you only have an option to enter a "DPI" value, then set your artboard to desiredPixels divided by 72 (e.g. 200px/72dpi=2.778in) and when you export, choose "artboard" and then "72dpi". I would probably make a new document to the calculated size and then "place" the original AI file for this purpose. Alternatively, do this Photoshop – Yorik Dec 2 '15 at 22:38
2

There are two great and abiding principles to keep in mind at all times here:

  • "Scalable" isn't, really; and

  • There is no such thing as "a logo".

Those are, I hope, obviously oversimplified statements, but they are nonetheless true. Design clients are only rarely aware of them, and often need some convincing of their truth since they're quite likely to see them as an excuse to charge more money. Designers may be separated from people who have a copy (legit or not) of the Adobe suite, access to YouTube tutorials, and "an eye for that sort of thing" by their awareness of these truths. (Regrettably, it may also signal someone who's been through the whole learning gamut as a print designer, but whose transition to the web/screen has missed a few vital points. Arguably, that should only include old fogeys like me, but the evidence suggests that's not quite the case yet.)

We may prattle on about vector graphics and how we use them because they're "scalable", but that makes them sound like a miracle cure. Unfortunately, a lot of people believe in miracle cures, including some of the quacks selling them. The only thing that really scales that way is a plain monochromatic square, and even that stops working if you make it small enough that fractions of pixels become significant. What we really mean is that vectors are scalable upwards, but with some constraints. (Scaling down rarely ends well unless the design is huge compared to the coordinate system containing it.) The resolution of the output device/medium plays heavily into it; it doesn't matter at all how valid the mathematical description of the graphic is if rendering it requires seventeen thousandths of a pixel to be a certain colour. To a somewhat lesser extent, our vision itself gets involved — things can look well-proportioned at one size and just plain wrong at another (which is why "a" typeface can have a bafflingly large number of variants in the "same" weight, depending on their intended sizes).

So we build things in different sizes for different uses. Some may be "the same thing", but with some tweaking of the smaller versions to make them display properly at their intended sizes. That may involve manually lining things up with the pixel grid in order to achieve "crispness" — at the expense of optimal spacing of the elements, so a larger version of the "crisp" small version may look very awkward — and it may involve using variations on line thicknesses and different versions of fonts. Some may shuffle elements around (for vertically- or horizontally-constrained spaces) or may eliminate elements in order to make the main elements "read" properly in the space allotted for them.

Take something really simple: the Nike swoosh. It may or may not also display the Nike name, which may be below or may be to the right of the swoosh. It may or may not include whatever motto/tag line they happen to be using as well. That really is just about as simple as it gets, and yet there are several variations on the theme for different applications. The IBM logo is also very simple, and being a word mark, doesn't need a separate text element, but it stops working when the stripes get too narrow. There is a size below which it simply cannot be used anymore, and an alternate, unstriped version is used instead.

You will not find that a complex design like yours, with many tiny elements, is going to be better-behaved at small sizes. You cannot have a "one size fits all" version of that design. You may have a set of branding elements that work at various sizes and in various orientations, but unless you're going for that unadorned monochrome square look or your minimum logo display size is fairly large, it will need to be a set. Your designer should know that. (And if your designer is using a high-PPI screen, s/he should be aware that the rest of the world may be seeing something very different when the image is scaled.)

Oh, just as an aside: there's no real truth to the rumour that a favicon must be an ICO file anymore. All the favicon.ico buys you is the convenience of not having to link the file from your page (the browser will attempt to retrieve it automatically from the site's document root). It still needs to be appropriately sized, of course, and so it won't be suitable for use on the page except as something like an alternative bullet.

  • Excellent answer. Though favicons on some platforms may be relatively big. – joojaa Dec 2 '15 at 22:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.