Making WordPress.org

Opened 10 years ago

Closed 9 years ago

Last modified 22 months ago

#213 closed defect (bug) (fixed)

WordPress.org favicon needs some Retina love.

Reported by: georgestephanis's profile georgestephanis Owned by: georgestephanis's profile georgestephanis
Milestone: Priority: normal
Component: General Keywords: has-patch
Cc:

Description

Current favicon looks like this: https://cloudup.com/cyCWGFdwP8C (compared to other sites that do use retina-friendly ones)

John Gruber recommends Icon Slate for generating them with cross-browser compatability, but I've heard some good reports about just using the html5 tool on http://xiconeditor.com/

Alternately, we may be able to just serve it up as a 32px square png file, I'm not 100% certain on the browser compatability though.

Does anyone know where a higher-res version would be? Or should I tool around a bit to try and recreate it from scratch? Also, when dealing with tiny favicons, would it be wiser to use the simplified logo?

Attachments (4)

favicons.zip (10.3 KB) - added by siobhan 10 years ago.
Retina favicons for WordPress.org
favicon.ico (4.2 KB) - added by McGuive7 9 years ago.
32px .ico favicon (slightly lighter version of example 4)
wordpress-logo-notext-cmyk.ai (173.8 KB) - added by McGuive7 9 years ago.
Vector.ai version of favicon file for editing
favicons.2.zip (159.2 KB) - added by McGuive7 9 years ago.
Full favicon package generated via http://realfavicongenerator.net/ - see readme.txt

Download all attachments as: .zip

Change History (17)

#1 @jeffr0
10 years ago

  • Cc jeffc@… added

I'd like to see things taken one step farther. If you could find a 260X260 or 300X300 version of the image currently used for the Favicon, you could use it on http://realfavicongenerator.net/ and generate cross-platform favicon images. But that generator takes things a step further and creates images to use as a Windows 8 Tile or on the iOS Homescreen.

Unfortunately, at the end of the generator you need to upload all the images to the root of the site and then place code into the header.php file of the theme to reference those images. However, as illustrated by Chip Bennett, this can be overcome with a functionality plugin. http://wptavern.com/how-to-create-a-platform-agnostic-favicon#comment-51657

If I add WordPress.org to my iPhone homescreen, this is what it looks like.

https://cloudup.com/cFS5jQbXqWb

It's ok but could look a lot better.

This ticket was mentioned in IRC in #wordpress-meta by sams. View the logs.


10 years ago

#3 @samuelsidler
10 years ago

  • Owner set to georgestephanis
  • Status changed from new to assigned

George: Can you work up some images here?

@siobhan
10 years ago

Retina favicons for WordPress.org

#4 @siobhan
10 years ago

  • Cc siobhan added

Added four options for retina favicons for WordPress.org.

The one that I think looks best is favicon-white.ico

You can see what they look like:

https://i.cloudup.com/c7EKk28GII.png

From left to right:

  1. original wp.org favicon
  2. wp.com favicon
  3. favicon.ico
  4. favicon-simple.ico
  5. favicon-white.ico (my favourite)
  6. favicon-white-simple.ico

#5 @ocean90
10 years ago

  • Cc ocean90 added
  • Keywords has-patch added; needs-patch removed

+1 for favicon-white.ico

#6 @Otto42
10 years ago

I'd prefer a grey version similar to what we have now, instead of something so black and white.

#7 @netweb
10 years ago

  • Cc stephen@… added

#8 @McGuive7
9 years ago

+1 for transparency. Number 3 is my fave.

Last edited 9 years ago by McGuive7 (previous) (diff)

#9 @Otto42
9 years ago

#669 was marked as a duplicate.

@McGuive7
9 years ago

32px .ico favicon (slightly lighter version of example 4)

@McGuive7
9 years ago

Vector.ai version of favicon file for editing

#10 @Otto42
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

The slightly grey version wins. Props McGuive7.

@McGuive7
9 years ago

Full favicon package generated via http://realfavicongenerator.net/ - see readme.txt

This ticket was mentioned in PR #214 on WordPress/wporg-mu-plugins by adamwoodnz.


22 months ago
#11

See #213

Add rule to inherit the global header link color from the navigation container

Gutenberg 13.6.0 has removed this inheritance causing the links to change from white to blue, and greatly effecting the accessibility of the menu links due to low color contrast.

This is intended to be a quick fix until we can make changes to Gutenberg.

StevenDufresne commented on PR #214:


22 months ago
#12

LGTM!

This ticket was mentioned in PR #215 on WordPress/wporg-mu-plugins by adamwoodnz.


22 months ago
#13

See https://github.com/WordPress/wporg-mu-plugins/issues/213 and follows #214

Add rule to inherit the global footer link color from the navigation container, fixing the footer link colors on wordpress.org and make.wordpress.org

Gutenberg 13.6.0 has removed this inheritance causing the links to change from white to blue, and greatly effecting the accessibility of the menu links due to low color contrast.

This is intended to be a quick fix until we can make changes to Gutenberg.

The rule removed was:

.wp-block-navigation .wp-block-navigation-item__content {
    color: inherit;
}

The rule added by this PR is:

.wp-block-group.global-footer .wp-block-navigation-item .wp-block-navigation-item__content {
    color: inherit;
}

See screenshots for the rule in effect:

Note: See TracTickets for help on using tickets.