Icons

[00:00:00]
>> So the next property that is actually really important is icons. So before going to icon, let's switch display to stand alone. And as I mentioned before, it's kind of the one that you want. And then we have the icons property. Icons, it's actually a collection, an array of icons.

[00:00:23]
And the basic icon declaration looks like this. We have SRC, source, like an img tag, and we can point to an icon sizes. This is also following the sizes property in the img tag. So, for example, I can say 100 by by 100. That's how it works. And then the type, where we specify the content type, for example, if it's a PNG image, png.

[00:00:53]
So the spec, the web manifest spec is platform agnostic, which means they don't actually recommend an icon size, or even an icon format. So it's up to you the icons that you wanna set. However, we don't live in the spec ideal world, we live in the real world.

[00:01:19]
And in the real world, we actually need icons in some specific sizes. As of today, the sizes that we need are at least 512 by 512. So the icon must be square. And the only format that is widely supported is PNG, okay? So don't use ico, I-C-O. Well, JPEG, no one is going to use that for icons.

[00:01:47]
But typically the question is SVG. Can we use SVG? I mean, you can add another icon because we can have more than one for SVG. In this case, even if you set an SVG icon, and with the right type, you must set the sizes, which sounds weird because the SVG does not contain an intrinsic size when an icon is set at least.

[00:02:11]
So you actually need to set also one or more icon sizes that you want that SVG to be useful. SVG icons is actually today available only on the latest versions of Google Chrome on desktop. And it's coming on Android. So as of today, when we are shooting this video, it's not even available on Android.

[00:02:32]
So we always need an PNG version. So even in the future, if SVG is widely supported, it will be always necessary to have a fallback png value. So far for my app, I already have some icons in the icons folder, one 512 png, and 1024, okay? So 1024 is useful for desktop, where we have more resolution and the icon can be used in different places.

[00:02:59]
So I will actually point from here to icons, icon 512 png, the sizes will be 512 x 512. That's the spec in HTML. And then I have another icon, 1024 by 1024, okay, like this. So this is how you set the icons. The icons can be in a CDN if you want.

[00:03:24]
So there is no need to have the icon in the same origin as the manifest, so we can point to an external CDN and this will just work. Okay, so now I have this icons, I will come back to Chrome. I'm going to refresh, and now we have less warning messages.

[00:03:44]
And, If I scroll here, I can see my identity, name, short name. We don't have a description yet, we haven't mentioned that. Presentation, start URL, theme color, background color. We haven't mentioned that one, but it seems like we have one. Orientation, display, and then we have the icons.

[00:04:04]
So it seems like from this side, it looks okay. We are still missing some pieces. But let me tell you this, iOS and Firefox, both, they have less strict PWA criteria as compared with Chrome. That means that now we can go and try to install this PWA on an iPhone.

[00:04:30]
So I'm back here in my iOS simulator. And iOS simulator, it's actually a simulator. Yeah, but also we have emulators. I'm not sure if you have ever thought about that. So what's the difference between a simulator and an emulator? For example, the Android SDK includes emulators, but iOS includes simulators.

[00:04:55]
By the way, if you're wondering how to install the simulator, it's part of Xcode there is the IDE to create native apps for iOS. And it's available on your Mac OS. So you need a Mac computer to actually have this simulator. So because it's a simulator, it's an app that looks like an iPhone, but it's not really a built on machine with iOS.

[00:05:18]
On Android, it's actually a built on machine. Because it's a simulator, I can actually run local host 5000 like this. It'll actually get into my web app. So you can see it looks pretty nice on iOS, you can see at the top that I'm seeing this yellow, that's the theme color.

[00:05:44]
Safari 15 supports the theme color metadata. So that's why we have in the status bar, also our color. Let me prove that. Going back to VScode, I'm going to the HTML, and instead of this I'm going to use red. I'm going to refresh. And now you can see that the status bar is red.

