<commit_before>---
layout: updates/post
title: "Adding a Splash screen for installed web apps in Chrome 47"
published_on: 2015-10-15
updated_on: 2015-10-15
authors:
  - paulkinlan
tags:
  - splashscreen
  - addtohomescreen
featured_image: /web/updates/images/2015/10/splashscreen.png
description: "Chrome 47 introduces a splash screen to web apps added to the homescreen"
---

Over the past year we have focused on letting developers build sites and apps 
that feel like they are installed on the user's system: [Service Worker](/web/fundamentals/primers/service-workers) for 
letting you easily build offline first experiences and Add to Homescreen to give 
your site the presence on the user's device.

The home screen launch process on Android is a great first step, however there was always a 
tell that this wasn't a native-like experience: When you click on the homescreen 
icon the screen would go white until the document was ready to render its first 
frame of the document.  This could take anywhere from 200ms of white up to, 
well, it depends on how quickly you can draw something.  Some poorly designed 
sites can take many seconds to get their first paint and we believe that the 
splash screen increases the perceived performance of loading of your site. 

In Chrome 46 on Android we quietly introduced `background_color` that removes this delay and 
paints the screen with a solid colour until the browser is ready to paint 
something from the web page. This was a good addition, yet it still didn't 
look fully like an app.

Now in Chrome 47 on Android (Beta in October 2015) we are introducing the concept of a 
"splash screen".  

<img src="/web/updates/images/2015/10/splashscreen.gif" style="max-width=100%" />

Try it out on [Voice Memos](https://voice-memos.appspot.com/), 
[Air Horner](https://airhorner.com) or [SVG OMG](https://jakearchibald.github.io/svgomg/).

The splash screen is generated dynamically from information held in the Web App 
Manifest and is a combination of the `name` and background\_color properties 
from the manifest, and the icon in the `icons` array that is closest to 
"128dp" for the device.

128dp is the ideal size for the image on the splash screen as it means no 
scaling will be applied to the image.  Now we web developers don't deal with 
dp's, we use physical pixels or CSS pixels, in the case of splash screen and 
configuration in the manifest only physical pixels are considered.  1dp is 1 
physical pixel at a screen density of 160dpi. 

1dp = 1px at 160 dpi.

128dp at 1x   (160dpi) = 128px  
128dp at 1.5x (240dpi) = 196px  
128dp at 2x   (320dpi) = 256px   
128dp at 3x   (480dpi) = 384px (Equivalent to Nexus 5)  
128dp at 4x   (640dpi) = 512px (Nexus 6 is in between 3 and 4)

If you want to ensure that an icon will always be displayed consider that 48dp 
is the minimum image size we will display, which if you take the maximum density 
display currently supported (4x) then 48 \* 4 = 196px. This is lucky because we 
need to 196px image for Add to Homescreen to work! Yay. Therefore, _I_ would 
recommend **always** having 196px as the minimum sized icon and create 3 other 
versions at 256px, 384px and 512px.<commit_msg>Adding a small amount of messaging about smaller images. #2069<commit_after>---
layout: updates/post
title: "Adding a Splash screen for installed web apps in Chrome 47"
published_on: 2015-10-15
updated_on: 2015-10-15
authors:
  - paulkinlan
tags:
  - splashscreen
  - addtohomescreen
featured_image: /web/updates/images/2015/10/splashscreen.png
description: "Chrome 47 introduces a splash screen to web apps added to the homescreen"
---

Over the past year we have focused on letting developers build sites and apps 
that feel like they are installed on the user's system: [Service Worker](/web/fundamentals/primers/service-workers) for 
letting you easily build offline first experiences and Add to Homescreen to give 
your site the presence on the user's device.

The home screen launch process on Android is a great first step, however there was always a 
tell that this wasn't a native-like experience: When you click on the homescreen 
icon the screen would go white until the document was ready to render its first 
frame of the document.  This could take anywhere from 200ms of white up to, 
well, it depends on how quickly you can draw something.  Some poorly designed 
sites can take many seconds to get their first paint and we believe that the 
splash screen increases the perceived performance of loading of your site. 

In Chrome 46 on Android we quietly introduced `background_color` that removes this delay and 
paints the screen with a solid colour until the browser is ready to paint 
something from the web page. This was a good addition, yet it still didn't 
look fully like an app.

Now in Chrome 47 on Android (Beta in October 2015) we are introducing the concept of a 
"splash screen".  

<img src="/web/updates/images/2015/10/splashscreen.gif" style="max-width=100%" />

Try it out on [Voice Memos](https://voice-memos.appspot.com/), 
[Air Horner](https://airhorner.com) or [SVG OMG](https://jakearchibald.github.io/svgomg/).

The splash screen is generated dynamically from information held in the Web App 
Manifest and is a combination of the `name` and background\_color properties 
from the manifest, and the icon in the `icons` array that is closest to 
"128dp" for the device.

128dp is the ideal size for the image on the splash screen as it means no 
scaling will be applied to the image.  Now we web developers don't deal with 
dp's, we use physical pixels or CSS pixels, in the case of splash screen and 
configuration in the manifest only physical pixels are considered.  1dp is 1 
physical pixel at a screen density of 160dpi. 

1dp = 1px at 160 dpi.

128dp at 1x   (160dpi) = 128px  
128dp at 1.5x (240dpi) = 196px  
128dp at 2x   (320dpi) = 256px   
128dp at 3x   (480dpi) = 384px (Equivalent to Nexus 5)  
128dp at 4x   (640dpi) = 512px (Nexus 6 is in between 3 and 4)

If you want to ensure that an icon will always be displayed consider that 48dp 
is the minimum image size we will display, which if you take the maximum density 
display currently supported (4x) then 48 \* 4 = 196px. This is lucky because we 
need to 196px image for Add to Homescreen to work! Yay. Therefore, _I_ would 
recommend **always** having 196px as the minimum sized icon and create 3 other 
versions at 256px, 384px and 512px.  However, if you want to ensure that the user
is not downloading too much data for the splash screen, especially on a low density
device then you can go lower and Chrome will try to fetch the most appropriate.
{'fraction_non_alphanumeric': 0.05309069032937284, 'fraction_numerical': 0.04331478417807189, 'mean_word_length': 3.9850074962518742, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3399295', 'n_tokens_mistral': 2149, 'n_tokens_neox': 1846, 'n_words': 1029}