You’ve probably noticed the new icons in the WordPress Plugin Directory listings. Those icons will also be available in WordPress 4.0, in the newly redesigned plugin installer.
At this time, by default, those icons are automatically generated for plugins having a banner but no icons. The colors of the default icon are determined using a neat algorithm that analyzes the color of your banner, from plugin’s assets directory (if you’ve already uploaded one).
Even if your plugin has a banner image and an icon was auto-generated for it, you should consider adding a custom designed icon. This will help your plugin to stand out and will strengthen your brand.
Here is a screenshot with some auto-generated icons, on the Install Plugins screen:
Adding an icon to your WordPress Plugin
You’ll need a PNG or JPG icon with the following sizes: 256×256 pixels and/or 128×128 pixels or a SVG image. If you’re using a SVG image you should also upload at least one PNG / JPG version of your icon.
After creating the icon you’ll have to upload it in your assets directory, within your repository.
Depending on the chosen size and image format, the icons must be named as follows:
- icon-128×128.png or icon-128×128.jpg
- icon-256×256.png or icon-256×256.jpg
- icon.svg
The relative path should look like this: assets/icon-128×128.png.
That’s it! The installer and the plugin directory will use that image to render your icon.
Here is an example of how plugins with custom defined icons will look on the plugin installer screen, in WordPress 4.0 :
And here is how plugins with custom defined icons will be displayed in a listing on WordPress Plugin Directory:
Tips for designing your own custom icons
- you can always use a free image tool like GIMP or PAINT.net; Photoshop is really not needed!
- always use a lossless image compression tool, I recommend PNGGauntlet (which combines PNGOUT, OptiPNG and DeflOpt to create the smallest images possible while preserving quality)
- avoid texts and/or small letters
- always design your logo / icons using a much bigger image resolution
- keep them as simple as possible; avoid complex designs that may look awful while scaling
- don’t copy them from elsewhere and make sure you’re not infringing trademarks
- be original, will help you stand out from the crowd