start: collapsible link groups (remembered per browser), links filter (f, Enter opens first match), brand marks + saved favicons for bookmarked sites

src/lib/link-favicons.json

@@ -0,0 +1,49 @@
+[
+	"1337xx.to",
+	"8kun.top",
+	"ad.nl",
+	"aeon.co",
+	"aljazeera.com",
+	"apnews.com",
+	"beta.leetify.com",
+	"bloomberg.com",
+	"bogleheads.org",
+	"bsmg.wiki",
+	"coe.psu.ac.th",
+	"coolors.co",
+	"curacao.nu",
+	"desmos.com",
+	"devdocs.io",
+	"en.yna.co.kr",
+	"endchan.org",
+	"euronews.com",
+	"ft.com",
+	"iep.utm.edu",
+	"koreaherald.com",
+	"koreatimes.co.kr",
+	"lesswrong.com",
+	"macvendors.com",
+	"marinetraffic.com",
+	"nodeschool.io",
+	"nos.nl",
+	"npr.org",
+	"nu.nl",
+	"ocw.mit.edu",
+	"overapi.com",
+	"pikminwiki.com",
+	"plato.stanford.edu",
+	"platomania.nl",
+	"projecteuler.net",
+	"random-ize.com",
+	"reuters.com",
+	"secure.e-boekhouden.nl",
+	"systemd.io",
+	"telegraaf.nl",
+	"theverge.com",
+	"tradingeconomics.com",
+	"tutorial.math.lamar.edu",
+	"uboachan.net",
+	"volkskrant.nl",
+	"wiki.kerbalspaceprogram.com",
+	"wsj.com"
+]

src/lib/link-icons.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { existsSync } from 'node:fs';
 import marks from './link-icons.json';
