Introducing plugin icons in the plugin installer
WordPress 4.0 comes with a redesigned plugin installer. Just now we’ve added one of the finishing touches to this project — plugin icons.
Plugin authors, If your plugin is compatible with WordPress 4.0, it only takes a few moments to change a readme “Tested up to:” value to 4.0. Compatibility information is prominently shown in the new plugin installer, so you’ll definitely want to update this value. For your plugin to stand out, you’ll also want to give your plugin an icon. Read on…
Beautiful, auto-generated icons
Default icons are generated using the GeoPattern library by Jason Long of GitHub. If you have a banner image, it is automatically sampled to determine the primary color for the pattern, using Tonesque from @matveb. (Cool, huh?)
Making your own icon
Plugin icons are 128 pixels square. HiDPI (retina) icons are supported at 256 pixels square. Like banners, these go into your /assets
directory and can be either a PNG or JPG. So just create assets/icon-128x128.(png|jpg)
and/or assets/icon-256x256.(png|jpg)
and you have an icon.
You also have another option: SVG. Vectors are perfect for icons like this, as they can be scaled to any size and the file itself is small. For an SVG file, you simply need an assets/icon.svg
file.
We may implement SVG-to-images fallbacks in core for browsers that don’t support them, so if you go the SVG route, I’d suggest also turning your SVG into a PNG. (SVG takes precedence.)
Jetpack uses an SVG icon:
Some tips when designing an icon
- Keep it simple! The Android and iOS Human Interface Guidelines both have some fantastic design tips.
- Avoid text, especially since these may be seen at smaller sizes in other contexts (and in languages other than English). And because this is an icon, not an ad.
- Use the right image format for what you’re doing. Don’t use JPGs for simple designs; don’t use PNGs for photos.
- Optimize your images! Use something like ImageOptim or your favorite web app, CLI tool, etc.
- Please no WordPress logos. Come up with your own brand. (If you already have a banner image, you likely already have a head start here.)
- If you haven’t worked with SVGs before, they’re pretty cool. Here’s a tutorial from Chris Coyier.
- Keep in mind this is an icon for your plugin, not a display ad.
Some examples
Akismet, Jetpack, and Hello Dolly already have icons. You can see their assets directories here, here, and here.
Thanks to the hard work of Alex Shiels (@tellyworth) for implementing this!
Pippin Williamson 7:16 pm on August 21, 2014 Permalink | Log in to Reply
So awesome!
Frankie Jarrett 7:21 pm on August 21, 2014 Permalink | Log in to Reply
Stoked.
Ben Hansen 7:21 pm on August 21, 2014 Permalink | Log in to Reply
nice one love the jetpack icon
Ram Ratan Maurya 7:26 pm on August 21, 2014 Permalink | Log in to Reply
So much in love with automatic colors based on the banners, very well executed
Pete 7:30 pm on August 21, 2014 Permalink | Log in to Reply
Very nice. Can they be turned off to reduce my bandwidth?
Archie22is 9:37 am on August 22, 2014 Permalink | Log in to Reply
Hahaha… Pete.
I think it is awesome
Rafael Funchal 7:30 pm on August 21, 2014 Permalink | Log in to Reply
Great!
Valerio Souza 7:31 pm on August 21, 2014 Permalink | Log in to Reply
Perfect, i like icon Hello Dolly
Alin Marcu 7:41 pm on August 21, 2014 Permalink | Log in to Reply
Nice
Brad Touesnard 7:44 pm on August 21, 2014 Permalink | Log in to Reply
w00t
Daisuke Takahashi 8:00 pm on August 21, 2014 Permalink | Log in to Reply
@nacin Can I use SVG image as a banner?
Samuel Wood (Otto) 8:11 pm on August 21, 2014 Permalink | Log in to Reply
No, not at this time. It’s something we’ll consider though.
Andrew Nacin 1:09 am on August 22, 2014 Permalink | Log in to Reply
I’ve just added preliminary support for banner.svg. Seems to work well for me.
Will Norris 8:11 pm on August 21, 2014 Permalink | Log in to Reply
very nice! When did WordPress get ahold of w.org? That’s pretty awesome!
Drew Jaynes (DrewAPicture) 9:22 pm on August 21, 2014 Permalink | Log in to Reply
http://wptavern.com/how-wordpress-obtained-the-w-org-domain
Brent Christensen 8:13 pm on August 21, 2014 Permalink | Log in to Reply
very kewl… looking forward to this
garthkoyle 8:18 pm on August 21, 2014 Permalink | Log in to Reply
This is gonna be iconic!
Chuck Reynolds 8:21 pm on August 21, 2014 Permalink | Log in to Reply
Nice this is cool – wlll look nice in the new plugin screens
sethshoultes 8:21 pm on August 21, 2014 Permalink | Log in to Reply
Sweet!!!
BrashRebel 8:22 pm on August 21, 2014 Permalink | Log in to Reply
I really love this. Great job to everybody and thanks @nacin for including the great instructions and resources.
Nikhil Vimal (NikV) 8:25 pm on August 21, 2014 Permalink | Log in to Reply
Great idea! Definitely can’t wait to see how it is used by different plugins.
Thomas Townsend 8:36 pm on August 21, 2014 Permalink | Log in to Reply
That’s a polished look for sure. Can’t wait to get our code up to date and top it off with a nice Custom Icon…sweet
Michael Beil 8:45 pm on August 21, 2014 Permalink | Log in to Reply
so nice.
Joan Boluda 8:54 pm on August 21, 2014 Permalink | Log in to Reply
Nice!
Mike Schinkel 8:57 pm on August 21, 2014 Permalink | Log in to Reply
Nice!
Barry Kooij 8:57 pm on August 21, 2014 Permalink | Log in to Reply
Love this!!
Phil Derksen 9:37 pm on August 21, 2014 Permalink | Log in to Reply
Icons FTW!
Todd Lahman 9:47 pm on August 21, 2014 Permalink | Log in to Reply
This is totally awesome! WOOOOOOOOO!
Matthew 10:08 pm on August 21, 2014 Permalink | Log in to Reply
What do you name the picture as in your assets file?
Andrew Nacin 12:48 am on August 22, 2014 Permalink | Log in to Reply
The post says
icon-128x128.png
(or jpg) andicon-256x256.png
(or jpg) and icon.svg.Matthew 12:18 pm on August 22, 2014 Permalink | Log in to Reply
Thanks
AITpro 10:12 pm on August 21, 2014 Permalink | Log in to Reply
K00L! Probably a dumb question, but can you do an SVN commit just to upload the plugin icon in the assets folder or would it be better just to wait, fix some plugin stuff/add things and then do the commit? Like I said, probably a dumb question. Thanks.
Samuel Wood (Otto) 10:50 pm on August 21, 2014 Permalink | Log in to Reply
You can commit the icon to the assets without waiting for any other changes, if you like. It will take a short amount of time before you see any change, however, because the system has to notice the update in the directory and process it, same as with banner changes.
AITpro 10:53 pm on August 21, 2014 Permalink | Log in to Reply
Great! Thanks.
AITpro 11:16 pm on August 21, 2014 Permalink | Log in to Reply
OMG the new plugin icon looks super! in the Plugin Directory. AWESOME idea guys! Adds some serious “jazz” to the Plugin Directory.
Robert Chapin 10:19 pm on August 21, 2014 Permalink | Log in to Reply
It looks like low-dpi devices are displaying the 256×256 icon when both icons are available. So what’s the point of having both sizes?
Samuel Wood (Otto) 10:51 pm on August 21, 2014 Permalink | Log in to Reply
It’s new and preliminary. The core code may need to change a bit to use both resolutions properly. Also, we may use the icons in other places, so having both a 1x and 2x size gives us more options and better ability to handle hi-dpi devices. Like we do with banners, we can use CSS to display the most appropriate banner for the device and save ourselves a bit of bandwidth, make things faster, etc.
Andrew Nacin 12:43 am on August 22, 2014 Permalink | Log in to Reply
Safari 8 (coming in OS X 10.10 and iOS 8) will have img srcset support, so we’d have a need for both 2x and 1x images: <img src=”icon-128×128.png” srcset=”icon-256×256.png 2x” />.
If we used srcset in 4.0, we’d end up with non-retina images on Safari, which I’m not a fan of. An alternative would be to flip how srcset is normally defined: <img src=”icon-256×256.png” srcset=”icon-128×128.png 1x” />. I haven’t confirmed if this actually works, but basically it’d mean that for any browser that doesn’t understand srcset, serve them HiDPI images, and if the browser does understand srcset and we’re not on a HiDPI display, then serve them low-res images. This means that we’d use less bandwidth for non-HiDPI devices that do support srcset, which is better than just ignoring srcset until WP 4.1, shipping in December. (I haven’t seen this inverted technique covered anywhere, though. Going to seek some feedback on this. Maybe I just came up with something new?)
Samuel Aguilera 10:44 pm on August 21, 2014 Permalink | Log in to Reply
So nice!
croixhaug 10:45 pm on August 21, 2014 Permalink | Log in to Reply
This is very cool, I just updated my plugins on the repo!
Reza 11:11 pm on August 21, 2014 Permalink | Log in to Reply
I see Jetpack Icon 533×533 on WordPress 4.0-beta4
Andrew Nacin 12:46 am on August 22, 2014 Permalink | Log in to Reply
? Can you elaborate? Screenshot?
Sergey Biryukov 2:40 am on August 22, 2014 Permalink | Log in to Reply
I saw that too, but it fixed itself after a page refresh. That’s how it looks if .plugin-icon CSS rules are not loaded: http://cl.ly/image/3C3q1p1X1L1Q.
Ulrich 9:20 am on August 22, 2014 Permalink | Log in to Reply
It seems like the css was not included in 4.0-beta4
Sergey Biryukov 4:26 pm on August 22, 2014 Permalink
The CSS is there: https://core.trac.wordpress.org/changeset/29569.
Looks like the version in wp-includes/version.php should have been bumped to avoid the need for a page refresh.
rilwis 6:37 am on August 22, 2014 Permalink | Log in to Reply
Amazing!
Maruti Mohanty 7:04 am on August 22, 2014 Permalink | Log in to Reply
Awesomely cool
Thong Tran 7:22 am on August 22, 2014 Permalink | Log in to Reply
Pretty cool for end-user. It would be even more lovely if the plugin background can be displayed there someway
Andrew Nacin 9:33 pm on August 22, 2014 Permalink | Log in to Reply
That was added too. Banners show up when viewing the details for an individual plugin.
TRILOS new media 8:25 am on August 22, 2014 Permalink | Log in to Reply
NEVER EVER write “Compatible with your install”! Please write “Compatible with WordPress 4.0″, “…your installed version” or something like that. Otherwise you would say it is compatible with the individual installation, its theme, plugins and so on.
Sergey Biryukov 11:46 pm on August 22, 2014 Permalink | Log in to Reply
https://core.trac.wordpress.org/ticket/29313
weblizar 12:40 pm on August 22, 2014 Permalink | Log in to Reply
I am going to add this feature to all my plugins…………..
WordPress make life Awesome!!!!
Alex
Scott Wyden Kivowitz 1:05 pm on August 22, 2014 Permalink | Log in to Reply
Really cool idea. Can’t wait to see what everyone comes up with.
Subharanjan 1:48 pm on August 22, 2014 Permalink | Log in to Reply
So nice !!
Stanko Metodiev 2:49 pm on August 22, 2014 Permalink | Log in to Reply
Awesome!
takien 9:12 pm on August 23, 2014 Permalink | Log in to Reply
niceee… (y)
Matías Ventura 6:07 pm on August 24, 2014 Permalink | Log in to Reply
That’s neat, nice work everyone! I’m glad tonesque was useful.
dudd 1:44 pm on August 26, 2014 Permalink | Log in to Reply
Waw! as I said on the wptavern blog we always appreciate this genius of the developer for wordpress to add useful functions in the core. Thank’s to all the team
Evan Herman 2:26 pm on August 26, 2014 Permalink | Log in to Reply
Wow this feature slipped by me. This is great!
Jaber Al Nahian (rijans) 4:36 am on August 30, 2014 Permalink | Log in to Reply
What about making the plugin store look like app store by adding related plugins? Everyone will appreciate it!
ProAppSoft 7:46 pm on September 2, 2014 Permalink | Log in to Reply
Super awesome!
Rene Hermenau 7:26 am on September 4, 2014 Permalink | Log in to Reply
I love and already using them on http://wordpress.org/plugins/mashsharer/
keypic 10:32 am on September 4, 2014 Permalink | Log in to Reply
Awesome!
nertworks 11:54 am on September 4, 2014 Permalink | Log in to Reply
The icon idea is my fav part so far.
smartpixels 3:03 pm on September 4, 2014 Permalink | Log in to Reply
This is super cool, may be eventually moving towards windows 8 UI
Sakin Shrestha 3:19 pm on September 4, 2014 Permalink | Log in to Reply
Awesome…
Ricard Torres 6:27 am on September 5, 2014 Permalink | Log in to Reply
Hi there, after almost 48 hours the icon on my plugin (Thumbs Rating) hasn’t changed (even though I’ve uploaded both icons http://plugins.svn.wordpress.org/thumbs-rating/assets/ ).
Am I doing something wrong or is it a matter of time?
Thank you.
s3bubble 12:56 pm on September 5, 2014 Permalink | Log in to Reply
Hi there, after almost 48 hours my icons on my plugins for (S3Bubble) havent changed (even though I’ve uploaded both icons).
Any help?
Thank you.
askapache 1:19 pm on September 5, 2014 Permalink | Log in to Reply
This is really helpful Nacin, thanks!