Desktop: Windows 10: add medium sized program icon

Created on 19 Oct 2017  Â·  11Comments  Â·  Source: nextcloud/desktop

Expected behavior

The desktop client should provide a medium sized program icon which is shown in on a startmenu tile.

Current behavior

The desktop client only provides a small sized program icon. As a reference I've added a Firefox and Thunderbird tile:

windows10_nc-logo-zu-klein

Steps to reproduce

  1. Drag and drop the Nextcloud app to the tiles menu.

Log entries

Nothing special has been logged.

Environment

Server Configuration

OS: Linux 3.16.47
Web server: Apache2 2.4.28
Database: MariaDB 10.0.32
PHP version: 5.6.30
Nextcloud version: 12.0.3

Client Configuration

Browser: Mozilla Firefox 56.0
Nextcloud app version: 2.3.2 (build 1) and v2.3.3.1-beta
Operating system: Windows 10 Pro

design good first issue os Windows

Most helpful comment

I'm not a Windows export so I'm not sure what's right and wrong here, but could it be that it's actually Firefox that has a strangely large icon?
startmenu

All 11 comments

@jancborchardt do we have the icon? I believe this can be easily added to the theming files.

@camilasan yep, the icon is at https://github.com/nextcloud/promo/blob/master/Specific%20designs/icon-android.svg – round, and with the dots in the background.

I'm not a Windows export so I'm not sure what's right and wrong here, but could it be that it's actually Firefox that has a strangely large icon?
startmenu

Haha, alright – I will close this then.

@j-ed let us know if this is wrong and other apps except Mozilla ones (Firefox and Thunderbird) also show big icons like that. Looking at @jpnurmi’s screenshot, it seems we are fine. :)

@jancborchardt As @jpnurmi wrote, he's not a Windows expert. As described in the original issue ticket Windows apps should by default provide two different sized icons, a small and a medium size one. From my understanding this change has primary been introduced to make Windows desktops better usable on tablet PCs. Firefox and Thunderbird both support both icons sizes.

These are the small sized icons of Firefox, Thunderbird and Nextcloud - everything is fine:
grafik

These are the medium sized icons of Firefox, Thunderbird and Nextcloud:
grafik

As you can see the Nextcloud app is not providing a medium sized icon and therefore a fallback to the small sized icon is done.
From my point of view we should be aware that there might be reasons to use medium sized icons, at leased e.g. by people with eye problems or only to be able to identify apps better. So why not providing one, it should be an easy task for the developer.

Alright, sure – do you have more info about it, like what dimensions are needed? Thanks :)

I think the following information will answer your question in detail and and also provides recommendations how the different tiles should look like:
https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos

I made the necessary changes / files in an IMHO appropriate manner and leave them here as proposal so this can get finished soon. For tldr; look at the files and just read the bottom line.

Background/Summary:

Desktop applications like FF/TB etc. accomplish the tile style control by the placement of a special file in the installation folder (besides the executable). Windows looks out for a file called [programname].VisualElementsManifest.xml and checks if content. There are strict rules what this file may and must contain. Necessary if file is used:

  • Backgroundcolor of tile
  • (Text) Foregroundcolor of tile

That said, I propose these to properties as an example because I like them (Text 'light', background dark blue #293976. They can be changed, but have to be there. For more infos see [1] and [2]. Even though the title of [1] states 'runtime apps' this methods works for all kind of applications.

Old (current) logo:

Nextcloud_OldTile

Nextcloud_OldTile_small

Option 1: Full-Tile logo

Based on the assumption that we want to keep the text ('Nextcloud' on tile) we have to consider readability when this text may collide with the bigger logo. One option is to scale the flat SVG-version across the whole 150px-Tile as the logo has a nice blue background already:

Nextcloud_NewTile_flat_medium

Nextcloud_NewTile_flat_small

Option 2: 'Boxed' (current) logo, but well placed

I rescaled and positioned the current logo for both sizes (150px with a little border and slightly shifted to the top to stay in harmony with the text)
):

Nextcloud_NewTile_boxed_medium

Nextcloud_NewTile_boxed_small

You can find both variants of the corresponding manifest file as well as the generated assets attached. Pathes are based on the fact that I placed the assets in the 'resources' folder in my existing installation for testing. For the flat version, the same asset for 70 & 150px entry is used.

One more thing: If you're trying to test this or want to make your own variants: Windows needs a trigger to update the tile specs, just changing the assets and updating the manifest won't result in anything. The easiest way I found is to rewrite the timestamp of the corresponding link (in the start menu folder), this triggers an update. Powershell variant:

(ls "$env:ProgramData\Microsoft\Windows\Start Menu\Programs\Nextcloud.lnk").lastwritetime = get-date

NC_TileIcon.zip

Edit: The reason I didn't make a commit to address this that the current packaging strategy isn't really well documented and I have no clue what's the actual process (and so: where to add these files and which routines to edit).

[1] [How to customize Start screen tiles for desktop apps](https://docs.microsoft.com/en-us/previous-versions/windows/apps/dn449733(v=win.10))
[2] [App icons and logos](https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos)

Update: Nevermind, I think I got it now with the 'new' repository regarding the packaging process.

If this gets acknowledged / polished here, I can do a corresponding PR with changes to _desktop_ (resource files) and _client-building_ (packaging/distribution).

@camilasan would be nice if you could take a look at this some time

Here are new assets with the updated logo, as I noticed after first seeing this issue. Thanks to the promo branch they are also based on the svg version (thus pixel perfect). Only change I made to the logo is a slight rescale and shift upwards for the 150px variant.

Nextcloud_NewLogo_Shifted

Nextcloud_NewLogo_Centered_small

tileassets_newlogo.zip

Closing this issue thanks to #1401 :heart:

Was this page helpful?
0 / 5 - 0 ratings