WordPress.org

Making WordPress.org

Opened 6 years ago

Closed 5 years ago

#213 closed defect (fixed)

WordPress.org favicon needs some Retina love.

Reported by: georgestephanis Owned by: 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 5 years ago.
Retina favicons for WordPress.org
favicon.ico (4.2 KB) - added by McGuive7 5 years ago.
32px .ico favicon (slightly lighter version of example 4)
wordpress-logo-notext-cmyk.ai (173.8 KB) - added by McGuive7 5 years ago.
Vector.ai version of favicon file for editing
favicons.2.zip (159.2 KB) - added by McGuive7 5 years ago.
Full favicon package generated via http://realfavicongenerator.net/ - see readme.txt

Download all attachments as: .zip

Change History (14)

#1 @jeffr0
5 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.


5 years ago

#3 @samuelsidler
5 years ago

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

George: Can you work up some images here?

@siobhan
5 years ago

Retina favicons for WordPress.org

#4 @siobhan
5 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
5 years ago

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

+1 for favicon-white.ico

#6 @Otto42
5 years ago

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

#7 @netweb
5 years ago

  • Cc stephen@… added

#8 @McGuive7
5 years ago

+1 for transparency. Number 3 is my fave.

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

#9 @Otto42
5 years ago

#669 was marked as a duplicate.

@McGuive7
5 years ago

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

@McGuive7
5 years ago

Vector.ai version of favicon file for editing

#10 @Otto42
5 years ago

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

The slightly grey version wins. Props McGuive7.

@McGuive7
5 years ago

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

Note: See TracTickets for help on using tickets.