Şeffaf Favicon Kılavuzu

Bir favicon'un sağlam bir arka planı eski görünüyor ve karanlık modla çatışıyor. İşte alfayı uçtan uca nasıl tutacağınız.

3 dk okuma

Check favicons on any website

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

Install Chrome Extension

Şeffaf bir kaynakla başlayın

Logonuzu arka plan dolgusu olmadan PNG-32 olarak dışa aktarın veya SVG kullanın. Bulanıklığın çoğu favicon aracından değil, beyaz arka plandan geliyor.

.ico alfayı destekler

.ico içindeki PNG sıkıştırılmış girişler alfa kanallarını korur. Bitmap girişleri bunu yapmaz; boyuta göre doğru kodlamayı seçen bir araç kullanın.

Karanlık modu yönetme

<style>@media (prefers-color-scheme: dark) { ... </style> bloğuyla bir SVG kullanın ve .ico'nun statik geri dönüşü yönetmesine izin verin.

SSS

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.

İlgili kılavuzlar

Araçları deneyin

Okumaya devam et