diff --git a/pds/src/components/HandleBrowser.jsx b/pds/src/components/HandleBrowser.jsx
index b43e936..8a3ff01 100644
--- a/pds/src/components/HandleBrowser.jsx
+++ b/pds/src/components/HandleBrowser.jsx
@@ -1,12 +1,32 @@
import React, { useState } from 'react'
import { listAllCollections } from '../lib/atproto.js'
-const SERVICE_ICONS = {
- 'app.bsky': 'https://bsky.app/favicon.ico',
- 'chat.bsky': 'https://bsky.app/favicon.ico',
- 'ai.syui': 'https://syui.ai/favicon.ico',
- 'tools.ozone': 'https://ozone.tools/favicon.ico',
- 'com.atproto': 'https://atproto.com/favicon.ico'
+const getServiceIcon = (service) => {
+ // Known domain mappings
+ const domainMap = {
+ 'app.bsky': 'bsky.app',
+ 'chat.bsky': 'bsky.app',
+ 'ai.syui': 'syui.ai',
+ 'tools.ozone': 'ozone.tools',
+ 'com.atproto': 'atproto.com'
+ }
+
+ // If in map, use it
+ if (domainMap[service]) {
+ return `https://www.google.com/s2/favicons?domain=${domainMap[service]}&sz=32`
+ }
+
+ // Otherwise, try to infer domain from service name
+ // Format: prefix.domain → domain.tld (e.g., app.bsky → bsky.app)
+ const parts = service.split('.')
+ if (parts.length >= 2) {
+ // Take last 2 parts and reverse
+ const domain = parts.slice(-2).reverse().join('.')
+ return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+ }
+
+ // Fallback: use service as-is
+ return `https://www.google.com/s2/favicons?domain=${service}&sz=32`
}
const groupCollectionsByService = (collections) => {
@@ -212,9 +232,7 @@ export function HandleBrowser() {
onClick={() => handleServiceClick(service)}
className="service-item"
>
- {SERVICE_ICONS[service] && (
-
- )}
+
{service}
{services[service].length} collections · {totalRecords} records