[00:06:12]
So that the theme color metadata is also useful today for the browser, not just for when we install the app. I will go back to our theme color. And now I will try to install the app. If you remember to install PWA on iOS, I need to click Share up to home screen.

[00:06:40]
Here we are going to see a couple of things. I don't have an icon. I'm not sure if you realize that the icon that Apple is actually using it's on a screenshot of the current app, it's actually really small, but that's on a screenshot. Maybe you're thinking, well, maybe we have a problem with the manifest and it's not really in the icons.

[00:07:01]
But if you look at the name of the app, it says but it's actually our short name. So Safari is really my manifest. What's the problem then? That Safari ignores the icons in the manifest. It sounds weird, okay? We don't have an official answer from Apple on why, but they have another solution.

[00:07:25]
So the thing is that, icons in the manifest are not being used by Safari. They're going to be used by Android and desktop, but not by Safari. So even if I add this, I have an icon there. I mean, it doesn't look so bad, but it's not the icon, right, it's on a screenshot.

[00:07:44]
And if I open Copel, now you will see that they have an external load experience. So, okay, we have kind of a PWA. Just by setting the manifest will display stand alone and a couple of properties. We still need to solve the icon problem, okay? And we will, but it's kind of there.

[00:08:08]
Maybe if you're looking at the screen, you may be already spotting some other UI issues that we need to solve, and we're going to do that right now. But let's go back to the icon problem. So iOS is not supporting the icon declaration from the manifest. We need to define a link element in the HTML, not in the manifest.

[00:08:31]
And the link element, if you have been in the web field doing websites for a while, you may already know this, because it's called the iOS icon. It's the same. It's a link with a real Apple touch icon, with an href point into the icon that we want.

[00:08:51]
Like this one, just that. It must be a square and png, and please do not add the rounded corners to the png. You know that iOS have rounded corners over the icons, but the OS will do that for you. The OS will apply the mask for you, okay?

[00:09:12]
So it must be square. So first, the icon will not be updated. So even if I refresh, and by the way, how can I refresh my PWA? I don't have a URL bar anymore, I don't have a toolbar from Safari. Do we have a way to refresh? Actually no.

[00:09:31]
So, and that's another challenge, right? Now we are in a standalone app. We own the window. So if you need navigation like a back button, you must provide that within your user interface, within your HTML. Something that you can do to refresh is you can kill the process.

[00:09:52]
If you kill the app like this, and you open the app again, it will load the HTML again. But the app is already installed. It's not going to upgrade my icon. To actually get the icon, we actually need to add this to the home screen again. But before doing that I need to refresh the page, so it can take my new link declaration.

[00:10:24]
At your home screen, and now you can see that my icon appears there. And if I add another icon, I have my there with its own icon, and now it looks much better. Now you can see it says with its own icon on iOS. So as you can see now on iOS we are kind of a PWA.

[00:10:47]
Is it working offline? I don't think so. But as I mentioned before, Safari is less strict in terms of with PWA criteria. So we have already passed the criteria. It already installed the app, even if it's not working offline. On Chrome on Android, and Chrome on desktop, we still need more work to do, okay, to actually make it work.

[00:11:14]
Can we try this on desktop even if you're not passing the criteria? So back in Chrome if I'm going manifest within dev tools, you see that instability is not yet available because we don't have a service worker. That is something that we will do later. But I have a trick for you.

[00:11:33]
When you are in Google Chrome, you can go to the Menu, More Tools, and you can click Create Shortcut. This is just a trick to test how your app looks like right now without writing a service worker, without passing the criteria. So we're going to create a shortcut.

[00:11:50]
Now you can see that it actually has the icon, it's not taking the short name, just the long name. So I can actually show them manually, and I can select Open as Window. This is going to emulate the automatic PWA installation that we will see later when we are passing the criteria, okay?

