Favicon (сайтын дүрс)

Favicon-ыг хэдэн пикселээр хийх вэ?

Favicon ганц хэмжээгээр дуусдаггүй бөгөөд харагдах газар бүрт тохирох хэд хэдэн хэмжээг бэлтгэдэг нь ердийн зүйл. Учир нь хөтчийн таб, Google-ийн хайлтын үр дүн, утасны нүүр дэлгэц тус бүр өөр хэмжээ ашигладаг.

Google Search Central нь favicon-ыг дөрвөлжин (1:1) хэлбэртэй хийж, олон дэлгэцэд сайн харагдахаар 48×48 пикселээс том бэлтгэхийг зөвлөдөг. Вэб аппын тохиргооны файл (manifest) ашиглах бол web.dev хамгийн багадаа 192×192 болон 512×512 дүрс оруулахыг заадаг.

Доорх хүснэгт бол түгээмэл хэрэглэгддэг бэлтгэлийн жагсаалт. Бодитоор хэрэгтэй файл нь вэбсайт хийх аргаас хамаарч бага зэрэг ялгаатай тул гүйцэтгэгчтэйгээ хамт тогтоовол болно.

Favicon-ыг нэг тогтоосон бол удаан хэрэглэх нь дээр. Үйлчлүүлэгч таб болон хадгалсан хуудсуудаас дүрсний хэлбэрээр бизнесийг тань санадаг тул байнга сольвол харин ч олоход хэцүү болно.

Favicon-ы файлын формат ICO, PNG, SVG-ийн аль нь дээр вэ?

Одоо PNG-г үндсэн болгоод, шаардлагатай бол ICO болон SVG-г хамт байршуулах аргыг их хэрэглэдэг. Google ICO · PNG · GIF · JPEG зэрэг олон форматыг дэмждэг гэж тайлбарладаг.

ICO бол хуучин формат тул нэг файлд олон хэмжээг багтааж чаддаг бөгөөд бараг бүх хөтөч уншдаг. SVG томруулсан ч эвдрэхгүй ч одоогоор бүх газар хэрэглэгддэггүй тул PNG-г хамт байлгах нь найдвартай.

iPhone ердийн favicon-ы оронд "apple-touch-icon" гэдэг тусдаа дүрсийг нүүр дэлгэцэд ашигладаг. Энэ дүрсийг тунгалаг дэвсгэрийн оронд дүүргэсэн дэвсгэртэй хийвэл нүүр дэлгэц дээр цэвэрхэн харагдана.

SVG favicon-ыг харанхуй горимын тохиргоонд тааруулж өнгө нь өөрчлөгддөг болгож ч болно. Гэхдээ хөтөч бүрийн дэмжлэг өөр тул заавал хэрэгтэй биш бол цайвар · харанхуй дэлгэцийн аль алинд харагдах ганц дизайн илүү энгийн.

Favicon-ыг хэрхэн хийж, вэбсайтад байршуулах вэ?

Логоны файл л байвал хэдхэн алхмаар хийж болно. Өөрөө хийх үү, гүйцэтгэгчид даатгах уу, ямар ч байсан дарааллыг нь мэдэж байвал үр дүнг шалгахад амар.

Одоогийн вэбсайт бүтээх хэрэгсэл, фреймворкуудын зарим нь тогтсон хавтаст дүрсний файл оруулахад холбох кодыг автоматаар үүсгэж өгдөг. Кодыг өөрөө оруулах шаардлагатай эсэхийг гүйцэтгэгчээсээ асуухад болно.

Том эх файлыг заавал хадгалж байгаарай. Учир нь дараа нь шинэ хэмжээ хэрэгтэй болоход жижиг файлыг дахин томруулбал бүдэг болдог.

Favicon-той ижил дизайнаар хуваалцах урьдчилсан харагдацын зураг, SNS-ийн профайл зургаа хүртэл нийцүүлбэл үйлчлүүлэгч хаанаас ч харсан нэг бизнес гэдгийг амархан таньдаг.

1. 01Логоноосоо жижигрүүлсэн ч танигдах хэсгийг (эхний үсэг, бэлгэ тэмдэг) сонгоно.
2. 02Дөрвөлжин зургийн талбайд тэр хэсгийг томоор байрлуулж, захын сул зайг бага зэрэг л үлдээнэ.
3. 03512×512 гэх мэт том эх зургийг эхэлж хийгээд, түүнээс хэрэгтэй жижиг хэмжээнүүдийг гаргана.
4. 0416×16 · 32×32 болгож жижигрүүлэхэд хэлбэр нь харагдаж байгаа эсэхийг шалгаж, бөөгнөрвөл зураасыг нь бүдүүн болгож засна.
5. 05Вэбсайтын нүүр хуудасны толгой хэсэгт "icon" · "apple-touch-icon" холбох код оруулна.
6. 06Хөтчийн таб, утасны нүүр дэлгэцэд нэмэх, цайвар · харанхуй табын дэлгэц тус бүр дээр шалгана.

