This is bugging me more than ist should.
While I agree that custom designed icons would be the best solution, I don't think that will happen soon.
Until then I would suggest the following as a temporary solution:

I have collected all current browser logos in the best possible resolution and written a script to convert them to transparent 16x16 png images:
https://github.com/Findus23/device-icons
The advantages are:

• more up to date icons
• easier way to add or update icons in the future
• easy to increase image size in the future (16x16px is a bit small)
• increased image quality (mainly due to using png instead of gif)

I only have updated the images from DevicesDetection/images/browsers, but I plan to add more if you are interested. (especially os, but maybe even brand or flags)

Old:

New:

I am always open to ideas and better images.

Awesome, do you know how to issue a pull request?

Im glad you like it.
Before I issue a pull request I want to make sure my script is working correctly (and deterministically).
There are also 25 Browsers missing an Icon (some of which had one before), so if anyone knows them, I'll add them.
https://github.com/Findus23/device-icons/tree/master/src/DevicesDetection/images/browsers (files ending in .missing)

That about the image size? Some were 14x14px others were 16x16px before.

I only have updated the images from DevicesDetection/images/browsers, but I plan to add more if you are interested. (especially os, but maybe even brand or flags)

Yes we are very interested @Findus23 - this will make a huge difference in the Piwik design & experience! 🎉

That about the image size? Some were 14x14px others were 16x16px before.

Probably 16px is better (bigger is better, right?)

bigger is better, right?

I can only agree, but the question is if there are side effects.
The UI Tests show that now it is more obvious that the text isn't vertically aligned.

The mobile Apps don't seem to have any problems with larger icons:
Android:

iOS:

The UI Tests show that now it is more obvious that the text isn't vertically aligned.

Good point. feel free to add the vertical alignment there in the visitor profile and where it's missing. if you don't know how we can add it later as well.

Good point. feel free to add the vertical alignment there in the visitor profile and where it's missing. if you don't know how we can add it later as well.

That was easier than I thought. A single vertical-align: middle; fixed it. (I think the popup is the only place where text is next to the icon)

Now that the browser and OS icons (#11063) and the referrers icons (#11093) are updated, I looked at the other icons in Piwik:

• Flags:

  • Personally I don't like the "glossy" look of the current flags. (e.g )
  • There are many libraries providing official flags as svg (mostly from wikipedia | e.g lipis/flag-icon-css)
  • After some tries I realized that converting the svg to 16px png images isn't enough.
    While some simple flags look better (in my opinion, like , or ) others get ugly as too much detail is lost. (, , , )
  • I'm not sure what to do as it is pretty hard to show many details in 192 Pixel total (16x12)
  • old vs. new

• DevicePlugins (cookie, flash, java)

  • I forgot about them and will add them soon

• DevicesDetection/images/screens

  • It would be great to have higher resolution icons with a common design, but I guess this won't work without the help of a designer.

• DevicesDetection/images/brand

  • I am still thinking about a way to update them that doesn't involve me googling hundreds of companies.
  • Maybe just update the top X (maybe from demo.piwik.org?) as most people will newer see the other.
  • Is there a reason that they are .ico?

What's your opinion? @mattab @tsteur

DevicesDetection/images/brand

• I am still thinking about a way to update them that doesn't involve me googling hundreds of companies.
• Maybe just update the top X (maybe from demo.piwik.org?) as most people will newer see the other.
• Is there a reason that they are .ico?

I guess there is no good reason for using ico, nur sure why that was done in the first place.
Only using the top of demo.piwik.org might not be that good. Device brands are more or less a matter of the country your visitors are from. In China or Japan there will be very different "top brands" than in a European country or America.
I don't have a good solution for grabbing those icons automatically. Especially as some brands are ambiguous.
But nevertheless feel free to change them if you find a good solution :)

BTW: Mobile app assumes and renders all icons at 14x14 in Visitor screen. In the Visitor Overview (screenshot above) it uses "width: 18 & height: 12," for country flag, width: 14 & height: 14 for browser icon and width: 14 & height: 14 for browser icon. A dimension needs to be specified in the mobile app otherwise it can end up messy.

Is there a chance you guys can upload the images in twice or triple the size? eg 48x48 or 32x32 instead of 16x16? This way it will look good on retina screens and much better in mobile app (we had few complaints)

Is there a chance you guys can upload the images in twice or triple the size? eg 48x48 or 32x32 instead of 16x16? This way it will look good on retina screens and much better in mobile app (we had few complaints)

That was the original reason why I collected the source images in the best possible resolution and converted them afterwards. See https://github.com/Findus23/device-icons) Creating additional sizes is just modifying a few lines in a bash script.

The question is just how to implement this in Piwik. Maybe a srcset with fallback to the highest resolution (for IE)?

@Findus23 well done, will prove to be very useful!

• would it work in the Piwik UI to simply load the image in 48x48 and let the browser resize it?
• in the scheduled email reports (PDF and HTML), we'll have to check if we may need to add a little logic to resize icons if it's not there already

There would be no srcset needed. As @mattab says one size eg 48x48 would be good and then let browser resize it. We would only need to make sure to specify a size in Piwik everywhere when we show icons (which we maybe already do)

You are right. One size is the simplest solution and the images are only about three times larger.
e.g. browser icons: 94.6kB vs 340.7kB

