This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.

Check out a free preview of the full Progressive Web Applications and Offline course:
The "Home Screen Icons" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Instead of having a minified screenshot of an application as a home screen icon, Mike shows how to set custom images as smart device tablet.

Get Unlimited Access Now

Transcript from the "Home Screen Icons" Lesson

>> Mike North: We're starting to get to the way a native app looks and feels. Here's another one, Home Screen Icons, right? We want to have a nice home screen icon, not just a minimized like snapshot of like the layout of the page, that's often what you get by default.

[00:00:15] So here's a little cheat sheet for you for different. I don't need to, yes I've got the seven on there, but a cheat sheet for square dimensions that you need to have for all of these devices. The big nit picky thing is the image has to be exactly the right size or the device will often behave as if you provided no image at all.

[00:00:38] The stars have to align just perfectly. You have to give it an image, it has to be able to download it and then it has to be the perfect size. It will not try to resize it for you. It wants it, the idea is they're encouraging people to make it pixel perfect so these icons look great.

[00:00:54] That is Apple and Android wanting your home screen to look beautiful. So and you create meta tags that look like this for Apple. Older versions of Android have meta tags that you can use, but more and more the way forward is that web app manifests, where you have that icons array and you can specify different things there.

[00:01:16] For things like iOS that don't read this web app manifest yet, there is a great tried and tested library called Add to Home Screen that basically will float down this little bubble. And this little tick at the bottom will point right to the location of the Share button on that specific device for that specific OS version.

[00:01:40] They've gone and figured out exactly what the layout should be. It's even orientation sensitive. So it's basically gonna point to the share button and say tap this, add me, add to the home screen. This has been around for about ten years. It is still the go to solution.

[00:01:57] It's fantastic. And it's a great example of a library that does something simple, where if we all tried to it ourselves we would leave out a lot of important edge and corner cases. It does one job and it does it really, really well.