Cum funcționează formatele Favicon

Știind cum funcționează fiecare format, vă ajută să depanați inevitabila problemă „favicon-ul meu nu se afișează”.

6 min de citit

Check favicons on any website

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

Install Chrome Extension

Containerul .ico

Un fișier .ico este un antet urmat de una sau mai multe intrări de imagine. Fiecare intrare poate fi BMP sau PNG și fiecare are o lățime, înălțime și adâncime de biți.

Browserele analizează directorul, aleg intrarea care se potrivește cu dimensiunea cerută și decodifică doar pe aceea.

PNG în interiorul .ico

Pentru dimensiunile 64×64 și mai mari, compresia PNG reduce dimensiunea fișierului de 5-10x, fără pierderi vizuale. Generatoarele moderne (inclusiv ale noastre) fac acest lucru automat.

SVG favicons

O favicon SVG este un fișier SVG normal. Browserele îl redau ca orice alt SVG, iar blocul <style> poate adapta culorile pe baza preferințelor-color-scheme.

Cum aleg browserele

Dacă expediați mai multe etichete <link rel="icon">, browserele o aleg pe cea care se potrivește cel mai bine cu suprafața (filă vs marcaj vs instalare). SVG este de preferat atunci când este acceptat; .ico este soluția de rezervă.

Întrebări frecvente

What is inside a .ico file?

A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.

How do browsers choose which favicon to display?

Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.

Why use PNG inside an .ico instead of BMP?

PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.

Can I use only SVG for favicons?

Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.

Ghiduri aferente

Încearcă instrumentele

Continuă lectura