Page MenuHomePhabricator

Icon(s) for the Reading List browser extension
Closed, ResolvedPublic

Description

We need an icon for displaying the Add to Reading List browser extension in the browser toolbar (and elsewhere in the browser chrome).

It looks like we'll need 128x128 and 48x48 versions at a minimum, according to the guidelines from Google and Mozilla:

https://developer.chrome.com/apps/manifest/icons
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons

Event Timeline

Mholloway created this task.
LGoto removed a subscriber: LGoto.

hi @Mholloway @cmadeo - how about this for the icon?

image.png (310×718 px, 39 KB)

Note the above was achieved with some additional inline css styling on the <popup.html> file

<style>
body {
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  margin: 16px;
}
#addToListSuccessContainer::before {
    content: "";
    background-image: url(icon_Addtolist_24x24.svg);
    position:absolute;
    width: 24px;
    height: 24px;
    left:16px;
    top:16px;
}
#addToListSuccessContainer {
    padding-left: 40px;
    color: #222;
}
</style>
Assets:

icon_Addtolist_128x128.png (128×128 px, 1 KB)


icon_Addtolist_48x48.png (48×48 px, 775 B)

Looks good to me!

By the way, @RHo, I saw you had forked https://github.com/mdholloway/readinglists-extension-chrome so I just wanted to warn you that all current development is happening in the cross browser https://github.com/mdholloway/webextension-readinglists repo. They are still pretty similar but will increasingly diverge as work continues.

Thanks for the heads up @Mholloway - I'd actually forked it accidentally at first, and just wanted to clone it. Will do so with the cross browser version now!

Sorry I just saw this @RHo looks good to me too :)

FWIW, Looks good to me as well.

Hi @RHo just checking to see if this is wrapped up?

Hi @LGoto - yes I believe so, unless Safari requires a different format/size this should be fine to close.

Mholloway claimed this task.

The existing icon looks fine on Safari to my eye. Let's reopen later if that turns out not to be the case.

Just FYI, for Safari:

Icon—The icon for your extension. Name the image file Icon.png. Every extension must have a custom icon, which should be at least 64 x 64 pixels in size; the icon image will be scaled up or down as needed. You can also supply additional images optimized for display at particular sizes.
If you provide multiple icons for display at different sizes, name the 64 x 64 icon file Icon-64.png. For best results, include an Icon-48.png and Icon-32.png for optimized display at smaller sizes. To optimize the appearance of your icons on high-resolution displays, include an Icon-96.png and an Icon-128.png as well.

Other images and media—Any other images or media your extension needs, such as images that appear in menus.

https://developer.apple.com/library/content/documentation/Tools/Conceptual/SafariExtensionGuide/ExtensionsOverview/ExtensionsOverview.html