Customizing Safari Web App Icons and Names

Safari allows users to turn their favorite websites into standalone web apps using the "Add to Dock" feature on macOS and the "Add to Home Screen" feature on iOS and iPadOS. This article provides a complete guide on how to customize the application name and replace the default website icon with your own image across Apple devices. While macOS offers native support for changing both the name and icon directly within Safari, iOS and iPadOS allow direct name changes but require a quick workaround using the built-in Shortcuts app to customize the icon.

Customizing Web Apps on macOS (Add to Dock)

In macOS Sonoma and later, Safari lets you natively change both the name and the icon of a web app during the creation process.

During the Setup Process:

  1. Open Safari and navigate to the website you want to turn into an app.
  2. Click File in the top menu bar and select Add to Dock (or click the Share button in the toolbar and select Add to Dock).
  3. To change the name: Click the text field in the pop-up window, delete the default website title, and type your preferred app name.
  4. To change the icon: Click directly on the current icon shown to the left of the name field. A Finder window will open. Select your desired image file (PNG, JPEG, or ICNS) from your Mac and click Open.
  5. Click Add. Your customized web app will now appear in your Dock and in your Launchpad.

Changing an Existing Web App on macOS: If you already added the web app to your Dock and want to change it later:

  1. Open Finder and navigate to your user Applications folder (press Shift + Command + H, then open the Applications folder).
  2. Right-click the web app and select Get Info.
  3. To change the name: Expand the Name & Extension section, type a new name, and press Return.
  4. To change the icon: Drag your new image file from Finder and drop it directly onto the small current icon at the very top-left corner of the Get Info window.

Customizing Web Apps on iOS and iPadOS (Add to Home Screen)

On iPhone and iPad, Safari allows you to easily change the name of a website shortcut, but it locks the icon to whatever the website developer has set. You must use different methods depending on what you want to customize.

Changing Only the Name:

  1. Open Safari and go to the desired website.
  2. Tap the Share button (the square with an upward arrow) at the bottom of the screen.
  3. Scroll down and tap Add to Home Screen.
  4. Tap the text next to the website icon, hit the X button to clear it, and type your custom name.
  5. Tap Add in the top-right corner.

Changing Both the Icon and the Name (Shortcuts Workaround): Because Safari does not let you tap the icon to change it on iOS, you can use Apple's built-in Shortcuts app to create a fully customized Home Screen web app.

  1. Open the Shortcuts app on your iPhone or iPad.
  2. Tap the + (plus) button in the top-right corner to create a new shortcut.
  3. Tap Add Action.
  4. Use the search bar to find the Open URLs action and select it.
  5. Tap the faded URL text inside the action box and paste or type the full website address you want to open (including https://).
  6. Tap the Share button at the bottom of the screen (or the dropdown arrow next to the shortcut's name at the top) and select Add to Home Screen.
  7. To change the name: Under the "Home Screen Name and Icon" section, tap the text field and type your custom app name.
  8. To change the icon: Tap the colorful shortcut icon to the left of the text field. Select Choose Photo (to pick from your Photo Library) or Choose File (to pick from the Files app). Adjust the crop if necessary and tap Choose.
  9. Tap Add in the top-right corner. The custom icon and name will immediately appear on your Home Screen and will launch your specified website in Safari when tapped.