wlonk/wheretofind.me

Transparent logo has white fringe against non-white backgrounds

Closed this issue · 3 comments

Various sites (like Google+) end up displaying the logo against various backgrounds. The current logos are faded toward white, and where they would be perfectly white, are perfectly transparent.

Here are two real examples from Google+ (while running a Stylish theme to make G+ dark!)

wtfm-logo-fringe-small

wtfm-logo-fringe-large

Some possibilities:

  • Instead of fading to white, stay black, but fade toward transparent. Down side: logo disappears against very dark backgrounds.

  • Add a thin, white border around the logo. It will need to have a fade toward transparent at its edge. Ensures logo is visible against any background.

  • Set the background to solid white. Pros: very eye catching. Cons: very eye catching.

wlonk commented

Another possibility: use an SVG logo. I think I'd most like to go in that direction.

I believe that "use an SVG logo" and "* Instead of fading to white, stay black, but fade toward transparent" have equivalent consequences on contrast against dark backgrounds. On balance, it's probably worth fixing this by defining the logo's background colour and having the image be non-transparent. In places where we use the image as an icon, using a transparent version is worthwhile, but the page header image shows up in places where we don't control the background.

Fixed in #126, can be closed