CodeKitHubKas ir šis rīks?
favicon.ico nav vienkārši mazs attēls — tas ir konteinerformāts, kas var saturēt vairākus vienas ikonas izmērus vienā failā, lai pārlūks, uzdevumjosla vai grāmatzīmju josla varētu izvēlēties to izšķirtspēju, kas izskatās visasāk konkrētajā vietā, kur to rāda. PNG pārdēvēšana par favicon.ico to nedod: tas ir viens attēls ar nepareizu faila paplašinājumu, un, kaut arī daži pārlūki to pieļauj, daudzi rīki, meklētājprogrammas un vecāki pārlūki, kas lasa neapstrādātus baitus, sagaida īstu ICO konteinera struktūru un vai nu neizdodas, vai atgriežas pie tukšas ikonas.
Šis rīks veido īstu ICO konteineru: tas attēlo tavu SVG 16×16, 32×32 un 48×48 izmērā, katru iekšēji kodē kā PNG un iepako visus trīs vienā derīgā favicon.ico failā, izmantojot to pašu PNG-iekš-ICO formātu, ko atbalsta visi pārlūki un OS kopš Windows Vista. Līdzās tam tu iegūsti atsevišķus PNG failus 180×180 izmērā (izmērs, ko iOS izmanto ikonai, kad kāds pievieno tavu vietni sākuma ekrānam) un 192×192 / 512×512 izmērā (izmēri, ko Android un PWA instalēšanas uzvednes ņem no tava tīmekļa lietotnes manifesta).
Kāpēc to izmantot?
- Izveido patiesi derīgu daudzizšķirtspējas favicon.ico, nevis pārdēvētu PNG.
- Aptver visus ikonu izmērus, kas nepieciešami reālai izvietošanai, vienā piegājienā: 16, 32, 180, 192, 512px.
- Gatavs ielīmējams <head> HTML kods — nekāda minēšana par rel/sizes/type atribūtiem.
- Nekvadrātiski SVG tiek centrēti caurspīdīgā kvadrātā, nevis izstiepti.
- Viss tiek attēlots lokāli tavā pārlūkā; SVG netiek augšupielādēts.
Kā to lietot
- Uzklikšķini uz lauka vai nomet tur savu SVG logotipa failu.
- Rīks automātiski attēlo to visos favicon izmēros — nav jāiestata nekas.
- Lejupielādē favicon.ico savas vietnes saknei, plus atsevišķas PNG ikonas.
- Nokopē HTML kodu un ielīmē to savas lapas <head> sadaļā.
Piemērs
Ievade
logo.svg — uzņēmuma zīme, 3 KB vektorsIzvade
favicon.ico (16/32/48px apvienoti), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngViens SVG iekšā, visi ikonu faili, kas nepieciešami reālai izvietošanai, ārā.
Kurš ikonas izmērs tiek izmantots kur
| Fails | Izmērs | Lietojums |
|---|---|---|
| favicon.ico | 16/32/48px (apvienoti) | Pārlūka cilne, grāmatzīmju josla, uzdevumjosla |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Rezerves variants pārlūkiem, kas dod priekšroku PNG favicon |
| apple-touch-icon.png | 180×180 | iOS sākuma ekrāna ikona, kad vietne pievienota sākuma ekrānam |
| icon-192.png | 192×192 | Android sākuma ekrāna ikona, tīmekļa lietotnes manifests |
| icon-512.png | 512×512 | PWA instalēšanas uzvedne, Android palaišanas ekrāna ikona |
Kāpēc svarīgs ir SVG avots
Tā kā SVG glabā formas kā matemātiku, nevis pikseļus, tā attēlošana no jauna gan 16px, gan 512px izmērā sākas no tiem pašiem trajektoriju datiem — lielajā galā nav palielināšanas artefaktu, un mazajā galā rīkam nav jāizdara piespiedu kompromisi ar pikseļu piesaisti. Ja tev ir tikai PNG logotips, šis pats rīks nepalīdzēs; vispirms konvertē vai izveido logotipu no jauna kā SVG, jo mazas PNG palielināšana līdz 512px dotu tikai izplūdušu rezultātu.
Biežāk uzdotie jautājumi
Kāpēc gan vienkārši nepārdēvēt PNG par favicon.ico?
.ico failam ir sava binārā konteinera struktūra (ICONDIR virsraksts, kas apraksta, cik attēlu tas satur, kam seko katalogieraksts par katru attēlu) — PNG fails, kas pārdēvēts par .ico, joprojām ir tikai PNG ar nepareizu paplašinājumu iekšpusē. Lielākā daļa mūsdienu pārlūku ir iecietīgi un to tik un tā attēlos, taču šis rīks veido īstu ICO konteineru ar trim faktiskām izšķirtspējām, kas ir tieši tas, ko formāts bija paredzēts darīt un ko sagaida stingrāki lasītāji.
Kāpēc man vajadzīgas PNG ikonas, ja man jau ir favicon.ico?
favicon.ico aptver tikai klasisko pārlūka cilnes/grāmatzīmju izmantošanas gadījumu. 180×180 PNG ir tas, ko iOS izmanto, kad lietotājs pievieno tavu vietni sākuma ekrānam (apple-touch-icon), un 192×192 / 512×512 PNG ir tas, ko Android un PWA instalēšanas uzvednes ņem no tava tīmekļa lietotnes manifesta. Bez tiem tava ikona tālruņa sākuma ekrānā parādās kā vispārīgs ekrānuzņēmums vai tukšs kvadrāts.
Mans logotips nav kvadrātisks — kas ar to notiek?
Tas tiek centrēts caurspīdīgā kvadrātā katrā mērķa izmērā, nevis izstiepts, tāpēc plats vai garens logotips saglabā pareizas proporcijas, nevis tiek saspiests kvadrātā.
Kur man jāievieto lejupielādētie faili?
Ievieto favicon.ico, apple-touch-icon.png, icon-192.png un icon-512.png savas vietnes saknes mapē (blakus index.html), tad ielīmē ģenerētos <link> tagus savas lapas <head> sadaļā.
Vai mans SVG tiek kaut kur augšupielādēts?
Nē. SVG tiek attēlots lokālos <canvas> elementos, un ICO/PNG faili tiek salikti tavā pārlūkā. Nekas netiek nosūtīts uz serveri.