Cum pot crea un pachet favicon dintr-un PNG fără a mă înscrie?
Cele șapte fișiere pe care generatorul nostru de pictograme le scrie dintr-un PNG, ce citește fiecare, unde merg pe serverul tău și de ce părțile transparente ies solide.
Un favicon nu este un fișier. Este un set de fișiere, deoarece un tab de browser, un ecran de start iOS și un prompt de instalare Android cer fiecare o imagine diferită la dimensiuni diferite. Aruncă un PNG în generatorul nostru de pictograme și șapte fișiere ies la celălalt capăt. Iată la ce folosește fiecare, unde trebuie să stea pe serverul tău și pe care le poți sări.
Întreaga aplicație rulează în interiorul paginii. Nu există rute API și nicio acțiune pe server în această aplicație, așa că logo-ul tău este citit cu createImageBitmap, pictat într-un OffscreenCanvas și codificat în PNG de browserul tău. Fără cont și fără promisiunea de a șterge creația ta într-o oră.
Care sunt cele șapte fișiere și ce face fiecare?
Șapte fișiere, o imagine sursă. Dimensiunile de mai jos provin dintr-o rulare reală cu alpha.png, un PNG transparent de 900 pe 606 cu 942,4 KB. Numărul de octeți va varia deoarece depinde de cât de mult detaliu supraviețuiește la fiecare dimensiune, dar numele fișierelor și dimensiunile pixelilor sunt fixe prin instrument.
| Fișier | Dimensiune din rularea noastră | Ce îl citește |
|---|---|---|
| favicon.ico | 4,6 KB | Browsere, preluate automat din rădăcina site-ului. Conține 16, 32 și 48. |
| favicon-16x16.png | 521 B | Bara de tab-uri pe ecranele cu densitate standard. |
| favicon-32x32.png | 1,4 KB | Tab-uri și marcaje pe afișaje cu densitate mai mare. |
| apple-touch-icon.png | 28,4 KB | Safari pe iOS când cineva adaugă site-ul tău pe ecranul de start. 180 de pixeli. |
| android-chrome-192x192.png | 31,9 KB | Listat în site.webmanifest ca iconița de 192. |
| android-chrome-512x512.png | 196 KB | Listat în site.webmanifest, folosit pentru prompturi de instalare și ecrane de deschidere. |
| site.webmanifest | 371 B | Browsere care citesc name, short_name, theme_color, background_color și display. |
Nu ai nevoie de toate cele șapte. Dacă tab-urile desktop sunt tot ce te interesează, favicon.ico singur își face treaba. Fișierul Apple devine important în momentul în care cineva salvează site-ul tău pe un ecran de start, iar cele două PNG-uri Android își câștigă locul doar dacă efectiv trimiti manifestul.
Unde merg fișierele și ce trebuie să conțină head-ul?
Toate cele șapte aparțin rădăcinii web, astfel încât să se rezolve ca /favicon.ico, /apple-touch-icon.png și așa mai departe. Pe Next.js, aceasta este folderul public. Apoi, patru etichete merg în head-ul tău: un link apple-touch-icon la 180x180, două linkuri rel=icon pentru 32 și 16, și un link către manifest. Instrumentul tipărește acel fragment lângă rezultate cu un buton de copiere.
site.webmanifest este de 371 de octeți JSON care conține name, short_name, cele două iconițe Android, theme_color, background_color și display setat pe standalone. Cărțile iconițelor din interior sunt scrise absolut, ca /android-chrome-192x192.png, astfel încât parcarea pachetului în /assets/icons/ le rupe în liniște și va trebui să editezi ambele valori src. O altă capcană: lasă ambele casete de nume goale în panou și manifestul va fi livrat cu numele literal "My App", care este ceea ce un telefon va tipări sub iconița ta.
De ce nu este favicon.ico în acel fragment?
Pentru că browserele îl cer fără a fi spus. Nu este nevoie de etichetă. Secțiunea rel=icon a specificației HTML descrie convenția /favicon.ico: când un document nu declară nicio legătură de iconiță, browserul încearcă acel drum rădăcină de unul singur. De aceea .ico funcționează fără markup, și de asemenea de aceea fișierul trebuie să existe la rădăcină. O copie aflată în /images/ nu va fi niciodată solicitată. Dacă ai nevoie cu adevărat de el în altă parte, adaugă un link explicit de iconiță care să indice calea ta și ghicitul se oprește.
Ce este de fapt în favicon.ico?
Un .ico este un container. Al nostru conține trei PNG-uri, renderizate la 16, 32 și 48 de pixeli, în spatele unui header de 6 octeți plus o intrare de director de 16 octeți pentru fiecare imagine, ceea ce reprezintă 54 de octeți de structură în jurul datelor imaginii. Așa cum un singur fișier de 4,6 KB acoperă trei dimensiuni: browserul citește directorul, apoi extrage intrarea care se potrivește cu ceea ce desenează. Dispunerea octeților din acel director și de ce nimic mai mare de 256 nu se potrivește în el este o parte a sa. Windows a înțeles încărcăturile PNG în interiorul .ico încă din Vista, iar browserele actuale le gestionează fără plângeri.
De ce a ieșit PNG-ul meu transparent cu un fundal solid?
Pentru că fiecare canvas de iconiță este umplut înainte ca logo-ul tău să aterizeze pe el. Controlul fundalului este un input type=color, care nu conține canal alfa, așa că umplutura este întotdeauna opacă și implicit este #ffffff. Orice transparență a sursei tale este aplatizată împotriva acelei culori. Nu există opțiune transparentă aici. Alege culoarea care se potrivește cu suprafața pe care va sta marca înainte de a apăsa genera.
Forma contează și ea. alpha.png este 900 pe 606 și iconițele sunt pătrate, așa că arta este adaptată în interiorul pătratului cu axa sa lungă la lățimea maximă, iar culoarea de fundal umple benzile de deasupra și dedesubt. Dacă acele benzi te deranjează, pătrățește imaginea mai întâi în cropper, care acceptă un fișier de până la 10 MB și oferă un preset 1:1 printre cele opt rapoarte de aspect. Slider-ul de margine din panoul de iconițe variază de la 0 la 30% și inserează arta uniform pe toate cele patru laturi.
Este 196 KB prea mult pentru un fișier de iconiță?
196 KB pentru android-chrome-512x512.png pare alarmant lângă un fișier de 521 de octeți de 16px. Două lucruri reduc presiunea. Acea iconiță nu este preluată la o vizualizare obișnuită a paginii, deoarece tab-ul vrea doar pe cea mică, iar PNG-ul direct dintr-un encoder de canvas nu este optimizat: convertToBlob scrie un fișier valid fără niciunul dintre filtrele și paletele pe care le face un optimizer dedicat. Este același encoder de browser care formează dimensiunile fișierelor în măsurătorile noastre JPG la PDF.
Îl poți micșora rulând PNG-ul din nou prin compressor. Pe același alpha.png de 942,4 KB, modul fără pierderi (oxipng nivel 3) a ajuns la 383,9 KB, cu o reducere de 59% fără a schimba un pixel. Modul de fișier mai mic (imagequant) a ajuns la 98,3 KB, cu o reducere de 90%, prin reducerea imaginii la o paletă. Un logo plat cu câteva culori este exact locul unde o paletă nu costă nimic vizibil. Păstrează-l fără pierderi dacă iconița ta este fotografică.
Trebuie să mă înscriu și logo-ul meu este încărcat?
Fără înscriere și nimic de încărcat. Nu există rute API și nicio acțiune pe server în această bază de cod, iar singurele cereri pe care pagina le face sunt fetch-uri de aceeași origine pentru activele sale. Deschide panoul de rețea în timp ce generezi și observă că rămâne liniștit. Pagina noastră de confidențialitate o exprimă în mai puține cuvinte decât acest paragraf.
Limitele sunt un fișier pe rând și 10 MB, iar zona de drop acceptă PNG, JPEG, WebP, AVIF, GIF și SVG. Un SVG este rasterizat mai întâi la cea mai mare dimensiune a propriilor sale dimensiuni sau 512 de pixeli, astfel încât chiar și o sursă de 64px produce totuși o iconiță curată de 512. Acea redare încarcă fișierul într-un element <img>, aceeași cale restricționată care elimină fonturile externe și bitmap-urile legate dintr-un SVG. Totul vine ca un favicon-package.zip conținând toate cele șapte fișiere. Dacă logo-ul tău a sosit ca un export supradimensionat, redimensionează-l mai întâi pentru a nu hrăni un banner de 20 de megapixeli într-un pătrat de 16 pixeli.
Fă asta următorul: deschide generatorul de pictograme, aruncă-ți logo-ul, setează culoarea de fundal pentru a se potrivi cu locul unde va sta iconița, generează, dezarhivează în rădăcina web-ului tău, lipește cele patru etichete în head și adaugă "start_url": "/" la site.webmanifest. Apoi reîncarcă site-ul și uită-te la tab. Dacă versiunea de 16px apare ca o pată, întoarce-te și simplifică marca înainte de a schimba altceva. Notițele Apple Configurarea aplicațiilor web merită citite dacă ecranul de start iOS este prioritatea ta.