Veebisaidi ikoonide tähtsus ja roll kaasaegses veebis
Veebisaidi ikoonid ehk faviconid on brändingu ja kasutajakogemuse seisukohalt olulised elemendid. Need pisikesed graafilised kujutised ilmuvad veebilehitseja vahekaartidel, järjehoidjate nimekirjades, nutitelefonide avaekraanidel ja Progressive Web Apps (PWA) rakenduste käivitusvaadetel. Korrektselt seadistatud ikoonipakk aitab kasutajatel teie veebisaiti avatud vahekaartide või salvestatud linkide hulgast kiiresti tuvastada.
Tänapäeval ei piisa enam ainult ühest 16 × 16 piksli suurusest failist, sest erinevad seadmed ja platvormid nõuavad eri suuruses ja vormingus ikoone. Lauaarvutite veebilehitsejad, Apple'i iOS-seadmed ja Androidi operatsioonisüsteem vajavad igaüks spetsiifilisi mõõtmeid, et tagada ikoonide teravus ja korrektne kuvamine. Faviconi generaator lahendab selle keerukuse, luues ühest algpildist täieliku ikoonikomplekti ja vajaliku HTML-koodi.
Erinevad ikoonitüübid ja nende kasutusotstarve
Genereeritud ikoonipakk sisaldab faile, mis on optimeeritud konkreetsete seadmete ja kasutusjuhtude jaoks:
- Klassikaline vahekaardi ikoon (
favicon.ico): See fail sisaldab endas kolme erinevat suurust: 16, 32 ja 48 pikslit. Seda kasutatakse traditsioonilistes veebilehitsejates vahekaartide ja järjehoidjate jaoks. - PNG-ikoonid: Failid suurustes 16 ja 32 pikslit on mõeldud kaasaegsetele veebilehitsejatele vahekaardi ikoonidena kuvamiseks. Suuremad PNG-ikoonid (180, 192 ja 512 pikslit) on mõeldud spetsiifilistele platvormidele.
- Apple touch ikoon: 180-piksline PNG-ikoon on optimeeritud iPhone'i ja iPad'i avaekraanide jaoks, kui kasutaja salvestab veebisaidi otseteena.
- Androidi ja PWA ikoonid: 192 ja 512 piksli suurused PNG-failid on mõeldud Android-seadmetele ja paigaldatavatele veebirakendustele.
- Vektorikoon (SVG): Kui algfailina kasutatakse SVG-vormingut, lisatakse see otse ikoonipakki, tagades täieliku teravuse igas suuruses kaasaegsetes veebilehitsejates.
- Veebimanifest (
site.webmanifest): See on väike tekstifail, mis loetleb suured ikoonid ja teavitab seadmeid nende asukohast.
Algpildi valik ja tehnilised nõuded
Parima võimaliku tulemuse saavutamiseks on oluline jälgida algpildi parameetreid:
| Atribuut | Nõue / Soovitus |
|---|---|
| Toetatud vormingud | PNG, JPG, SVG |
| Maksimaalne failimaht | Kuni 50 MB |
| Soovitatav suurus (rastergraafika) | Vähemalt 512 × 512 px |
| Vektorgraafika (SVG) | Ideaalne, tagab täieliku teravuse |
Kui kasutate PNG- või JPG-faili, mis on väiksem kui 512 × 512 pikslit, kuvatakse hoiatus: "Väike algpilt ({w} × {h} px): suured ikoonid võivad jääda udused. Parima tulemuse annab 512 × 512 või suurem pilt — või SVG.". Väiksemaid pilte suurendatakse genereerimise käigus, mis võib muuta suuremad ikoonid udusteks.
Mitteruudukujuliste piltide ja taustade käsitlemine
Kõik genereeritavad ikoonid on alati ruudukujulised. Kui teie algpilt ei ole ruut, pakub tööriist kahte meetodit pildi sobitamiseks:
- Mahuta (täitega): Kogu pilt jääb nähtavaks. See paigutatakse keskele ning ümber pildi lisatakse tühi ala (täide).
- Täida (kärbi): Pilt täidab kogu ruudu kujulise ala ning üleulatuvad servad lõigatakse ära.
Teine oluline valik puudutab ikooni tausta. Vaikimisi on taust läbipaistev, mis sobib hästi veebilehitseja vahekaartidele. Kuid iPhone'i ja iPad'i avaekraanid värvivad läbipaistvad alad mustaks. Seetõttu on avaekraani ikoonide puhul kindlam valik määrata kindel taustavärv.
Privaatsus ja andmetöötlus
Selle tööriista kasutamisel töödeldakse teie pilti otse teie veebilehitsejas. Faili ei laadita BroBroGo serveritesse, mis tagab, et teie algfailid ja genereeritud ikoonid ei lahku kunagi teie seadmest.
Ikoonide paigaldamine ja seadistamine veebisaidil
Ikoonide kasutuselevõtuks oma veebilehel järgige järgmisi samme:
- Laadige tööriistast alla valmis ZIP-fail, mis sisaldab kõiki genereeritud ikoone ja manifesti.
- Pakkige ZIP-fail lahti ja kopeerige kõik selles sisalduvad failid oma veebisaidi juurkausta. On oluline, et fail
favicon.icooleks kättesaadav otse aadressil/favicon.ico. - Kopeerige tööriista genereeritud HTML-koodi snippet.
- Kleepige see kood oma veebisaidi iga lehe
<head>sektsiooni vahele.
Korduma kippuvad küsimused
Millised failid on ikoonipakis?
favicon.ico, mis sisaldab 16, 32 ja 48 piksli suuruseid versioone, PNG-ikoonid suurustes 16, 32, 180, 192 ja 512 pikslit ning site.webmanifest, mis loetleb suured ikoonid. Kui alustate SVG-st, on kaasas ka vektor ise. Üks ZIP-fail sisaldab kõike.
Mis suuruses peaks minu algpilt olema?
SVG on ideaalne — iga ikoon joonistatakse vektorist, nii et isegi 16 pikslit jääb teravaks. PNG või JPG puhul alustage vähemalt 512 × 512 suurusest; väiksemaid pilte suurendatakse ja need võivad jääda udused.
Kas taust peaks olema läbipaistev või värviline?
Vahekaardi ikoonid näevad läbipaistvana head välja. Kuid iPhone'i ja iPad'i avaekraanid värvivad läbipaistvad alad mustaks — kui kasutajad võivad teie saidi oma avaekraanile lisada, valige taustavärv.
Mis saab pildist, mis ei ole ruudukujuline?
Ikoonid on ruudukujulised, kuid teie pilti ei venitatata kunagi. Vaikimisi on see keskel koos ümbritseva tühja alaga; valige „Täida (kärbi)“, et pikemad servad selle asemel ära lõigata.
Kuhu failid minu veebisaidil paigutada?
Laadige need oma saidi juurkausta, et favicon.ico oleks kättesaadav aadressil /favicon.ico, seejärel kleepige loodud read oma lehtede sektsiooni. Veebilehitsejad valivad õige suuruse automaatselt.