Tīmekļa vietņu ikonu nozīme un to veidi
Mūsdienu tīmekļa izstrādē vietnes ikonas jeb favicon ir būtisks zīmola identitātes un lietotāja saskarnes elements. Tās palīdz lietotājiem ātri identificēt jūsu vietni starp daudzām atvērtām pārlūkprogrammas cilnēm, grāmatzīmēm un viedtālruņu sākuma ekrāniem. Lai nodrošinātu pareizu attēlojumu uz visām ierīcēm un operētājsistēmām, ir nepieciešams sagatavot vairākus ikonu formātus un izmērus:
- Pārlūkprogrammas cilnes ikonas: Klasiskās ikonas, kas tiek rādītas tieši blakus lapas nosaukumam pārlūkprogrammas cilnē.
- Apple touch ikonas: Īpaši pielāgotas ikonas, ko izmanto iPhone un iPad ierīces, kad lietotājs pievieno vietni savam sākuma ekrānam.
- PWA (Progressive Web Apps) ikonas: Liela izmēra ikonas, kas nepieciešamas Android ierīcēm un instalējamām tīmekļa lietotnēm, lai nodrošinātu lietotnes cienīgu izskatu ierīces izvēlnē.
Šis rīks ļauj augšupielādēt vienu avota attēlu un automātiski izveidot pilnu ikonu komplektu, kas atbilst visām šīm prasībām.
Avota attēla izvēle un tehniskie parametri
Lai sasniegtu vislabāko rezultātu, ir svarīgi izvēlēties piemērotu avota attēlu. Rīks atbalsta PNG, JPG un SVG formātus ar faila izmēru līdz 50 MB.
Ja izmantojat rastra attēlu (PNG vai JPG), ieteicams izvēlēties failu, kura izmērs ir vismaz 512 × 512 pikseļi. Ja augšupielādētais attēls ir mazāks, rīks parādīs brīdinājumu: "Mazs avota attēls ({w} × {h} px): lielās ikonas var izskatīties izplūdušas. Vislabāko rezultātu sniedz 512 × 512 px vai lielāks attēls, vai arī SVG fails.". Mazāki attēli tiks palielināti, kā rezultātā lielās ikonas var izskatīties izplūdušas.
Vektorgrafikas (SVG) izmantošana ir vislabākā izvēle, jo SVG fails satur matemātiskas vektoru līnijas. Tas nodrošina, ka ikonas saglabā perfektu asumu jebkurā izmērā, un pats vektora fails tiek iekļauts gala pakotnē.
Nekvadrātveida attēlu apstrāde un fona iestatījumi
Tā kā visas tīmekļa ikonas pēc noklusējuma ir kvadrātveida, rīks piedāvā divus veidus, kā apstrādāt attēlus, kuriem nav vienādas malas:
- Ietilpināt (ar apmali): Viss attēls paliek redzams un tiek centrēts, bet ap to tiek izveidotas tukšas apmales.
- Aizpildīt (apgriezt): Attēls pilnībā aizpilda kvadrāta laukumu, un pāri paliekošās malas tiek apgrieztas.
Otrs svarīgs aspekts ir fona izvēle. Pēc noklusējuma fons ir caurspīdīgs, kas ir ideāli piemērots pārlūkprogrammas cilnēm. Tomēr caurspīdīgs fons var radīt problēmas uz iOS ierīcēm. iPhone sākuma ekrānā caurspīdīgie apgabali tiek automātiski iekrāsoti melni, kas var sabojāt logotipa izskatu. Tāpēc Apple touch ikonām drošāka izvēle ir fona krāsas norādīšana.
Ģenerētie faili un to izmēri
Pēc apstrādes pabeigšanas rīks sagatavo lejupielādējamu ZIP failu, kurā ir iekļauti šādi elementi:
| Faila nosaukums | Izmērs (pikseļos) | Pielietojums un apraksts |
|---|---|---|
favicon.ico |
16 × 16, 32 × 32, 48 × 48 | Klasiskā cilnes ikona, kas satur trīs izmērus vienā failā. |
| PNG ikonas | 16, 32, 180, 192, 512 | Izmantojamas modernām pārlūkprogrammām, Apple ierīcēm un Android lietotnēm. |
site.webmanifest |
- | Neliels teksta fails, kurā ir uzskaitītas lielās ikonas un to izmēri. |
| SVG fails | Vektors | Iekļauts tikai tad, ja avota fails bija SVG, nodrošinot neierobežotu mērogojamību. |
Ikonu uzstādīšana tīmekļa vietnē
Lai integrētu izveidotās ikonas savā vietnē, veiciet šādas darbības:
- Lejupielādējiet sagatavoto ZIP failu un atarhivējiet tā saturu.
- Augšupielādējiet visus failus savas tīmekļa vietnes saknes mapē (piemēram, tā, lai fails
favicon.icobūtu pieejams adresēvietne.lv/favicon.ico). - Nokopējiet rīka nodrošināto HTML kodu un ielīmējiet to katras savas vietnes lapas
<head>sadaļā.
Pārlūkprogrammas un mobilās ierīces pašas automātiski nolasīs šo kodu un izvēlēsies savam ekrānam un situācijai atbilstošāko ikonas izmēru.
Drošība un datu apstrāde
Izmantojot šo rīku, jūsu privātums ir pilnībā aizsargāts. Attēla konvertēšana ikonās un visi aprēķini tiek veikti lokāli tieši jūsu tīmekļa pārlūkprogrammā. Neviens fails un nekādi dati netiek augšupielādēti BroBroGo serveros.
Biežāk uzdotie jautājumi (FAQ)
Kādi faili ir iekļauti ikonu pakotnē?
favicon.ico ar 16, 32 un 48 pikseļu versijām iekšpusē, PNG ikonas 16, 32, 180, 192 un 512 pikseļu izmērā, kā arī site.webmanifest fails, kurā uzskaitītas lielās ikonas. Ja sākat ar SVG, tiks iekļauts arī pats vektora fails. Viens ZIP fails satur visu nepieciešamo.
Kādam jābūt mana avota attēla izmēram?
SVG ir ideāls formāts — katra ikona tiek zīmēta no vektora, tāpēc pat 16 pikseļu izmērā tā paliek asa. PNG vai JPG gadījumā sāciet ar vismaz 512 × 512 px; mazāki attēli tiek palielināti un var izskatīties izplūduši.
Vai fonam jābūt caurspīdīgam vai krāsainam?
Cilņu ikonas izskatās labi ar caurspīdīgu fonu. Tomēr iPhone un iPad sākuma ekrāni caurspīdīgos apgabalus iekrāso melnus — ja lietotāji varētu pievienot jūsu vietni savam sākuma ekrānam, ieteicams izvēlēties fona krāsu.
Kas notiek ar attēlu, kas nav kvadrātveida?
Ikonas ir kvadrātveida, taču jūsu attēls nekad netiks izstiepts. Pēc noklusējuma tas tiek centrēts ar apmalēm; pārslēdziet uz "Aizpildīt (apgriezt)", lai tā vietā apgrieztu garākās malas.
Kur manā vietnē ir jāievieto šie faili?
Augšupielādējiet tos savas vietnes saknes mapē, lai favicon.ico būtu sasniedzams adresē /favicon.ico, un pēc tam ielīmējiet ģenerētās rindas savu lapu sadaļā. Pārlūkprogrammas pašas izvēlēsies pareizo izmēru.