[00:12:09]
So if I create this, now, you can see, well, let me close the dev tools, that I do have my own window that has the theme color, the yellow theme color, and it looks like an app. And it has its own icon within the system. I can now search in my Mac for and it appears.

[00:12:35]
And it's just an HTML with the manifest and icon and, voila, we have an app on the Mac, and we have an app on Windows, or Linux or Chromebooks. So, well, this trick is not yet possible on Android. To actually install the app on Android, we need to pass the criteria, unless we want a less capable PWA.

[00:13:01]
So let's jump into that discussion. Back on the slides, let's discuss what happens with icons on Android. On Android, we can have two kinds of icons or apps in terms of PWAs. We can have shortcuts or WebAPKs. So let's try to clarify this. Shortcuts, it creates a shortcut to the browser engine.

[00:13:26]
So it's an icon that goes to the browser's engine. It can be Firefox, it can be Edge, it can be Chrome. It includes something known as a browser's badge. I will show you this in a minute. And in this case this icon shortcut, it's installed only at the home screen, not in the launcher.

[00:13:46]
It doesn't appear like all the other apps. So not in the apps list. All the browsers use this method by default. So on Android 8, shortcuts have a little badge. If you look at the screen, every icon, all of these icons are PWAs by the way. So they have a little Chrome badge at the bottom right side of the icon.

[00:14:13]
Also the shape of some icons are kind of weird, okay? We're going to see how to solve that. So typically we don't want that badge. We don't want the icon with a little Chrome icon. So in fact, it's not just Chrome. In this case, you have the same Starbucks PWA, but install using different browsers, okay?

[00:14:35]
We want something better, and that's named WebAPK. It works only if the PWA criteria passes. So we are not there yet, okay? At least the Chromium PWA criteria. And in this case it's a full Android native package, like the Starbucks application that we saw before on my Android.

[00:15:01]
It contains the package, only the apps name, icon, and URL. So the package does not contain my web app, just the link to my web app. And the APK is installed silently. Again, what's an APK? It's the native format on Android for native apps. So it's an APK that will be installed silently, so we are not going to see any warning, any message.

[00:15:29]
We don't need to disable security on the phone, nothing. We will Chrome, we will install that APK silently. And the icon goes to the home screen, and also the launcher, like any other app. It works only with Google Chrome on devices with Play Services. That means that if you have, for example, some of the latest Huawei devices that they don't have Play Services, it's not gonna work.

[00:15:56]
Google Chrome will use shortcuts, not WebAPK. And it's also suitable for Samsung Internet browser when you are on a Samsung device. So if you install the Internet browser on a non Samsung device, for example, I have a pixel, I can install that browser in my pixel, but it's not a Samsung device.

[00:16:14]
So then I won't have WebAPK. And WebAPK is not available on Firefox, Edge, or any other browser. So if you start PWAs with Firefox, you will always get that little badge there. Only Chrome and Samsung Internet can actually create this WebAPK packages. And the icons will appear then in the home screen, in the launcher, and they will appear in Settings.

[00:16:41]
And if you remember they are even listed as being part of the Play Store. As a wrap up for icons, remember to use PNG, color space sRGB, that's the most compatible icon. And it's going to be used for Android and desktop. And if there is no exact icon, the OS will click the closest one and it will resize the icon.

[00:17:05]
The recommended sizes today is 512 by 512. You can also add an Android one, it's 192. There are other sizes, if it's the same icon you don't need to actually do that. But if you're a designer sometimes you actually want a different icon and different resolutions. So if that's the case, you can actually provide more than one.

[00:17:27]
There are some deprecated sizes. That means that if you follow some guidelines that you can find online, they will say that you should provide those sizes. But no one is using those sizes, so don't do that. And also what we do have is some sizes that can be applied for simpler versions of the icon.

[00:17:47]
Sometimes the icon is is complex, so they have complex shapes. Well, then you can create a simpler version, okay, on these sizes that can be used on some special places where it's really small, such as the status bar.