Implementation:Langgenius Dify UseAppFavicon
| Knowledge Sources | |
|---|---|
| Domains | Frontend, React_Hooks |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
A React hook that dynamically sets the browser tab favicon based on an application's icon configuration, supporting both emoji and image icon types.
Description
useAppFavicon is a custom React hook that manipulates the document's favicon (shortcut icon) at runtime. It accepts an options object describing the app icon and generates an appropriate favicon. When the icon type is emoji, the hook constructs an inline SVG data URI containing the emoji glyph rendered on a colored rounded-rectangle background. When the icon type is image, it uses the provided icon_url directly. The hook leverages useAsyncEffect from the ahooks library because resolving an emoji code to its character is asynchronous (via the searchEmoji utility). The favicon link element is either reused from the existing DOM or created fresh and appended to the document head.
Usage
Use this hook in client-side components where a Dify application's icon should be reflected in the browser tab. It is typically called in top-level layout or page components for app-specific views such as the chat interface or web app preview.
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/hooks/use-app-favicon.ts
- Lines: 1-44
Signature
type UseAppFaviconOptions = {
enable?: boolean
icon_type?: AppIconType | null
icon?: string
icon_background?: string | null
icon_url?: string | null
}
export function useAppFavicon(options: UseAppFaviconOptions): void
Import
import { useAppFavicon } from '@/hooks/use-app-favicon'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| enable | boolean | No (default: true) | Whether the favicon manipulation is active |
| icon_type | null | No (default: 'emoji') | The type of icon: emoji for glyph-based or image for a URL-based icon |
| icon | string | No | The emoji code string used when icon_type is emoji |
| icon_background | null | No | Background color for the emoji SVG; falls back to appDefaultIconBackground |
| icon_url | null | No | URL of the image icon when icon_type is image |
Outputs
| Name | Type | Description |
|---|---|---|
| (none) | void | This hook does not return a value; it produces a side effect on the document's favicon |
Usage Examples
Setting an Emoji Favicon
import { useAppFavicon } from '@/hooks/use-app-favicon'
function AppPage() {
useAppFavicon({
enable: true,
icon_type: 'emoji',
icon: '1F916',
icon_background: '#FFEAD5',
})
return <div>My App</div>
}
Setting an Image Favicon
import { useAppFavicon } from '@/hooks/use-app-favicon'
function AppPage({ iconUrl }: { iconUrl: string }) {
useAppFavicon({
enable: true,
icon_type: 'image',
icon_url: iconUrl,
})
return <div>My App</div>
}