Google-ийн хайлтын үр дүнд favicon яагаад харагдахгүй байна вэ?

Ихэнхдээ Google-ийн зааварт заасан нөхцлийн аль нэгийг алдсан тохиолдол байдаг. Google favicon-ы холбох код вэбсайтын нүүр хуудсанд байх ёстой бөгөөд Google-ийн хайлтын робот нүүр хуудас болон favicon-ы файлыг хоёуланг нь уншиж чаддаг байх ёстой гэж тайлбарладаг.

Favicon нэг сайтын хаягт (host) зөвхөн нэгийг хүлээн зөвшөөрдөг бөгөөд дэд замын (жишээ нь: хаяг/shop) нүүр хуудсыг тусад нь хүлээн зөвшөөрдөггүй. Favicon-ы файлын хаягийг байнга солихгүй байх нь бас чухал.

Бүх нөхцлийг хангасан ч шууд өөрчлөгддөггүй. Google дахин уншиж авахад хэдэн өдрөөс хэдэн долоо хоног шаардагдаж болно гэдэг бөгөөд Search Console-ийн URL шалгах хэрэгслээр нүүр хуудасны индексжүүлэлтийг хүсвэл бага зэрэг хурдсаж болно. Нөхцлийг хангасан ч харагдах нь баталгаатай биш гэдгийг ч мэдэж аваарай.

Хайлтын үр дүнд таны дүрсний оронд үндсэн дүрс харагдаж байвал Google favicon-ыг хараахан олоогүй эсвэл нөхцөлд нийцэхгүй гэж үзсэн тохиолдол олон. Дээрх нөхцлүүдийг нэг нэгээр нь дахин шалгаж үзээрэй.

Салбар бүрт favicon-ыг хэрхэн зохион бүтээх вэ?

Favicon бол хэдэн арван табын дундаас таны бизнесийг олуулдаг тэмдэг тул салбарын зургаас илүү зөвхөн танд байдаг хэлбэр илүү хэрэгтэй. Кофены аяга, хайч гэх мэт түгээмэл зураг бусад газраас ялгарахгүй байх нь амархан.

Өнгөний хувьд логоны гол ганц өнгийг ашиглах нь жижигрүүлэхэд хамгийн тод харагдана. Градиент, нимгэн зураас 16 пикселийн хэмжээнд бараг харагддаггүй.

Хийсний дараа бодитоор олон табын дунд нээж харьцуулж үзээрэй. Байнга ашигладаг сайтуудын дүрсний хажууд таны дүрс шууд нүдэнд тусаж байгаа эсэх нь хамгийн найдвартай шалгуур.

• Кафе: бизнесийн нэрийн эхний үсгийг брэндийн өнгөтэй тойрог дотор байрлуулна.
• Үсчин: логон доторх бэлгэ тэмдгийн хэсгийг л салгаж бүдүүн зураасаар дахин зурна.
• Урлан: гар бичмэл лого бол жижигрүүлэхэд уншигдахгүй тул ганц эхний үсгийг л ашиглана.
• Онлайн худалдаа: онлайн дэлгүүрийн олон таб зэрэг нээдэг үйлчлүүлэгч олон тул өнгөний ялгааг их болгож нүдэнд тусахуйц болгоно.

Favicon-д ямар алдаа түгээмэл гаргадаг вэ?

Хамгийн түгээмэл алдаа бол хэвтээ урт логог шууд дөрвөлжинд оруулж, маш жижиг харагдуулах явдал юм. Тунгалаг дэвсгэр дээр зөвхөн хар лого тавьснаас харанхуй табын дэлгэцэд харагдахгүй байх тохиолдол ч олон.

Вэбсайт бүтээх хэрэгслийн үндсэн дүрс хэвээрээ үлдсэн байх тохиолдол ч бий. Нээхээс өмнө табыг ганц удаа харахад л мэдэж болох тул заавал шалгаарай.

Favicon-ы файлаа сольсон ч өөрийн компьютер дээр хэвээрээ байвал ихэнхдээ хөтөч хуучин дүрсийг хадгалчихсантай холбоотой. Өөр хөтөч эсвэл нууц цонхоор нээж үзвэл солигдсон эсэхийг шалгаж болно.

Favicon-ы талаар гүйцэтгэгчээс юуг шалгах вэ?

Нээхээс өмнө доорх дөрвөн зүйлийг гүйцэтгэгчээс шалгаж авбал таб · хайлт · утасны нүүр дэлгэц хаана ч тод харагдана.

• Хөтчийн таб · Google хайлт · утасны нүүр дэлгэцийн дүрсийг бүгдийг нь хийж өгөх эсэх
• Харанхуй дэлгэцэд ч харагдахаар дэвсгэр эсвэл хүрээ оруулсан эсэх
• Google-ийн хайлтын робот favicon-ы файлыг уншихыг хаагаагүй эсэх
• Эх файлыг (том хэмжээтэй) авч үлдэх боломжтой эсэх