Sending Web Push Notifications with Images and Icons

Well-designed notifications with visuals can boost click rates and improve user engagement. AlertElevate supports icons, badges, and large images to make your messages stand out.

Adding an Icon

  • Purpose: Represents your brand or profile image.
  • Default Icon: Set from your project settings for all notifications.
  • Custom Icon: Choose per notification in the dashboard under Advanced settings.

Adding a Badge

  • Purpose: A smaller icon shown when space is limited (e.g., Android status bar, locked screen).
  • Appearance: May appear near the domain name inside notifications.
  • Format: PNG with a transparent background (automatically masked).
  • Setup: Configure a default in project settings or add a custom badge when sending.
  • Fallback: If not set, the browser logo will display.

Adding a Large Image

  • Purpose: Enhances content in supported browsers (e.g., Chrome on Windows and Android).
  • Setup: Add the large image when sending the notification.
  • Recommended Size: At least 800px wide.

Adding Small Icons for Action Buttons

  • You can attach icons to action buttons, but since they’re small and require additional requests, emoji are often a better choice.

Finding Image URLs

  1. Host images on your own website.
  2. Right-click the image in your browser.
  3. Select Copy Image Address to get the URL.

Recommended Formats

  • Icons & Badges: PNG for detail and compatibility.
  • Large Images: JPG for efficient compression.
  • Other formats may be supported but not guaranteed.

Recommended Sizes

  • Main Icon: 192×192px (square).
  • Badge: 96×96px.
  • Large Image: Minimum 800px width.

Performance Tips

  • Use a CDN: Handle high traffic when sending to many recipients. Services like Cloudflare or AWS CloudFront are ideal.
  • Avoid personal file hosts (Dropbox, Google Drive) due to rate limits.
  • Compress Images: Reduce file size for faster loading.
  • Enable HTTP Caching: Minimize repeated downloads.
  • Use HTTPS: Some browsers block insecure image sources.

By following these guidelines, your AlertElevate notifications will look sharp, load quickly, and perform reliably—even at scale.