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-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
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.
Thanks to the hard work of Alex Shiels (@tellyworth) for implementing this!