showNotification: clarify difference between badge, icon, and image

### MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification

### What specific section or headline is this issue about?

parameters

### What information was incorrect, unhelpful, or incomplete?

Currently there are 3 way that you can set images to your notification, [`badge`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#badge), [`icon`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#icon) and also [`image`](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#image)

It's confusing to have so many option to choose from.

### What did you expect to see?

I want to have a image schema of where all the bells and whistles goes where in the notification, how it's going to look like on different devices.

A real live demo would be super useful to see and test how it's going to behave.

### Do you have any supporting links, references, or citations?

### Do you have anything more you want to share?

_No response_

### MDN metadata

Page report details

* Folder: `en-us/web/api/serviceworkerregistration/shownotification`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/serviceworkerregistration/shownotification/index.md
* Last commit: https://github.com/mdn/content/commit/e7bc0ed5466f5834641d75d416fa81886cf6b37e
* Document last modified: 2025-09-24T12:28:15.000Z