Chrome extension-UI: How to add icons and favicons— part III

This is some sort of continuation of the chrome extension series introduction — part II

Notice the extension hello world has a default H as its icon. But we probably need an identifiable icon on those places.

There are 4 different sized icons (dot png) recommended for chrome extensions for different purposes:

• 128 by 128: for display on the chrome web store
• 48 by 48: for display on the extension description box
• 32 by 32: different sizes for display on the toolbar
• 16 by 16: for display on the toolbar and also as favicon on the extension page.

These icons are for the extension (where you see extension name, version number, and description) and also for the toolbar by the chrome extension icon on the top right.

1. Let’s first create the icons of the mentioned sizes.

• Open Keynote(mac) or PowerPoint(window)
• In an empty slide, write the letter or name of your extension, in our case we go for H
• Style the font and its color, also add background color if you wish
• Export your ppt into a .png file to save