-import { RULES, iconFile, linkIcon } from './link-icons';
+import { RULES, faviconHosts, iconFile, linkIcon } from './link-icons';
 
 describe('link icons', () => {
 	it('picks brand marks by host, port and path', () => {
@@ -39,3 +39,18 @@ describe('link icons', () => {
 		}
 	});
 });
+
+describe('bookmark favicons', () => {
+	it('serves saved favicons by host and has every file', () => {
+		expect(linkIcon('https://nos.nl/')).toEqual({ kind: 'img', src: '/link-icons/nos.nl.png' });
+		for (const h of faviconHosts) expect(existsSync(`static/link-icons/${h}.png`), h).toBe(true);
+	});
+
+	it('prefers brand marks for bookmarked dev sites', () => {
+		expect(linkIcon('https://developers.cloudflare.com/')).toMatchObject({ color: '#F38020' });
+		expect(linkIcon('https://analytics.google.com/analytics/web/')).toMatchObject({
+			color: '#E37400'
+		});
+		expect(linkIcon('https://netflix.com/browse')).toMatchObject({ color: '#E50914' });
+	});
+});

src/lib/link-icons.ts

@@ -1,9 +1,11 @@
 // Icons for /start link and service tiles, picked from the URL (no hotlinking):
 //  - brand marks from simple-icons, trimmed into link-icons.json by scripts/link-icons.ts
 //    (run `bun scripts/link-icons.ts` after adding a `si` rule below),
-//  - favicons saved under static/link-icons/ for brands simple-icons doesn't have,
+//  - favicons saved under static/link-icons/ for brands simple-icons doesn't have (named
+//    rules below, or by host: link-favicons.json lists static/link-icons/<host>.png),
 //  - otherwise a coloured monogram.
 import marks from './link-icons.json';
+import savedFavicons from './link-favicons.json';
 
 export type LinkIcon =
 	| { kind: 'svg'; body: string; color: string }
@@ -81,7 +83,86 @@ export const RULES: Rule[] = [
 	{ host: 'tailscale.com', si: 'tailscale' },
 	{ host: 'backblaze.com', si: 'backblaze', color: '#E21E29' },
 	{ host: '1password.com', si: '1password', color: '#3B66BC' },
-	{ host: 'squarespace.com', si: 'squarespace' }
+	{ host: 'squarespace.com', si: 'squarespace' },
+	// From Stan's browser bookmarks (Oct 2026)
+	{ host: 'analytics.google.com', si: 'googleanalytics', color: '#E37400' },
+	{ host: 'gemini.google.com', si: 'googlegemini', color: '#8E75B2' },
+	{ host: 'news.google.com', si: 'googlenews', color: '#4285F4' },
+	{ host: 'console.cloud.google.com', si: 'googlecloud', color: '#4285F4' },
+	{ host: 'chatgpt.com', si: 'openai' },
+	{ host: 'openai.com', si: 'openai' },
+	{ host: 'perplexity.ai', si: 'perplexity', color: '#1FB8CD' },
+	{ host: 'mistral.ai', si: 'mistralai', color: '#FA520F' },
+	{ host: 'huggingface.co', si: 'huggingface', color: '#FFD21E' },
+	{ host: 'kaggle.com', si: 'kaggle', color: '#20BEFF' },
+	{ host: 'sentry.io', si: 'sentry' },
+	{ host: 'hubspot.com', si: 'hubspot', color: '#FF7A59' },
+	{ host: 'netdata.cloud', si: 'netdata', color: '#00AB44' },
+	{ host: 'awsapps.com', si: 'amazonwebservices', color: '#FF9900' },
+	{ host: 'aws.amazon.com', si: 'amazonwebservices', color: '#FF9900' },
+	{ host: 'office.com', si: 'microsoftoffice', color: '#D83B01' },
+	{ host: 'developer.mozilla.org', si: 'mdnwebdocs' },
+	{ host: 'typescriptlang.org', si: 'typescript', color: '#3178C6' },
+	{ host: 'bun.com', si: 'bun' },
+	{ host: 'nodejs.org', si: 'nodedotjs', color: '#5FA04E' },
+	{ host: 'vite.dev', si: 'vite', color: '#9135FF' },
+	{ host: 'tailwindcss.com', si: 'tailwindcss', color: '#06B6D4' },
+	{ host: 'ui.shadcn.com', si: 'shadcnui' },
+	{ host: 'eslint.org', si: 'eslint', color: '#4B32C3' },
+	{ host: 'react.dev', si: 'react', color: '#61DAFB' },
+	{ host: 'reactnative.dev', si: 'react', color: '#61DAFB' },
+	{ host: 'vuejs.org', si: 'vuedotjs', color: '#4FC08D' },
+	{ host: 'nuxt.com', si: 'nuxt', color: '#00DC82' },
+	{ host: 'astro.build', si: 'astro', color: '#BC52EE' },
+	{ host: 'solidjs.com', si: 'solid', color: '#5A8BD6' },
+	{ host: 'sass-lang.com', si: 'sass', color: '#CC6699' },
+	{ host: 'html.spec.whatwg.org', si: 'html5', color: '#E34F26' },
+	{ host: 'w3.org', si: 'css', color: '#9B6BD6' },
+	{ host: 'nginx.org', si: 'nginx', color: '#009639' },
+	{ host: 'docker.com', si: 'docker', color: '#2496ED' },
+	{ host: 'hashicorp.com', si: 'terraform', color: '#844FBA' },
+	{ host: 'postgresql.org', si: 'postgresql', color: '#4169E1' },
+	{ host: 'redis.io', si: 'redis', color: '#FF4438' },
+	{ host: 'prometheus.io', si: 'prometheus', color: '#E6522C' },
+	{ host: 'git-scm.com', si: 'git', color: '#F03C2E' },
+	{ host: 'stripe.com', si: 'stripe', color: '#635BFF' },
+	{ host: 'rust-lang.org', si: 'rust' },
+	{ host: 'go.dev', si: 'go', color: '#00ADD8' },
+	{ host: 'python.org', si: 'python', color: '#3776AB' },
+	{ host: 'php.net', si: 'php', color: '#777BB4' },
+	{ host: 'swift.org', si: 'swift', color: '#F05138' },
+	{ host: 'pytorch.org', si: 'pytorch', color: '#EE4C2C' },
+	{ host: 'archlinux.org', si: 'archlinux', color: '#1793D1' },
+	{ host: 'nixos.wiki', si: 'nixos', color: '#5277C3' },
+	{ host: 'gnu.org', si: 'gnubash', color: '#4EAA25' },
+	{ host: 'man7.org', si: 'linux', color: '#FCC624' },
+	{ host: 'man.openbsd.org', si: 'tmux', color: '#1BB91F' },
+	{ host: 'code.visualstudio.com', si: 'visualstudiocode', color: '#007ACC' },
+	{ host: 'zed.dev', si: 'zedindustries', color: '#2F7CF6' },
+	{ host: 'owasp.org', si: 'owasp' },
+	{ host: 'levels.fyi', si: 'levelsdotfyi', color: '#788B95' },
+	{ host: 'glassdoor.nl', si: 'glassdoor', color: '#00A162' },
+	{ host: 'news.ycombinator.com', si: 'ycombinator', color: '#F0652F' },
+	{ host: 'lobste.rs', si: 'lobsters', color: '#AC130D' },
+	{ host: '4chan.org', si: '4chan', color: '#3A9A3A' },
+	{ host: 'exercism.org', si: 'exercism', color: '#009CAB' },
+	{ host: 'leetcode.com', si: 'leetcode', color: '#FFA116' },
+	{ host: 'roadmap.sh', si: 'roadmapdotsh' },
+	{ host: 'wolframalpha.com', si: 'wolfram', color: '#DD1100' },
+	{ host: 'plex.tv', si: 'plex', color: '#EBAF00' },
+	{ host: 'netflix.com', si: 'netflix', color: '#E50914' },
+	{ host: 'curseforge.com', si: 'curseforge', color: '#F16436' },
+	{ host: 'bbc.com', si: 'bbc' },
+	{ host: 'theguardian.com', si: 'theguardian' },
+	{ host: 'cnn.com', si: 'cnn', color: '#CC0000' },
+	{ host: 'axios.com', si: 'axios', color: '#7B5CF0' },
+	{ host: 'vox.com', si: 'vox', color: '#DA074A' },
+	{ host: 'washingtonpost.com', si: 'thewashingtonpost' },
+	{ host: 'nytimes.com', si: 'newyorktimes' },
+	{ host: 'mariowiki.com', si: 'nintendo', color: '#E60012' },
+	{ host: 'bulbagarden.net', si: 'pokemon', color: '#FFCB05' },
+	{ host: 'pokemmo.com', si: 'pokemon', color: '#FFCB05' },
+	{ host: 'cloudflareaccess.com', si: 'cloudflare', color: '#F38020' }
 ];
 
 export const iconFile = (img: string) => (img.startsWith('/') ? img : `/link-icons/${img}`);
@@ -109,6 +190,7 @@ export function ruleFor(url: string): Rule | null {
 }
 
 const marksBySlug = marks as Record<string, string>;
+export const faviconHosts = new Set<string>(savedFavicons);
 
 export function linkIcon(url: string, title = ''): LinkIcon {
 	const r = ruleFor(url);
@@ -116,6 +198,7 @@ export function linkIcon(url: string, title = ''): LinkIcon {
 		return { kind: 'svg', body: marksBySlug[r.si], color: r.color ?? 'currentColor' };
 	if (r?.img) return { kind: 'img', src: iconFile(r.img) };
 	const host = parse(url)?.host ?? url;
+	if (faviconHosts.has(host)) return { kind: 'img', src: iconFile(`${host}.png`) };
 	let h = 0;
 	for (const c of host) h = (h * 31 + c.charCodeAt(0)) >>> 0;
 	return {