Ce fișiere favicon are nevoie un site și ce dimensiuni au

Un site are nevoie de un set mic de fișiere de icon, iar majoritatea deciziilor țin de dimensiune. Pune un favicon.ico cu imagini de 16, 32 și 48 de pixeli în rădăcina site-ului, pentru taburile browserului și Windows. Adaugă o iconiță Apple touch de 180 px pentru ecranele de pornire de pe iPhone și iPad, și iconuri PNG de 192 și 512 px, listate într-un manifest de aplicație web. Generatorul de favicon le creează pe toate dintr-un singur logo și scrie liniile HTML pe care le lipești în paginile tale.

Fișierele și dimensiunile lor

Arhiva ZIP pe care o descarcă generatorul conține toate cele șapte fișiere. Fișierul favicon.ico este alcătuit din trei imagini PNG, de 16, 32 și 48 de pixeli, stocate într-un singur fișier. Fiecare icon este același logo desenat mai mic. Generatorul lucrează dintr-o versiune de 512 pixeli a imaginii tale și face fiecare dimensiune din ea.

Liniile HTML

Generatorul scrie patru linii pentru secțiunea head a paginilor tale:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Prima linie indică favicon.ico și îl declară de 48 pe 48. A doua dă PNG-ul de 32 px. A treia numește iconița Apple touch, iar a patra indică manifestul, unde sunt listate iconurile de 192 și 512 px. PNG-ul de 16 px este în arhivă, dar nu în aceste linii. Browserele caută și singure /favicon.ico, deci fișierul va fi găsit chiar dacă prima linie lipsește. Păstrează căile așa cum sunt scrise, dacă fișierele tale nu se află în alt loc.

De ce dimensiunile mici cer forme simple

La 16 pe 16 pixeli, un icon are 256 de pixeli în total. Unul de 48 px are 2.304, iar sursa de 512 px are 262.144. Cea mai mare parte din detaliile unui logo dispar până ajung la 16 pixeli, deci o linie subțire sau un cuvânt mic devine o pată. Folosește un semn simplu sau una-două litere cu contrast puternic.

Opțiunea cu litere acceptă una sau două caractere și le desenează mari, în mijlocul iconului, micșorându-le dacă sunt prea late. Formele sunt Pătrat, Rotunjit și Cerc. Previzualizarea arată rezultatele de 16, 32, 48, 180 și 512 px una lângă alta, plus taburi luminos și întunecat, ca să poți judeca dimensiunile mici înainte de descărcare. Previzualizările se actualizează pe măsură ce schimbi forma, marginea sau fundalul, ca să încerci fiecare setare mai întâi.

Margine, fundal și iconița Apple

Marginea are trei setări: Fără margine, Mică și Mare. Mica lasă 10 la sută din icon gol pe fiecare parte, iar Mare lasă 20 la sută. În modul imagine, Fără margine decupează poza la pătratul central, deci capetele unui logo lat se pierd. Setările cu margine încadrează întreaga imagine în pătrat.

Alegerile de fundal sunt Transparent, Alb și Personalizat, iar Transparent este implicit. Iconița Apple touch este mereu opacă. În modul imagine, zonele ei transparente iau fundalul ales, sau alb dacă fundalul este Transparent. În modul litere, ele iau culoarea de fundal a literei. Zonele transparente dintr-o iconiță Apple touch pot apărea negre pe iPhone și iPad, de aceea generatorul le umple. Celelalte dimensiuni păstrează transparența aleasă. De ce un PNG transparent devine negru explică cauza.

Un favicon este pătrat, deci un logo lat are nevoie mai întâi de un cadru pătrat. Creatorul de fotografii pătrate încadrează întreaga imagine într-un cadru 1:1, cu o bordură estompată, albă, neagră sau personalizată, astfel încât nimic să nu fie tăiat. Redimensionare imagine setează pixeli exacți. Cu Păstrează proporțiile activat și ambele laturi completate, imaginea se încadrează în casetă fără distorsiuni. Rapoartele de aspect ale fotografiilor explicate acoperă formele obișnuite.

Schimbări care durează până se văd

Browserele păstrează favicon-urile într-un cache. Un fișier modificat la aceeași adresă poate arăta mult timp vechiul icon, deci o reîncărcare obișnuită nu este de multe ori suficientă. Deschide direct adresa iconului ca să confirmi că fișierul nou este pe server, apoi reîncarcă pagina ocolind cache-ul. Dacă vechiul icon apare în continuare, dă noului fișier un alt nume și actualizează linkul ca să indice spre el.

Cum se face cu fixmint

1. Alege Imagine și trage logo-ul tău în casetă, sau alege Litere și scrie una sau două caractere.
2. Setează Margine la Fără, Mică sau Mare, și Fundal la Transparent, Alb sau Culoare personalizată.
3. Verifică iconurile de 16, 32 și 48 px pe taburile luminos și întunecat, și previzualizările de 180 și 512 px.
4. Apasă Descarcă ZIP pentru toate cele șapte fișiere, sau Descarcă favicon.ico pentru acel fișier.
5. Apasă Copiază HTML și lipește liniile din HTML pentru head în secțiunea head a fiecărei pagini.

Cazuri speciale

• Imaginea ta rămâne pe dispozitivul tău. Generatorul creează iconurile în browser, iar nimic nu este încărcat.
• Litere de două caractere. Sunt acceptate două caractere și sunt desenate mai mici ca să încapă ambele, ceea ce le face mai greu de citit la 16 px decât o singură literă.
• Nume de fișiere. Păstrează numele folosite în HTML, pentru că linkurile indică spre ele.
• Fișiere ilizibile. Dacă o imagine nu poate fi transformată în iconuri, generatorul afișează mesajul „Nu am putut crea iconurile din această intrare. Încearcă o altă imagine.” și golește rezultatele. Încearcă un alt fișier sau salvează din nou imaginea într-un format comun.