Favicon Upload with Size Checks

ProNew

Upload a site icon, check that it is square and large enough, and preview it at the sizes browsers use (16, 32 and 180 pixels) on light and dark backgrounds, with exact messages when it fails. Use this when an icon must work at tiny sizes.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

min512

Guide and examples

When to use it

People upload a favicon, app icon or logo mark that is displayed very small.

Do not use it when: For photos or banners, use the general image upload with a crop.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`min`	`number`	`512`	Smallest side in pixels.
`measure`	`(file) => Promise<{ width, height }>`	decode with `Image`	Replace for SVG or ICO files that cannot be decoded.
`onAccepted`	`(file) => void`	-	The icon that passed.

checkFavicon(size, bytes, min?, maxBytes?) is exported.

Accessibility

The rules are stated before choosing; failures are a list of sentences with the real numbers in an alert, and "Use this icon" is disabled until none remain. The preview is still shown so the person can see what is wrong.
Each preview image has alt text naming background and size ("Dark background, 32 pixels"); light and dark swatches are captioned in text.
The picker is a button with a hidden input, so the whole flow works with the keyboard.

Testing

The pattern ships with a Testing Library test (favicon-upload-validate.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

People upload a favicon, app icon or logo mark that is displayed very small.

Do not use it when: For photos or banners, use the general image upload with a crop.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`min`	`number`	`512`	Smallest side in pixels.
`measure`	`(file) => Promise<{ width, height }>`	decode with `Image`	Replace for SVG or ICO files that cannot be decoded.
`onAccepted`	`(file) => void`	-	The icon that passed.

checkFavicon(size, bytes, min?, maxBytes?) is exported.

Accessibility

The rules are stated before choosing; failures are a list of sentences with the real numbers in an alert, and "Use this icon" is disabled until none remain. The preview is still shown so the person can see what is wrong.
Each preview image has alt text naming background and size ("Dark background, 32 pixels"); light and dark swatches are captioned in text.
The picker is a button with a hidden input, so the whole flow works with the keyboard.

Testing

The pattern ships with a Testing Library test (favicon-upload-validate.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.