Un favicon HTML fiabil nu depinde de o singură etichetă magică. Folosește un set restrâns de fișiere accesibile și legături plasate în head. Procedura acoperă filele moderne, clienții vechi și scurtăturile mobile fără să înmulțească variantele istorice.
Pregătește fișierele
Pornește de la un simbol pătrat care rămâne lizibil la dimensiuni foarte mici. Pune favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest și fișierele PNG indicate de manifest în folderul public servit la rădăcina domeniului.
O cale precum /favicon.svg este absolută față de domeniu. Rămâne astfel corectă pe /products sau /blog/article, spre deosebire de favicon.svg, care poate fi rezolvat relativ la pagină.
Adaugă elementele în head
Declară mai întâi SVG-ul cu rel icon și type image/svg+xml, apoi ICO-ul cu rel icon și sizes any. Adaugă rel apple-touch-icon pentru iOS și rel manifest pentru instalarea aplicației web.
Tipul trebuie să corespundă fișierului servit efectiv. Nu redenumi un PNG în .ico: conținutul și antetul trebuie să folosească formatul ICO.
| Scop | Relație | Fișier |
|---|---|---|
| Browser modern | icon | /favicon.svg |
| Compatibilitate | icon | /favicon.ico |
| Ecran de pornire iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplicație web | manifest | /site.webmanifest |
Publică fără să strici căile
Deschide direct URL-ul fiecărui fișier după publicare. Răspunsul trebuie să fie o imagine sau un manifest cu un cod de succes, nu o pagină HTML de autentificare sau 404 returnată cu un cod înșelător.
Dacă site-ul se află într-un subdirector, ajustează căile sau baza publică. Inspectează pagina finală în instrumentele pentru dezvoltatori: browserul trebuie să solicite URL-urile așteptate fără redirecționare spre altă gazdă.
Verifică rezultatul
Reîncarcă pagina cu cache-ul dezactivat și inspectează elementele link din DOM-ul produs. Testează apoi o filă, un marcaj și, când este relevant, adăugarea site-ului pe ecranul de pornire al unui dispozitiv real.
Un favicon din rezultatele de căutare respectă și regulile motorului de căutare și programul său de accesare. O pictogramă vizibilă în browser nu garantează, prin urmare, actualizarea imediată în rezultatele de căutare.
Surse primare
Întrebări frecvente
Elementul favicon se pune în body?
Nu. Elementele link care descriu pictogramele și manifestul se plasează în head-ul documentului.
Este suficient un favicon.ico la rădăcină?
Este o rezervă utilă, dar nu descrie o pictogramă Apple Touch sau pictogramele instalabile din manifest. Declară formatele potrivite acestor utilizări.
De ce să folosești o cale care începe cu /?
Pornește de la rădăcina domeniului și împiedică o pagină dintr-un subfolder să caute fișierul în propriul folder.