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.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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>.
Instrumente conexe
Generator de Favicon
Generează un pachet complet de favicon (ICO + PNG-uri) pentru orice dispozitiv și browser.
Convertor PNG în ICO
Convertor online gratuit din PNG în ICO pentru iconițe Windows, pictograme de aplicații și faviconuri de site-uri.
Verificator favicon
Verifică favicon-ul oricărui site — validează dimensiuni, formate și variante lipsă.