Ghidul Transparent Favicon

Un fundal solid pe o favicon pare învechit și se confruntă cu modul întunecat. Iată cum să păstrați alfa de la capăt la capăt.

3 min de citit

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Începeți cu o sursă transparentă

Exportați sigla ca PNG-32 fără umplere de fundal sau utilizați SVG. Cea mai mare parte a neclarității provine dintr-un fundal alb copt, nu din instrumentul favicon.

.ico acceptă alpha

Intrările comprimate PNG din .ico își păstrează canalul alfa. Intrările bitmap nu - utilizați un instrument care alege codificarea potrivită pentru dimensiune.

Gestionarea modului întunecat

Trimiteți un SVG cu un bloc <style>@media (prefers-color-scheme: dark) { ... }</style> și lăsați .ico să se ocupe de soluția statică de rezervă.

Întrebări frecvente

How do I make a favicon with a transparent background?

Start from a PNG-32 or SVG with no baked-in background. Export to .ico using a tool that preserves the alpha channel.

Does .ico support transparency?

Yes when entries use PNG compression. Bitmap-encoded .ico entries do not preserve alpha.

How do transparent favicons work in dark mode?

Ship an SVG favicon with prefers-color-scheme styles, and keep a static .ico fallback for browsers that ignore SVG.

Ghiduri aferente

Încearcă instrumentele

Continuă lectura