Вэб дизайнд нарийн ширийн зүйл бүр чухал гэдгийг та мэдэх байх. Таны нөөц рүү шилжсэн хүн элемент бүрийг тусад нь хардаггүй, харин зургийг бүхэлд нь бусад жижиг нарийн ширийн зүйлсээс бүрдсэн багц гэж ойлгодог. Тиймээс, хэрэв та нөөцөө хөгжүүлэх явцад ямар нэг зүйлийг орхигдуулсан бол энэ нарийн ширийн зүйл нь дараа нь бүхэл бүтэн цогцолбор, найрлагыг бүхэлд нь сүйтгэж болзошгүй.
Ийм жижиг зүйл нь жишээлбэл, товчлуурын дэвсгэр, зарим жижиг элементийн буруу сонгосон фонт, тэр ч байтугай фавикон байж болно. Үнэн хэрэгтээ, өөрөө үзээрэй - том, алдартай сайтууд нь хэрэглэгчийн хөтөчийн "Хавчуурга" хэсэгт үүнийг заадаг бие даасан дүрстэй байдаг. Үүнгүйгээр эх сурвалжийг хөгжүүлэгчид анх хичээж байсан найрлагыг нь бүтээх боломжгүй байх байсан.
Тиймээс та сайтынхаа дизайн хийхдээ фавикон гэх мэт нарийн ширийн зүйлийг анхаарч үзэх хэрэгтэй. Энэ нийтлэлд бид үүнийг эх сурвалжийн ерөнхий хэв маягтай хэрхэн тааруулах, мөн энэ зураг ямар хэмжээтэй байх талаар ярилцах болно.
Сайтын дүрс
Эхлээд энэ элемент юу болохыг тодорхойлъё. Яг одоо хөтчийнхөө табын гарчгийг харна уу. Таны харж байгаагаар түүний зүүн талд жижиг зураг байгаа бөгөөд энэ нь нөөцийн логоны хялбаршуулсан хувилбарыг харуулж байна. Хайлтын үр дүнд харагдах сайтын нэрний ойролцоо ижил зураг байна. Хэрэглэгч гарчгийг харахдаа үүнийг удирддаг.
Олон вэбмастерууд ийм зураг хэрэгтэйг ойлгодог ч сайтад ямар фавиконы хэмжээ хамгийн тохиромжтой болохыг цөөхөн хүн мэддэг. Тиймээс энэ нийтлэлд бид ийм дүрсийг хэрхэн хийх, өөрийн эх сурвалж дээр хэрхэн суулгах талаар мэдээлэл өгөөд зогсохгүй зургийн хэмжээсийн талаар ярих болно.
Фавиконын зорилго
Тиймээс сайтын толгой хэсгийн ойролцоох зургийг таних зорилгоор ашигладаг. Энэ бол түүний анхны зорилго: бидний нэрийг харж буй сайтыг илэрхийлэх, бусад хүмүүсийн нүдэн дээр тодрох явдал юм. Үүнийг график ашиглах замаар аль болох энгийн байдлаар хийдэг: бид зураг дээрх мэдээллийг текст форматаас хамаагүй хурдан бөгөөд хялбар байдлаар хүлээн авдаг. Фавиконууд бидэнд үүнийг хийхэд тусалдаг. Гэхдээ фавиконы хэмжээ хэрэглэгчийн нүдэнд хамгийн бага гэдгийг бүү мартаарай. Энэ нь сайтын "толгой" хэсэгт байгаа лого биш бөгөөд бичээс, зарим тодруулга эсвэл холбоо барих мэдээлэл зэрэг нэмэлт мэдээллийг агуулж болно. Нэрийн хажууд байгаа дүрс дээр харагдах бүх зүйл аль болох фавиконы хэмжээтэй тохирч байх ёстой. Өмнө дурьдсанчлан тэрээр зүгээр л бяцхан (зөвхөн 16х16 пиксел) юм.
Хэрхэн сонгох вэfavicon?
Тэгвэл вэбмастер хэрхэн өөрийн сайтын дүрсийг зохиож чадах вэ? Сайтын логог зүгээр л шахах нь ихэвчлэн ажиллахгүй гэдгийг тэмдэглэх нь зүйтэй. Тодорхой нөөцийн лого хэлбэрээр байрлуулсан бэлгэ тэмдэг дээр янз бүрийн элементүүд ихэвчлэн харагддаг бөгөөд энэ нь бяцхан хэлбэрээр үргэлж зөв харагдахгүй болно. Ийм ажлаа даруй орхисон нь дээр.
Мэдээжийн хэрэг, фавиконын хэмжээ нь тэнд зүгээр л бичээс оруулах тухай ярихыг зөвшөөрдөггүй. Энэ тогтоолоор аливаа текст үл үзэгдэх болно. Бид сайтын хэв маягийг илэрхийлэх шинэ дүрсийг боловсруулах хэрэгтэй. Шийдэл олохын тулд дахин хамгийн том сайтууд руу хандъя.
Олон хүмүүс үйлчилгээний нэрний загварчилсан эхний үсгийг фавикон болгон ашигладаг. Энэ бол жишээлбэл, Bing, Yahoo, Yandex, Wikipedia, Google. Өөр нэг арга бий - хэрэв танд сайтын богино нэр байгаа бол та үүнийг дүрсийнхээ дэвсгэр болгон тохируулж болно. Энэ бичээсийг зөв харуулахын тулд фавиконы хэмжээ (пикселээр, би давтан хэлье, 16-аас 16 пиксел) 3 үсэгнээс хэтрэхгүй байх ёстой. Жишээлбэл, Aol үйлчилгээ үүнийг хийдэг.
Хэрхэн фавикон үүсгэх вэ?
Сайтын нэрэнд дүрс хийх хэд хэдэн арга бий. Мэдээжийн хэрэг, хамгийн хялбар нь өөр өөр бэлэн шийдэлтэй ажиллах явдал юм. Бүрэн хэмжээний дүрсийг багасгах замаар дүрс хийх боломжийг олгодог зарим үйлчилгээ эсвэл програмын талаар бид ярьж болно. Гэсэн хэдий ч би ийм логог өөрөө боловсруулахыг зөвлөж байна. Энэ нь эхлээд өгөх болноямар нэгэн зүйл сурах боломж; хоёрдугаарт, илүү олон хэрэгслээр хангана. Үүний тулд юу зурах, мөн эцсийн хувилбарт фавикон ямар хэмжээтэй байх ёстойг мэдэхэд л хангалттай. Бид сайтын дүрсний хэмжээг хэсэг хугацааны дараа ярих болно, гэхдээ одоогоор бид ийм зурагтай ажиллах зарим нарийн ширийн зүйлийг тэмдэглэх болно. Ялангуяа сайтад зориулсан фавиконы хэмжээг дурдахгүйгээр ийм зургийн форматыг тодруулах хэрэгтэй. Туршлагатай дизайнеруудын тэмдэглэснээр зургийг-p.webp
Та зургаа хадгалах боломжтой, жишээ нь Photoshop ашиглан эмблем зурах боломжтой.
Фавиконы хэмжээс
Тиймээс одоо хайлтын үр дүнд сайтын нэрний хажууд байгаа зураг хэр том байх ёстой талаар ярилцъя. Анхдагч байдлаар, аль хэдийн дурьдсанчлан түүний хэмжээ нь зөвхөн 16 пиксел (тал тус бүр дээр). Гэсэн хэдий ч, хэрэв та энэ зургийг Photoshop дээр засварлахыг оролдвол энэ нь хичнээн эвгүй болохыг та өөрөө харах болно. Тиймээс бид томруулсан зурагтай ажиллахыг зөвлөж байна, үүнийг ирээдүйд ирмэгээр нь шахаж, шаардлагатай форматаар хадгалах боломжтой.
Олон платформ
Гэсэн хэдий ч таны сайт дээрх фавикон хэр том байх ёстой талаар ярихад бас нэг зүйлийг анхаарах хэрэгтэй. Бүх платформууд нөөцийн зургийг ижил байдлаар харуулдаггүй. Жишээлбэл, Retina дэлгэцтэй төхөөрөмжүүд таны фавиконыг 32х32 пикселээр "хардаг". Safari болон шинэ Windows платформ дээр эдгээр дүрс нь 64 хэмжээтэй байдагпиксел.
Тиймээс бид танд дүрсний янз бүрийн хувилбаруудыг хадгалахыг зөвлөж байна, цаашид хэрэглэгчийн платформоос хамааран өөрчлөхийг л өгөхийг зөвлөж байна. Өөр нэг сонирхолтой зүйл бол та хөтчөөс хамааран дүрсийг "багасгах" болно гэж найдаж, хамгийн том форматаар ачаалахыг оролдож болно.
Гадна засварлагч
Мэдээж та Photoshop програмыг сайн эзэмшсэн, зурагаа хадгалахдаа фавикон ямар хэмжээтэй байх, түүнд хэрхэн хүрэхээ мэддэг бол мэдээж сайн. Гэсэн хэдий ч график засварлагчтай өмнө нь тийм ч ойрхон таарч байгаагүй, тийм ч амархан хүссэн зургийг зурж чаддаггүй анхлан суралцагчид олон байдаг. Ийм вэбмастеруудад туслахын тулд таны сонирхож буй дүрсийг автоматаар үүсгэх боломжийг олгодог янз бүрийн үйлчилгээнүүд байдаг. Тэдгээрийн олонх нь бүр үнэ төлбөргүй байдаг бөгөөд энэ нь хэрэглэгчээс ямар ч хөрөнгө оруулалт шаарддаггүй.
Заримдаа ажилд орохын тулд бүртгүүлэхэд л хангалттай, гэхдээ таны ойлгосноор энэ нь нэг удаа хийгддэг - эцэст нь компаниуд фавиконоо тийм ч их сольдоггүй. Өдөр бүр логогоо өөрчилдөг ч дүрс дээр нь хүрдэггүй Google-г хараарай.
Хэрхэн фавикон суулгах вэ?
Ерөнхийдөө сайтаа танд хэрэгтэй зургаа зөв харуулахаар тохируулах нь маш энгийн. Хайлтын систем болон энгийн хөтчүүдэд мэдээллийг унших боломжийг олгох хэд хэдэн энгийн алхмуудыг хийхэд хангалттай.
Үүнийг хийхийн тулд үүссэн зургийг дараахаар хадгалах ёстойfavicon.ico гэж нэрлээд, таны нөөцийн үндсэн хэсэгт байрлуулна. Ингээд л таны зураг автоматаар танигдаж, хэсэг хугацааны дараа таны сайттай холбогдох болно.
Энэ холбоосоос гадна та өөрийн дүрс хаана байгааг "саналдах" нэг мөр нэмж болно. Энэ нь иймэрхүү харагдаж байна:
Сайтын толгой хэсэгт кодыг суулгана уу.
Дүгнэлт
Тиймээс манай нийтлэлийг уншсаны дараа та сайтад зориулсан фавикон ямар хэмжээтэй байх ёстой, ямар хэмжээтэй болохыг олж мэдсэн. Түүнчлэн, таны нөөцөд тохирох дүрсийг олох нь зайлшгүй шаардлагатай гэдгийг та ойлгосон гэж бодож байна, учир нь энэ нь танигдлыг нэмэгдүүлэх, өрсөлдөгчдийнхөө дунд илүү тодрох үүднээс таны гарт нөлөөлдөг. Наад зах нь хамгийн том сайтууд үүнийг хийдэг бөгөөд үүнийг гол жишээ болгон авч болно. Түүнээс гадна энэ нь тийм ч их хүчин чармайлт гаргахгүй - нэг удаа фавикон хийж, сайт дээрээ зөв суулгаснаар дараагийн хэдэн сарын турш үүнийг мартаж болно.
Тиймээс туршилт хийж, шинийг санаачилж, туршаад үзээрэй - тэгвэл бүх зүйл бүтнэ!
