Cum se folosește

Alegeți Litere și introduceți unul sau două caractere cu culorile dvs. sau alegeți Imagine și selectați un logo (ideal pătrat, de cel puțin 512 px).
Verificați previzualizările pentru fiecare dimensiune, în special 16 și 32 px, care apar în filele browserului.
Descărcați arhiva ZIP și încărcați fișierele din ea în rădăcina site-ului dvs.
Lipiți etichetele HTML în secțiunea head a paginilor dvs. și ajustați numele din site.webmanifest dacă este necesar.

Cum funcționează

Browserele și dispozitivele caută pictogramele în locuri diferite. Setul generat aici acoperă cazurile obișnuite: favicon.ico cu imagini de 16, 32 și 48 px pentru filele browserului, marcaje și software-ul mai vechi care solicită automat /favicon.ico; fișiere PNG de 16 și 32 px la care se face referire prin etichete link; un apple-touch-icon de 180 × 180 folosit atunci când cineva adaugă site-ul tău pe ecranul de pornire al unui iPhone sau iPad; și pictograme de 192 și 512 px la care se face referire din site.webmanifest pentru ecranele de pornire Android și aplicațiile web instalabile.

Fișierul favicon.ico stochează pictogramele ca imagini PNG într-un container ICO, pe care orice browser actual și Windows Vista sau o versiune ulterioară îl pot citi. Fișierele ICO și ZIP sunt asamblate de codul din această pagină; nimic nu este trimis către un server.

Dimensiunile mici cer un design simplu: la 16 × 16 pixeli, liniile subțiri și textul mic dispar, așa că o literă îngroșată sau un logo simplificat funcționează mai bine decât un logo complet cu text. Imaginea este redimensionată în mai multe etape de calitate ridicată. Apple-touch-icon primește întotdeauna o culoare de fundal solidă, deoarece iOS umple zonele transparente cu negru, iar iOS își rotunjește singur colțurile.

După încărcarea unor pictograme noi, browserele pot continua să afișeze o vreme faviconul vechi, deoarece îl păstrează agresiv în cache. O reîmprospătare forțată sau deschiderea directă a /favicon.ico ajută de obicei.

Exemple

Pictogramă cu litere pentru un proiect nou

Scrierea „TG” cu litere albe pe un pătrat rotunjit verde închis oferă o pictogramă curată care rămâne lizibilă la 16 × 16 px într-o filă de browser, fără a necesita un logo proiectat.

Pictogramă dintr-un logo existent

Un logo PNG de 1024 × 1024 cu fundal transparent, setat pe Încadrarea întregii imagini, produce pictograme transparente pentru file și un apple-touch-icon pe culoarea brandului tău.

Logo lat

Pentru o siglă text de 1200 × 300, decuparea centrului păstrează doar literele din mijloc. Încadrarea întregii imagini păstrează totul, dar o face foarte mică; de obicei, o siglă pătrată separată arată mai bine.

Întrebări frecvente

Mai am nevoie de favicon.ico?

Este în continuare util. Unele browsere, cititoare de feeduri și unelte solicită /favicon.ico din rădăcina site-ului chiar și fără un tag link. Browserele moderne folosesc și pictogramele PNG referite în HTML.

Unde plasez fișierele?

Încărcați-le în folderul rădăcină al site-ului, lângă pagina principală, astfel încât /favicon.ico și celelalte căi din HTML să funcționeze. Dacă folosiți un subfolder, modificați căile din etichetele link și din site.webmanifest.

De ce apare în continuare vechiul meu favicon?

Browserele stochează favicon-urile separat și pentru mult timp. Încercați o reîmprospătare forțată, deschideți /favicon.ico într-o filă nouă sau verificați într-o fereastră privată. Redenumirea fișierelor, de exemplu favicon-v2.ico, forțează de asemenea reîncărcarea.

Creează acest instrument un favicon SVG?

Nu. Creează fișiere PNG și ICO, care funcționează peste tot. Dacă aveți deja un logo SVG, îl puteți adăuga manual cu o etichetă link de tip image/svg+xml, în plus față de aceste fișiere.

Confidențialitate

Pictogramele, fișierul ICO și arhiva ZIP sunt create în browserul dvs. Imaginea și textul dvs. nu sunt încărcate, stocate sau incluse în analize.