# Home screen icon badge counter for notifications?

**URL:** <https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154>\
**Category:** Ask for Help\
**Created:** [April 3, 2025, 11:33am UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154 "2025-04-03T11:33:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [April 3, 2025, 11:33am UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154/1 "2025-04-03T11:33:56Z")

</div>

I would like to add the red badge icon counter onto the home screen icon, to indicate how many unread in-app messages the user has.  
Is there some CSS that could achieve this. These are in app messages only, i’ll use a counter column for messages that the user has not marked as read.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 3, 2025, 2:01pm UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154/2 "2025-04-03T14:01:51Z")

</div>

Gift:

> [@Notification Bell Icon with Unread Message Counter](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156):
>
> Notification Bell Icon I did something with @Atom a few months ago that shows a notification bell icon in Glide apps. Setup Resources [Original discussion thread](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/8)play_button Original discussion thread [AI Library](https://ailibrary.glide.page/dl/da19fa/s/3e72f5/r/4lGUqZXyTbmkJDJqQMdh9w)Implementation Steps 1. Data Structure Create a notification count column in your users table that will store the number of unread notifications. 2. Configure Bell Icon In the bell icon button component, set the title of the action to reference your notification count user column: T…

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [April 3, 2025, 2:17pm UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154/3 "2025-04-03T14:17:27Z")

</div>

@MaximeBaker This looks great, i will try set this up. Just to confirm, the red counter badge with the number of unread messages, is that the home screen icon for the app? The same icon that appears on your phones home screen once you’ve installed the app on your phone? Like the image below?

 ![IMG_4274](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/a/0a0171ac76f8855be1e97d212223c689e0f56c28.jpeg)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 3, 2025, 2:47pm UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154/4 "2025-04-03T14:47:34Z")

</div>

No, this is not the same thing.

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [April 3, 2025, 3:52pm UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154/5 "2025-04-03T15:52:16Z")

</div>

Oh, bummer. I assume your solution is for badge icons within the app?  
Any idea how to do badge notification icons on home screen icons?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 3, 2025, 5:54pm UTC](https://community.glideapps.com/t/home-screen-icon-badge-counter-for-notifications/81154/6 "2025-04-03T17:54:31Z")

</div>

Well, I know it is possible with PWA, but I don’t know how to make this in Glide. I don’t think it is possible to be honest.
