Skip to content

3. Home screen icons

Brian Dashore edited this page Jun 9, 2022 · 1 revision

Homescreen shortcuts

Asobi makes adding your favorite PWAs to the homescreen possible. It is very easy to get started and this requires some knowledge on how the Shortcuts app on iOS works. If you don't know how to create shortcuts, this guide will help you.

Creating the shortcut

  1. Create your new shortcut

  2. Add an Open URL action

  3. Paste the URL of the website your want into the blank field

  4. Change http:// or https:// to asobi:// so the shortcut auto-opens Asobi

  5. Save the shortcut

Grabbing the website's favicon

This is not required, but if you want the homescreen icon to have the website icon, follow these steps.

Websites usually share an icon for Safari to add on the homescreen called the apple-touch-icon. Asobi looks for this icon and saves it to your device for creating a shortcut.

Steps:

  1. Navigate to the website in Asobi

  2. Open the library menu and navigate to Actions

  3. Click the Save website icon button

  4. If a favicon is present, the icon will save into Asobi's folder in the Files app (an alert should pop up)

Adding the shortcut to homescreen

  1. Open the Shortcuts app

  2. Hold on the shortcut you previously created

  3. Select the Share button

  4. Select the Add to homescreen action

  5. If you want to add an icon, tap the image in the box with the blue border and select Choose File

  6. Navigate to the Asobi directory (under the browse tab)

  7. Navigate to the favicons folder

  8. Select your favicon, this should dismiss the file picker

  9. Click Add in the shortcuts app

  10. The icon should be on your homescreen!