Recommended size of icon for Google Chrome Extension - google-chrome-extension

This page explain 19*19 and 38*38.
http://developer.chrome.com/extensions/browserAction.html#icon
But this page explain 16*16 and 48*48, 128*128.
http://developer.chrome.com/extensions/manifest/icons.html
Which is correct?

Both are correct ! They are for different sections/features:
The former refers to the browser-action icon (displayed on the top-right corner of your browser-window, next to the address bar). It is only displayed if your extension registers a browser-action.
The latter refers to icons used throughout the extension and browser, as is explained quite clearly in the link you provide:
(emphasis mine)
One or more icons that represent the extension, app, or theme. You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension's pages. The 16x16 icon is also displayed in the experimental extension infobar feature.
BTW, that second link mentions icon as the property name, which was replaced in Manifest v2 by default_icon.
("Migration to Manifest v2" guide)

To elaborate on ExpertSystem's answer, here is an example manifest excerpt with all of the image sizes:
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_popup": "popup.html"
},
"icons": { "16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png" }, ...
Notice how the 19/38 icons are for the browser action, and the 16/48/128 are at the icons level.
I think it is best therefore to create the image as a vector graphic (e.g. svg file) and then save to a bitmap (e.g. png file) for each of the sizes.

2020 Update:
I was researching this recently. Here is what I found:
These sizes seem to cover most scenarios: 16, 24, 32, 48, 128
These sizes seem to be outdated: 19, 38
Icons - Recommended Sizes:
16, 24, 32, 48, 128.
Size: Manifest - Icons: chrome.browserAction:
16 Yes Yes
24 No Yes
32 Yes Yes
48 Yes No
128 Yes No
Manifest - Icons: https://developer.chrome.com/extensions/manifest/icons
chrome.browserAction: https://developer.chrome.com/extensions/browserAction
Icons - Outdated Sizes:
19, 38.
Size: Manifest - Icons: chrome.browserAction:
19 No Outdated
38 No Outdated
chrome.browserAction: https://chrome-apps-doc2.appspot.com/extensions/browserAction.html

For browser action, we just need a 16x16 icon now, as
The browser action icons in Chrome are 16 dips (device-independent pixels) wide and high.

Related

How to add an extension icon to the Chrome extension popup which lists extensions?

The kinda "puzzle piece" icon of Chrome that shows a list of extension as a popup is shown in the image i have attached. Next to each extension name is an icon. How do you add this icon to an extension or what image name or size is this in the manifest?
Update my default icon in the manifest looks like this.
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"24": "img/icon24.png",
"32": "img/icon32.png"
},
"default_title": "__MSG_mainDescription__"
}
Update This is now almost a stupid question. My icon color is almost the same color as the window and thus you cannot see it. This was the problem.

chrome extension : how to display an icon in the toolbar?

I've created a simple extension but the icon is not being displayed in the browser's toolbar and in fact I see many other extensions installed but not their icon in the toolbar. What element in the manifest file defines that an icon should display an icon in the toolbar?
Here is the used manifest file and this manifest does not add any icon to the toolbar
{
// Extension ID: my_id
"key": ".....my key.......",
"name": "....any name....",
"version": "1.0",
"manifest_version": 2,
"description": "description",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"128": "icon-128.png"
},
"permissions": [
"...."
]
}
I ran into this exact same problem and found this question on the top search results. The answer I needed is in the comment by wOxxOm on this question so in case it helps, I'm promoting it to an answer:
The icon is available by default but it may not be visible due to the toolbar width made available to icons. You can edit this by clicking on the "puzzle piece" in the extension toolbar and then picking on the "pushpin" next to the extension you want to be made visible.
Hope this helps other people who are confused by this.
Sometimes, although adding icons in manifest.json, you cannot view icon on the toolbar. Because you need a browser action.
You can try adding in this manifest.json;
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
Also, you should generated .html file and .png image
In Brief,
Chrome extension include third parts.
Background script
Content script
Browser action(popup)
If you want see icon on toolbar, you should set a browser action in manifest.json

What is the reason for discrenpasies in extension icon sizes?

