Help your plugin stand out from the crowd! The following is a quick tutorial on adding a custom icon for your WordPress plugin.
While working on my recent plugin, Advanced Comments Widget, I decided I wanted to add a cool icon that would show up in search results in the plugin repository. After some research, I couldn’t find information on how to do it though. The Developer FAQ page has info for adding a banner for your plugin page, but nothing about adding an icon. (At least, nothing I could find.)
After some digging, I figured out the dead-simple way to accomplish this. Basically, you follow the same guidelines for adding a banner to your plugin page.
From the Developer FAQ:
Start by creating an assets/ directory in the root of your SVN checkout (if one doesn’t already exist). This will be on the same level as tags/ and trunk/, for example.
Inside that assets/ directory, you can make a file named banner-772×250.png or banner-772×250.jpg. The image must be exactly 772 pixels wide and 250 pixels tall. No GIFs.
Instead of creating a file named
banner-772x250.jpg, create a file named
icon-128x128.jpg. The dimensions for your plugin icon must be 128 pixels wide by 128 pixels tall.
If you want to support high-DPI (aka “retina”) displays, you can make a file named
icon-256x256.jpg. As with the standard size plugin icon, the dimensions for your retina-ready must be exact. In this case it’s 256 pixels wide by 256 pixels tall. If present, this image will be served when the website detects a browser on a high-DPI display.
After checking in the new icon(s), it will appear the next time the plugin is refreshed in the directory. During my testing, it only took a few minutes.
Why add an icon?
Let’s take a look at an example.
Here’s a “before” picture of the Advanced Comments Widget appearing in search results:
And here’s an “after”:
You’ll notice in the before shot, the plugin doesn’t really stand out. But in the after, it pops out. Even though the directory auto-creates cool graphical icons if your plugin doesn’t have an icon file, they’re kind of nondescript and blend in with the background. Adding your own custom icon to your plugin allows you to A: brand your plugin more in-line with your brand, and B: make your plugin stand out a little more in search results.
And there you have it; a really easy way to add an icon for your plugin and have it stand out in search results!