Favicon pentru browsere și Google Search: declarare, validare și diagnosticare

seoreport.ro colectează linkurile icon din Server HTML și Rendered DOM, rezolvă URL-urile față de adresa finală a paginii și verifică și /favicon.ico drept fallback convențional. Fiecare candidat unic este solicitat, astfel încât raportul să distingă declarația de o resursă care funcționează efectiv.

Rezumatul separă resursele declarate, valide și verificate. Controalele detaliate acoperă resurse declarate defecte, dimensiuni pătrate, concordanța dintre dimensiunile declarate și cele reale, multiplii de 48 recomandați pentru Google, mixed content și diferențele introduse numai după randarea JavaScript.

• Declarate Candidați găsiți în elementele link, împreună cu fallback-ul convențional atunci când este aplicabil.
• Valide Resurse care returnează un răspuns reușit și pot fi recunoscute drept imagine.
• Verificate URL-uri favicon unice solicitate de auditul resurselor, inclusiv răspunsurile eșuate.

Folosește link rel="icon" în head și păstrează href-ul stabil. Atributele type și sizes sunt indicii care ajută user agent-ul să aleagă dintre candidați; ele nu repară un răspuns incorect și nu redimensionează fișierul sursă. URL-urile relative sunt rezolvate față de base URL-ul documentului, astfel că un element base neașteptat poate trimite cererea în alt loc.

Un set compact include de obicei un SVG scalabil sau un PNG cu dimensiune potrivită, plus un fallback ICO când este necesară compatibilitatea legacy. Resursele specifice platformelor, precum apple-touch-icon sau iconurile din Web App Manifest, acoperă alte suprafețe și nu trebuie considerate înlocuitor universal pentru declarația favicon standard.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Grafica pătrată evită deformarea și decuparea neașteptată. Iconurile raster trebuie să rămână lizibile la dimensiuni mici și să aibă dimensiuni reale potrivite declarației. SVG se scalează curat, dar fișierul trebuie totuși să fie livrat ca imagine validă, iar grafica să rămână recognoscibilă atunci când este redusă.

Google Search cere un favicon pătrat și recomandă dimensiuni multiplu de 48 de pixeli, precum 48×48, 96×96 sau 144×144. Taburile browserelor pot folosi candidați raster mai mici, astfel că un proiect poate furniza legitim mai multe dimensiuni, cu aceeași identitate vizuală.

• PNG Randare raster predictibilă și transparență; declară dimensiuni care corespund fișierului.
• SVG Scalabil și compact pentru grafica potrivită; testează suportul cerut de browserele și platformele proiectului.
• ICO Util drept fallback convențional și capabil să includă mai multe dimensiuni raster într-un singur fișier.
• Google Search Folosește un icon pătrat, crawlable, cu URL stabil și preferă o dimensiune multiplu de 48 de pixeli.

O aplicație randată pe client poate insera sau înlocui linkurile icon după executarea JavaScript. Browserul poate observa schimbarea, dar crawlers, link unfurlers și clienții cu resurse limitate se pot baza pe răspunsul inițial. Declară iconul principal în Server HTML și folosește schimbări JavaScript numai pentru comportamente intenționate legate de stare.

Când valorile din Server HTML și Rendered DOM diferă, inspectează template-urile, bibliotecile de head management, hydration, tranzițiile între rute și scripturile dependente de consent. Declarațiile duplicate pot face clienți diferiți să aleagă candidați diferiți în funcție de suportul pentru format și dimensiune.

Deschide URL-ul exact al iconului din pagina publică finală și inspectează statusul, lanțul de redirect, Content-Type, corpul răspunsului și dimensiunile intrinseci. Corectează path-uri relative greșite, hotlink protection, autentificarea, conținutul HTTP mixt, rescrierile CDN și aplicațiile care returnează o pagină HTML 404 cu status 200.

Favicons sunt păstrate agresiv în cache de browsere, CDN-uri și sisteme de căutare. După publicarea fișierului corectat, golește cache-ul relevant și folosește un URL versionat când resursa s-a schimbat real. Rulează apoi din nou raportul pe producție. Schimbarea în rezultatele căutării nu este imediată, deoarece Google trebuie să recrawleze și să reproceseze iconul.

• 404 sau 5xx Publică resursa la path-ul declarat și verifică dacă fiecare redirect se încheie cu un răspuns imagine reușit.
• HTTP 200 cu HTML Corectează rutarea, autentificarea sau fallback-ul, astfel încât URL-ul să returneze imaginea și tipul media reale.
• Mixed content Livrează iconul prin HTTPS atunci când pagina folosește HTTPS.
• Preview vechi Verifică mai întâi cache-ul browserului și CDN-ului; acordă platformelor externe timp să solicite noul URL.