Favicon pentru Webflow

Încărcarea faviconului Webflow face parte din panoul Setări proiect, care este separat de pânza Designer. Faceți clic pe numele proiectului în tabloul de bord Webflow, apoi navigați la Setări proiect > General. Derulați în jos la secțiunea Favicon & App Icon, faceți clic pe zona de încărcare și alegeți fișierul imagine. Webflow acceptă formatele PNG, ICO și GIF.

Un PNG de 32×32 pixeli este dimensiunea minimă necesară pentru încărcarea faviconului Webflow, dar pornind de la 512×512 produce un rezultat mult mai clar. Webflow reduce eșantionarea imaginii dvs. pentru afișarea filei și orice variante generate de CDN. Oferiți întotdeauna cea mai mare sursă curată pe care o aveți — generatorul facilitează crearea unui PNG de 512×512 din orice logo.

Webflow găzduiește favicon-ul pe propriul CDN cu o adresă URL generată automat (de obicei în formatul uploads-ssl.webflow.com/...). Nu este necesar să furnizați manual o cale CDN. După încărcare, faceți clic pe Salvare și apoi Publicați proiectul. Favicon-ul este injectat la publicare, nu doar la salvare - modificările nepublicate nu sunt vizibile pe domeniul dvs. live.

Fundalurile transparente funcționează corect cu încărcările favicon Webflow. CDN-ul păstrează canalele alfa PNG, astfel încât o pictogramă cu fundal transparent se redă clar în temele de browser în modul întunecat. Dacă logo-ul dvs. are un fundal solid alb sau colorat, va apărea ca o casetă pătrată în filele browserului. Exportați sigla fără umplere de fundal înainte de încărcare.

Instrumentul de încărcare favicon integrat al Webflow nu acceptă fișierele SVG. Dacă doriți o favicon vectorială SVG pentru redare clară la orice scară și suport pentru modul întunecat, adăugați-l prin injectare de cod personalizat. Accesați Setările proiectului > Cod personalizat > Cod principal și adăugați: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. Găzduiește fișierul SVG pe propriul server sau pe un serviciu CDN.

Adăugarea unui apple-touch-icon pentru instalările iOS pe ecranul de pornire necesită, de asemenea, un cod personalizat în Webflow, deoarece încărcătorul încorporat gestionează numai favicon-ul standard. Încărcați apple-touch-icon.png de 180×180 într-o gazdă de fișiere (sau Webflow Assets dacă planul dvs. îl acceptă), apoi injectați `<link rel='apple-touch-icon' sizes='180x180' href='URL_TO_YOUR_FILE'>` în câmpul Setări proiect > Cod personalizat > Cod principal.

Suportul pentru pictograma PWA de la Webflow este limitat în comparație cu cadre precum Next.js. Nu există un generator de manifeste web nativ în Webflow. Pentru asistență completă pentru instalare PWA, creați manual un fișier JSON site.webmanifest, găzduiți-l extern și injectați eticheta de link manifest prin cod personalizat. Includeți intrările PNG de 192×192 și 512×512 în matricea de pictograme manifest.

Dacă construiți un site Webflow pentru un client, favicon-ul este adesea setat târziu în proiect și apoi uitat. Un flux de lucru util este să setați un substituent favicon la începutul proiectului și să îl înlocuiți înainte de transfer. Webflow nu versează istoricul favicon-urilor - odată ce salvați o nouă favicon, cea veche dispare din Setările proiectului, deși poate rămâne accesibilă prin intermediul adresei URL CDN pentru ceva timp.

Site-urile Webflow cu domenii multiple – unde același proiect este publicat pe mai multe domenii personalizate – partajează o singură favicon pentru Setări de proiect. În Webflow nativ, nu există o modificare a faviconului pe domeniu. Aceeași pictogramă apare pe toate domeniile publicate. Dacă aveți nevoie de pictograme pentru fiecare domeniu, utilizați injecția de cod personalizat pentru a suprascrie eticheta de link la pictogramă în mod condiționat (aceasta necesită un CMS Webflow sau o logică personalizată).

Actualizările Favicon din Webflow pot dura timp pentru a se propaga din cauza stocării în cache CDN. După publicarea unui nou favicon, cel vechi poate apărea în browsere timp de 24-48 de ore. Deschideți-vă site-ul live într-o fereastră privată/incognito pentru a vedea pictograma actualizată fără interferențe în memoria cache a browserului local. Dacă publicul dvs. folosește pagini CDN stocate în cache, întârzierea de propagare depinde de setările CDN TTL ale Webflow.

Pentru utilizatorii Webflow Editor (clienți care editează conținut fără acces la Designer), favicon-ul nu poate fi schimbat prin Editor - este blocat în Setările proiectului. Numai colaboratorii cu acces Designer sau proprietarii de cont pot actualiza favicon-ul. Comunicați acest lucru în mod clar clienților, astfel încât aceștia să știe unde să solicite actualizări viitoare favicon.

După ce ați publicat faviconul Webflow, utilizați favicon tester pentru a confirma că se rezolvă pe domeniul dvs. de producție. Comparați rezultatul cu dimensiunea așteptată: 32×32 pentru file, 180×180 pentru iOS dacă ați adăugat apple-touch-icon. De asemenea, consultați ghidul best favicon size pentru a înțelege ce dimensiuni îmbunătățesc scorul de completitudine al pictogramei site-ului dvs.