FaviconLetter

A site icon with a letter fallback, for browser tabs, bookmarks and link lists. The letter is the first one of the host, without www.

FaviconLetter

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, FaviconLetter

Example Domain
Preview
Documentation

Dark theme, FaviconLetter

Example Domain
Preview
Documentation

High contrast theme, FaviconLetter

Example Domain
Preview
Documentation

UsageLink to the section Usage

tsx

import { FaviconLetter } from '@skribly/ui/brand'

tsx

<FaviconLetter site="https://www.example.com" src="https://www.example.com/favicon.ico" />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Decoration by default, because the page title is written next to it.
A favicon that fails to load falls back to the letter.
Its size is in rem and follows the text size.

This demo runs through axe in all three themes on every test run. See what the tests check.