I added icons for all of the sizes below to the "icons" and "browser action icons" properties to see where Chrome would put them.
"16": "icon16.png",
"19": "icon19.png",
"24": "icon24.png",
"32": "icon32.png",
"36": "icon36.png",
"38": "icon38.png",
"48": "icon48.png",
"128": "icon128.png"
https://developer.chrome.com/extensions/manifest/icons
According to the documentation for icons: "You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension's pages."
https://developer.chrome.com/extensions/browserAction
According to the documentation for browser icons:
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
}
What I found is that the actual sizes on the screen are different from the dimensions of the image and the CSS size given to the image. For example, the 48x48 image used in chrome://extensions/ is displayed on the browser as 54x54 (checked size using MS Paint), but inspecting it with dev tools shows a 36x36 css value. So 48x48 = actual size, 54x54 size displayed in the browser, 36x36 CSS size given to it in the browser.
Something else I found is that, for example, the navicon icon uses the 32x32 image. Yet the space on screen is 24x24 (checked in MS Paint). Why not just use the 24x24 image I included?
Why these discrepansies?
And when I checked an official Google extension, the only icons it has are 128, 38, and 19. There's no 32x32 even though the docs say 32x32 should be included for Windows. This page does mention those sizes: https://chrome-apps-doc2.appspot.com/extensions/browserAction.html#icon, but it seems like an old page.
The docs say Chrome can rescale an icon to fit it to different sizes. So could I just give it a 128x128 one and be good? It displays well on my laptop but I don't know if other devices would have issues.

Google Chrome extension icon sizes

