Cum să adăugați o favicon la HTML
Adăugarea unui favicon la o pagină simplă HTML este o schimbare pe o singură linie, dar configurația modernă și completă este de șase linii și acoperă iOS, Android, modul întunecat și instalarea PWA.
Eticheta unică pe care fiecare browser o respectă este <link rel="icon" href="/favicon.ico">. Plasați favicon.ico la rădăcina site-ului dvs. și ați terminat în proporție de 80%.
Restul de 20% - variantele apple-touch-icon, PNG, SVG cu suport pentru modul întunecat și un webmanifest - este ceea ce separă o pictogramă implicită de o experiență de brand elegantă.
Cum funcționează
- 1
Generați pachetul de favicon
Utilizați generatorul de pachete FetchFavicon - produce fiecare fișier de care aveți nevoie, plus un marcaj gata de lipire.
- 2
Aruncă fișierele la rădăcina site-ului
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Inserați fragmentul în <head>
Șase etichete <link> + una <meta name="theme-color">.
Încearcă acum
Obțineți fragmentul HTML
Generator de FaviconÎntrebări frecvente
Unde se duc etichetele <link>?+
În interiorul <head>, oriunde — ordinea nu contează atâta timp cât vin înainte de </head>.
Am nevoie de atât .ico, cât și PNG?+
Da. .ico este soluția universală de rezervă; PNG se redă cel mai bine pe ecranele cu DPI ridicat.
Dar modul întunecat?+
Trimiteți o variantă SVG care încorporează o interogare media prefers-color-scheme în blocul său <style>.