Mai am nevoie de un favicon.ico sau este suficient PNG?
ICO este un format de director care înglobează 16, 32 și 48 într-un fișier de 4,6 KB. Ce conține, de ce PNG nu îl înlocuiește și cele șapte fișiere de livrat.
La fiecare câțiva ani, cineva declară favicon.ico mort. Apoi, un cititor de feed-uri sau un vechi shortcut Windows cere /favicon.ico, primește un 404 și afișează un glyph de pagină goală. Livrarea ICO costă 4,6 KB. Asta este întreaga argumentație și motivul pentru care generatorul nostru de iconi încă scrie unul.
Furnizează alpha.png, o imagine de 900x606 cu transparență, și ies șapte fișiere: favicon.ico la 4,6 KB, favicon-16x16.png la 521 B, favicon-32x32.png la 1,4 KB, apple-touch-icon.png la 28,4 KB și două PNG-uri android-chrome la 31,9 KB și 196 KB, plus un site.webmanifest de 371 B. Browserul tău scrie toate cele șapte. L-am construit astfel pentru că această aplicație nu are deloc rute API, ceea ce este propoziția pe care orice site de favicon pe server nu o poate spune despre sine.
Ce conține de fapt un fișier .ico?
ICO este un format de director. Fișierul se deschide cu șase octeți: un cuvânt rezervat setat la 0, un cuvânt de tip setat la 1 pentru iconi și un număr de imagini care urmează. După aceea vine o intrare de 16 octeți pentru fiecare imagine, care conține lățimea, înălțimea, numărul de culori, un octet rezervat, planuri de culoare, biți pe pixel, lungimea în octeți a datelor imaginii și offset-ul său de la începutul fișierului. Apoi payload-urile, concatenate. Articolul arhivat despre Iconi al Microsoft din 1995 documentează cele două structuri ca ICONDIR și ICONDIRENTRY, iar acestea nu s-au schimbat.
Lățimea și înălțimea primesc fiecare un octet, motiv pentru care 256x256 trebuie stocat ca 0 și de ce nimic mai mare de 256 nu se încadrează în director. Encoderul nostru scrie 1 plan de culoare și 32 biți pe pixel pentru fiecare intrare, iar fiecare payload este un PNG simplu. Specificația din 1995 descrie un DIB urmat de o mască AND de 1 bit pentru transparență, motiv pentru care iconiile antice aveau acele margini aspre. Trei imagini înseamnă 6 octeți de antet plus 48 de octeți de director. Asta înseamnă 54 de octeți de contabilitate, iar tot restul din cei 4,6 KB sunt date PNG.
De ce un favicon.ico conține 16, 32 și 48?
Acestea sunt cele trei dimensiuni pe care le înglobează, iar ele nu sunt arbitrare. Același document Microsoft le spune dezvoltatorilor să includă 16x16, 32x32 și 48x48 în fiecare resursă de iconi, apoi detaliază regula de selecție: imaginea cea mai apropiată ca dimensiune de dimensiunea solicitată câștigă. Bara de taburi cere 16. Pe un display 2x, același slot de 16 pixeli CSS vrea 32 de pixeli reali, iar un shortcut Windows cere 48. Dacă ICO-ul tău ar conține doar 16, un shortcut ar obține o imagine de 16 px întinsă la 48, și ar arăta exact așa.
Dacă browserele citesc PNG, de ce să livrăm ICO-ul deloc?
Pentru că cele două sunt descoperite în moduri diferite. Snippet-ul de patru linii pe care ți-l oferă instrumentul nostru numește fișierele PNG cu tipuri și dimensiuni explicite, iar orice client care analizează `<head>` va lua acelea. Referința `<link>` de la MDN arată aceeași formă, mai multe linkuri de iconi ale căror atribute permit browserului să aleagă. Standardul HTML permite, de asemenea, unui agent utilizator să caute /favicon.ico pe cale atunci când nu este declarat niciun link de iconi, iar multe lucruri care solicită URL-ul tău nu citesc niciodată markup-ul tău. Favicon-urile SVG sunt tentante aici, iar caniuse le plasează la 90,49% suport global, cu Safari doar preluându-le în versiunea 26.0. Asta lasă un adevărat coadă.
Care sunt cele șapte fișiere și ce greutate au?
| Fișier | Pixeli | Dimensiune | Cine îl citește |
|---|---|---|---|
| favicon.ico | 16, 32 și 48 înglobate | 4,6 KB | fallback-ul căii /favicon.ico, shortcut-uri Windows |
| favicon-16x16.png | 16x16 | 521 B | bara de taburi la 1x, printr-un tag link |
| favicon-32x32.png | 32x32 | 1,4 KB | bara de taburi la 2x, printr-un tag link |
| apple-touch-icon.png | 180x180 | 28,4 KB | ecranul de start iOS, printr-un tag link |
| android-chrome-192x192.png | 192x192 | 31,9 KB | array-ul de iconi din manifest |
| android-chrome-512x512.png | 512x512 | 196 KB | array-ul de iconi din manifest |
| site.webmanifest | n/a | 371 B | prompt-ul de instalare |
512 domină. Adaugă ICO-ul, ambele PNG-uri mici, apple-touch-icon și 192 împreună și ești sub 67 KB combinate, față de 196 KB pentru acel fișier. Merită să știi care dintre acestea îți costă ceva la o vizualizare a paginii, pentru că doar ICO-ul și cele două PNG-uri mici sunt în joc acolo.
De ce logo-ul meu transparent stă pe un pătrat alb?
Pentru că generatorul pictează canvasul înainte de a desena arta ta, iar umplutura implicită este #ffffff. Acea control este un input de culoare, așa că există întotdeauna o culoare sub. Setează-l pe hex-ul brandului tău și întreaga setare se potrivește cu site-ul tău. alpha.png a intrat cu un canal alfa și fiecare dintre cele șapte imagini a ieșit opacă, ceea ce îi surprinde pe cei care se așteaptă la un favicon transparent.
Slider-ul de margine variază de la 0 la 30 la sută și introduce arta ta cu acea parte din fiecare margine a iconului, astfel încât la 10 procente un icon de 32 px păstrează o margine de 3 px pe fiecare parte. Asta este o cantitate vizibilă la acea scară. Sursele non-pătrate primesc letterboxing: un logo de 900x606 își păstrează raportul de aspect și primește bare de fundal deasupra și dedesubt. Îl poți pătrunde mai întâi dacă te deranjează. Cropper-ul are un preset 1:1, acceptă un fișier pe rând de până la 10 MB și re-encodează formate cu pierderi la o calitate hardcoded de 92. Dacă preferi să redimensionezi decât să decupezi, redimensionatorul are preseturi procentuale la 25, 50 și 75 cu moduri de acoperire, conținere și întindere.
Cum pot converti un ICO înapoi într-un PNG?
Folosește ICO to PNG. Acesta analizează containerul, parcurge intrările de director și păstrează pe cea cu cea mai mare lățime, apoi o scrie ca PNG. Îndreaptă-l spre fișierul de 4,6 KB de mai sus și vei obține o imagine de 48x48, pentru că 48 este cel mai mare lucru înglobat acolo. Nu poate recupera detalii care nu au fost niciodată în fișier. Dacă ai nevoie de ceva mai mare, upscaler-ul rulează Real-ESRGAN în browserul tău și produce întotdeauna PNG; testul nostru small.png la 400x269 a revenit ca 800x538 pe setarea 2x. Dacă reconstrucția sau interpolarea simplă este instrumentul potrivit depinde de ceea ce este iconul. Merită să știi: modelul produce doar 4x intern, așa că 2x este o reducere aplicată ulterior. Converterul nostru acoperă 24 de perechi pe 11 formate și scrie ICO pentru niciunul dintre ele. Iconii vin din generatorul de iconi.
Este un icon de 196 KB prea mare?
Asta este android-chrome-512x512.png, și este cel mai greu lucru din set de departe. Este solicitat atunci când cineva își instalează site-ul ca aplicație, ceea ce este reglementat de specificația W3C Web App Manifest, așa că nu se află pe calea critică a unei încărcări obișnuite a paginii. Îți poți micșora totuși dimensiunea. Compresorul nostru oferă două moduri PNG care se comportă complet diferit: "PNG fără compresie" rulează oxipng la nivelul 3 și rămâne fără pierderi, în timp ce "PNG dimensiune fișier mai mică" cuantizează la o paletă de 256 de culori cu imagequant. Pe alpha.png, 942,4 KB la sursă, trecerea fără pierderi a dat 383,9 KB, iar trecerea pe paletă a dat 98,3 KB. Un logo plat supraviețuiește de obicei 256 de culori fără ca cineva să observe. Compresia elimină de asemenea fiecare bucată de metadate, inclusiv EXIF și ICC, ceea ce pentru un icon este exact ceea ce vrei.
Iată pasul concret următor. Deschide generatorul de iconi, încarcă cea mai mare sursă pătrată pe care o ai (acceptă JPEG, PNG, WebP, AVIF, GIF și SVG de până la 10 MB, un fișier), setează culoarea de fundal pe hex-ul brandului tău, lasă marginea la 0 și generează. Copiază cele patru taguri link în `<head>`, încarcă favicon.ico la rădăcina web-ului tău și ai terminat. Dacă vrei să confirmi că nimic nu a părăsit mașina ta, urmărește tab-ul de rețea în timp ce rulează, sau citește pagina noastră de confidențialitate. Unde aparține fiecare dintre cele șapte fișiere pe serverul tău este scris complet separat.