I'm having with getting the correct icons to show in my chrome extension.
To make some tests I'm using the following icon pack where each icon is just a number displaying the size of the icon (i've added a 32 version as well):
https://github.com/jbrudvik/chrome-extension-icon-sizes
I then set my manifest like so:
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"19": "img/icon19.png",
"24": "img/icon24.png",
"32": "img/icon32.png"
"38": "img/icon38.png",
"48": "img/icon48.png"
},
},
"icons": {
"16": "img/icon16.png",
"19": "img/icon19.png",
"24": "img/icon24.png",
"32": "img/icon32.png",
"38": "img/icon38.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
What this shows me is that on my mac, under chrome v67:
- The favicon on a tab belonging to the extension uses: 32x32
- The extensions management page uses: 48x48
- The browser action icon uses: 32x32
Google gives some hints as to which sizes get used in which locations:
https://developer.chrome.com/apps/manifest/icons
I have three questions:
Google states that the extensions management page uses the 48x48. However, this does not seem to be the ideal choice for this, as it tends to upscale the image making it look rather blurry. I've found if I remove the 48x48 option from my manifest, or alternatively, provide a 128x128 img for 48x48 option (ie: "48": "img/icon128.png",) then this results in a nice clear image. Why doesn't the extensions management page default to using the 128x128 image first? Are there any downsides to my hack of providing at 128x128 image as the defined 48x48 one?
Google also states that you can provide a 16x16 icon which will "be used as the favicon for an extension's pages". This contradicts my findings where it actually uses the 32x32 as it's preferred size (falling back on 48x48 if unavailable, and then 128x128).
Finally, I haven't tested this, but I suspect these findings may be specific to my computer / operating system. Is it possible that other systems may exhibit different behaviour?

Will Instagram serve square thumbnails for portrait/landscape images?

We have a custom Instagram integration in our site, the design for which assumes (and currently depends upon) the images it displays being square.
Instagram announced today that they will support landscape and portrait photos. Is there a way to load only square images/thumbnails even if the Instagram image is portrait/landscape?
Yes it does.
I just spent some time poking around, and found some interesting things.
Short Answer: The API is still returning the square versions for images, even the ones that are uploaded as Portraits or Landscapes. If you want the original landscape / portrait images also, you have to do a little hack -- details below -- until they address it in their API response).
Ex: See this one photo of Taylor Swift uploaded by 1 of the user's mentioned in IG's blog post / press release -- #johnbenett
https://instagram.com/p/6ZVIHTJLYg/
This is the original uploaded photo - Portrait 512 px x 640 px
And here's what the Instagram API returns, for the various images (including thumbnail) for the above portrait image.
"images": {
"low_resolution": {
"url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s320x320/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
"width": 320,
"height": 320
},
"thumbnail": {
"url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
"width": 640,
"height": 640
}
So the standard resolution image returned by the API for this Portrait image is 640 px square and looks like this.
and the low resolution image returned by the API for this Portrait image is 320 px square and looks like this.
and last but not least, the thumbnail image returned by the API for this Portrait image is 150 px square and looks like this.
Notice how the photo has been cropped top and bottom to make it 640 square. If this is what you are looking for, then you are good to go, and you may stop reading right here :)
Further reading
If you want the original portrait / landscape images also, then read on. Videos also evaluated at the end.
How do I get the original image for a photo uploaded as a landscape or portrait?
Since the API returns only 1 set of images as of now, but the site is able to show the original aspect ratio images, I did some digging around, and realized that if you remove the /c0.135.1080.1080 from the urls of the square images, you get to the original aspect ratio sized UNCROPPED images.
Keeping the same example above:
Square Cropped Image URL (returned by API)
https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg
Portrait Image URL (arrived at by modifying Square Image URL)
https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/11909195_1715998838621946_791786043_n.jpg
Hope this helps.
I am guessing they will eventually update the API to return the Square images and the landscape, portrait images for image media type.
What about Videos?
I checked out Videos posted as landscape or portrait. For these, the videos array has the videos in the original aspect ratio, while the images array has square versions of the video Poster / Thumbnail images.
Example: Here's a landscape video: https://instagram.com/p/65WW2uzO2f/?taken-by=schwa23
The API returns landscape resolution for the video files:
"videos": {
"low_bandwidth": {
"url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1635209236718259_43009002_s.mp4",
"width": 480,
"height": 599
},
"standard_resolution": {
"url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1696545230566321_1671523019_n.mp4",
"width": 640,
"height": 799
},
"low_resolution": {
"url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1635209236718259_43009002_s.mp4",
"width": 480,
"height": 599
}
}
and square images for the video poster image / cover image.
"images": {
"low_resolution": {
"url": "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s320x320/e15/11856717_420039798193500_1047568791_n.jpg",
"width": 320,
"height": 320
},
"thumbnail": {
"url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e15/c140.0.360.360/11848988_1472118453090746_1196959304_n.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11856717_420039798193500_1047568791_n.jpg",
"width": 640,
"height": 640
}
So with Videos, you are good to go, since the images array has the square images and the videos array has the actual videos in original aspect ratio.
There is a hack for getting square images that I am using:
You take the thumbnail url which includes the correct cropping command and then replace the 150x150 with the size you actually want the image at.
For example, an api response for a landscape image thumbnail:
"thumbnail": {
"url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c135.0.810.810/11909312_160908554245117_2021517224_n.jpg",
"width": 150,
"height": 150
}
the part c135.0.810.810 is doing the cropping to a square, which we want to keep, but the s150x150 is too small so replacing that with s640x640 gives us our cropped square image at the required size.
You can play around with the cropping command if you want this changed - e.g. setting the first number to 0 will give you a left-aligned cropped image.
As far as I can tell so far, everything works as normal but the thumbnail won't be cropped in like on the Instagram app, you will see the white borders.
There must be a couple of extra image urls we can access but I haven't seen any update in the api docs.
Update. Instagram just announced API support for landscape/portrait photo.
Blog post
By default, the setting is disabled and the API will continue to return media in the old square format. When enabled, the API will return media in the format it was actually shared, which may be non-square. The ‘thumbnail’ images will not be affected by this setting, and they will continue to be square.
You don't have to change anything now but from June 1, 2016 all clients will receive photos and videos only in the format it was actually shared.
For my integration I want to receive original images so I enabled a new setting called Migrations in the “Edit Client” dashboard ( Instagram dev app configuration ).
I did some tests and it works fine. Here is example object returned by Instagram API:
{
'low_resolution': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e35/p320x320/11849291_1520473841577439_1881145227_n.jpg,
'standard_resolution': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/sh0.08/e35/p640x640/11849291_1520473841577439_1881145227_n.jpg,
'thumbnail': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c0.135.1080.1080/11849291_1520473841577439_1881145227_n.jpg
}

Resources