One additional thought: Should I upscale smaller images to 48x48 (which makes it more predictable) or keep them at the source size (which keeps the quality)

I would probably keep the smaller size but might be also good to have all the images in same size. I'd go with leaving it small so we know which ones have low res etc

The difference is really impressive.
This is a cropped screenshot on an retina iPad:

Awesome 👍

I have now updated all pull requests, hoping that I didn't miss a place where the icons are used without a defined size.

I also tested the Mobile Apps and it seems like they don't have an issue with larger icons. But it seems like they are cached for quite a long time. I am often seeing old icons next to new ones.

After some testing it seems like changing the datatables via CSS is a bad idea as it also influences the other icons (example)

So the better solution would be to replace e.g.

<img title='Windows Vista' alt='Windows Vista'   src='plugins/DevicesDetection/images/os/WIN.png' />

with

<img width='16px' height='16px' title='Windows Vista' alt='Windows Vista'   src='plugins/DevicesDetection/images/os/WIN.png' />

in http://localhost/piwik/index.php?module=DevicesDetection&action=getOsVersions&idSite=1&period=month&date=2017-01-03 (and similar reports. But after searching for some time I wasn't able to find the template for these reports.

Could you help me?

See https://github.com/piwik/piwik/blob/3.x-dev/plugins/CoreHome/templates/_dataTableCell.twig#L46 and https://github.com/piwik/piwik/blob/3.x-dev/plugins/Morpheus/templates/macros.twig#L1-L17
But I'm currently not sure if it can be easily changed or where it is used as well...

As I am missing the context I can only suggest the following "hack", which seems to work (I haven't run the tests):

Replace https://github.com/piwik/piwik/blob/3.x-dev/plugins/Morpheus/templates/macros.twig#L3-L11 with

{% set width %}width="{{ metadata['logoWidth']|default("16px") }}"{% endset %}
{% set height %}height="{{ metadata['logoHeight']|default("16px") }}"{% endset %}

Another test shows: PDF reports seem to work, but the height and width in HTML reports are missing

fyi the HTML scheduled reports icons are loaded here: https://github.com/piwik/piwik/blob/master/plugins/CoreHome/templates/ReportRenderer/_htmlReportBody.twig#L50-L53

So maybe we can simply add the width/height to this img src ?

But I'm currently not sure if it can be easily changed or where it is used as well...

as @sgiehl said I think the only code to change is this macro linked above. @Findus23 do you want to try to change this code to set the width/height according to the metadata width/height? if you can't or don't know how to, let us know and we'll help, so this awesome PR can be finalised 👍

@mattab I have now fixed the HTML reports (b06679a)

As for the macros (datatable) I'd rather have you make the changes as I am missing the context (where does the logoWidth come from?), so I could only change it locally.

Other then this all pull requests are ready to be merged.

@Findus23 I'm not sure if setting the height and width in the metadata would be a proper solution.
Regarding the CSS change you proposed. Did you try to use max-height and max-width instead of setting it fixed? That way the other icons shouldn't be influenced as I think they should all be smaller

@sgiehl You are right. I didn't think about max-*.
It works and has the positive side effect of also working for the flags (they aren't square)
And the CSS should always be parsed before the tables appear, so there also won't be a problem of them changing the size while loading.

@sgiehl, the UI test showed that it isn't perfect, as it also affect the dataTableRowActions (http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21907/ActionsDataTable_pageview_percentages.png)

I have now added a max-size for them: d2976b0

@Findus23 Ok. Would you also check if plugins/DevicesDetection/images/browsers/UNK.png has the correct size? In the UI tests it seems it's too small (see http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21907/UIIntegrationTest_dashboard1.png)

@sgiehl done

Is this because of my change?
http://builds-artifacts.piwik.org/piwik/piwik/3.x-dev/21908/Dashboard_reset.png

It works for me:

@Findus23 awesome. No that started failing before

Now we could try to get the other tests fixed if you don't mind.

Fixing the System tests should be easy, they are failing because the expected files are outdated. As some of them include the path to the icons they need to be adjusted. Maybe we could use a regex to replace them all in one.

If you have Git LFS running, you could also update the UI tests - where the changes are expected. Simply download the processed file from the build-artifacts and overwrite the one in tests/UI/expected-screenshots

I guess I'll need your help as I am not familiar with unit tests (except for reading error messages and trying to solve them)
I set up the local tests and try to get the same results as travis.

btw: You can directly edit the pull request by pushing to the browser-icons branch on Findus23/piwik.

No need to set up the tests locally... test output on travis should already indicate which files to change.

@sgiehl unfortunately that are a few thousand lines and I can't just replace "gif" with "png" as there are still some icons left as gif.
Let's see if i missed some: 52cc668
https://travis-ci.org/piwik/piwik/builds/188889221

Shall we leave this one open for further improvements?

Either that or open a new issue. There are still many images missing, of which I'll may update some (#10587 (comment))

But there are lots of single icons (e.g. for buttons) that should be recreated in better quality. (which I can't do)

Well done @Findus23 for your great work 👍 it really makes a difference in user experience and happiness. Users will notice!

Would be great to create a new separate issue to consolidate the follow up work you've identified (missing icons etc). Closing this now as it was merged. We are so looking forward to your next contributions 💯

Thanks, I'm curious what the feedback will be. Ping me if somebody has better images.

I'll create a followup about the other icons.