1. Favicon-ийг хэрхэн үүсгэх
2. Photoshop дээр favicon-ийг хэрхэн үүсгэх
3. Favicon хэрхэн хадгалах талаар
4. Favicon сайтыг хэрхэн оруулах вэ
5. Favicon-г хэрхэн солих талаар
6. Илүү нарийн төвөгтэй зүйлсийг хэрхэн үүсгэх

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

Сайн санах ой үүсгэх нь хэцүү байдаг, учир нь дүрс жижиг тул энэ нь тодорхой байх ёстой бөгөөд таны сайттай холбоотой ямар нэгэн зүйлийг харуулах болно. Бүх алдартай хөтөчтэй нийцтэй favicon-ийг үүсгэх нь бас хэцүү ажил юм. Энэ өгүүллээр бид бүтээсэн бүх нарийн төвөгтэй талуудыг авч үзэх болно. Хэрэв та логог хэрэгтэй бол бидэнд байна нийтлэл яаж хийх вэ.

Favicon-ийг хэрхэн үүсгэх

Favicon-ийн загварыг эхлүүлье. Хэдийгээр нягт нямбай боловч сайн бүтэцтэй байх нь таны вэбсайтын мөн чанарыг тусгасан байх ёстой. Ерөнхийдөө, дүрс нь компаний график шинж (лого) бөгөөд бүх логогүй (дүрс, текст, уриа).

Favicon-ийн хувьд эдгээр вэбсайтууд нь өөрсдийн дүрсийг (эсвэл тэдгээрийн ойролцоо зургуудаа) ашигладаг.

Фонтонд байгаа текстийг ашиглахгүй. Учир нь энэ текст нь жижиг хэмжээний дүрслэлийн улмаас унших боломжгүй болно. Энэ дүрэмд хамаарах цорын ганц үл хамаарах зүйл нь тодорхой брэндтэй автоматаар холбогддог дэлхийд алдартай текст тэмдэгтүүд юм. Жишээлбэл, онлайн нєєцийн Википедиа "W", Facebook "F" гэсэн favicon дээр їлдлээ.

Эдгээр фавконон дээр тодорхой брэндтэй хүчтэй холбоотой үсэг байдаг. Жишээлбэл, Facebook нь өөрийн график тэмдэг ашигладаг. Түүнчлэн Disney дүрс дээр пиксел харагдаж байна. Яагаад гэвэл дэлгэцийн зургийг 16х16 дүрст тохирох Retina дэлгэц дээр авсан бөгөөд вэбсайтууд нь 32x32 дүрсийг ашигладаг.

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

Үүнээс зайлсхийхийн тулд логог өөрчлөхийн тулд Photoshop эсвэл GIMP зэрэг тусгай засварлагч ашиглана уу. Эхлээд зурагны хэмжээг 64x64 пиксел (энэ нь хамгийн том хэмжээтэй favicon) багасгах хэрэгтэй. Дараа нь зураглал тодорхой болтол Харандаа хэрэгсэл ашиглан пиксел бүрийг засах хэрэгтэй. Энэ бол хөдөлмөрч хөдөлмөр юм. Гэвч үр дүн нь үнэ цэнэтэй юм. Favicon 64x64 бэлэн болсон үед 16x16, 24x24, 32x32 пикселийн зурагтай ижил ажил хийх хэрэгтэй. Бүх хөтөч, төхөөрөмж дээр зөв дүрслэхэд маш олон хэмжээс хэрэгтэй:

• 64x64 - Safari хөтчийн хавчуурга;
• 32x32 - өндөр нарийвчлалтай дэлгэц (Retina);
• 24x24 - хавчуурга Internet Explorer болон MicroSoft Edge;
• 16x16 - Google Chrome болон бусад хөтчүүд.

Photoshop дээр favicon-ийг хэрхэн үүсгэх

Эхлээд та дээрх хэмжээсүүдтэй цөөн хэдэн иж бүрдлүүдийг үүсгэх хэрэгтэй.

Дараа нь зураг, зураг, эсвэл өөр зургийг нэмж оруулах хэрэгтэй.

Favicon хэрхэн хадгалах талаар

Өөр өөр хэмжээтэй дүрсийг үүсгэснээр, тус бүрийг ил тод PNG файл (24 бит) хадгална. Photoshop-д Файл цэсэнд байгаа Save for Web функцийг ашиглаж болно. Дараа нь та бүх PNG файлуудыг нэг ICO файл болгон нэгтгэх хэрэгтэй. Та PNG файлууд болон ICO файлуудыг нэгэн зэрэг ашиглаж болох боловч ихэнхдээ Safari болон Chrome нь зөвхөн ICO форматыг илүүд үздэг. Миний бодлоор, нэг ICO файл үүсгэх нь хялбар байдаг. ICO формат нь ихэвчлэн түгээмэл биш боловч аз болоход таны форматыг энэ формат руу хөрвүүлэхэд туслах хэд хэдэн хэрэгслүүд байдаг. Энэ зорилгоор би ашиглахыг илүүд үздэг X-Icon редактор . Энэ нь татаж авсан зургийг шууд ICO файлд хөрвүүлэх шууд үнэгүй үйлчилгээг хэлдэг бөгөөд дараа нь үүнийг татаж авч болно. Энэ нь төвөгтэй биш бөгөөд зөвхөн сайтын зааварчилгааг дагана уу. Хэрэв та өөрийгөө цөхрөлтэй хүн гэж үзвэл та энэ үйлчилгээний пиксел засварлагчтай туршилт хийж өөрөө favicon-г зурж болно. (Би илүү мэргэжлийн засварлагч дээр favicons-г засварлахыг илүүд үздэг боловч, жишээ нь, Photoshop-д).

Та PNG зургийг X-Icon засварлагч дээр байршуулснаар гаралт дээр нэг ICO файлыг авах болно.

Favicon сайтыг хэрхэн оруулах вэ

Тиймээс та ICO файлтай байна. Одоо та вэбсайт руу нэмж оруулах хэрэгтэй. Файлыг favicon.ico болгон өөрчилснөөр өөрийн вэбсайтын root хавтаст (индекс.html файл болон бусад стандарт файл хадгалагдсан тохиолдолд байрлуулна). Амжилттай нэмснийхээ дараа та үүнийг вэбсайтдаа .com / favicon.ico-аас үзэж болно. Бараг бүх хөтчүүд favicon.ico файлыг root хавтсанд хайж байна. Тиймээс та энэ хавтсанд favicon-ийг татаж авах нь чухал юм. Өөр хөтөчтэй нийцтэй байхын тулд ямар ч HTML элементүүд эсвэл байршлыг зааж байгаа холбоосуудыг нэмэхгүй байх нь дээр. Энэ трик нь бүх хөтчүүдэд зориулсан, IE6 хүртэл ажилладаг. Мөн WordPress вэбсайттай бол олон сэдвээр сэдвийн тохиргоонд favicon-г нэмж болно. Энэ аргыг ашиглаж болно.

Favicon-г хэрхэн солих талаар

Зарим ойлгомжтой шалтгаанаар хөтчүүд үүнийг кэшд нэмдэг. Тиймээс, та шинэ ICO файл байршуулах үед хөтөч хуучин favicon-ийг үргэлжлүүлэн харуулж болно. Энэ тохиолдолд юу хийх вэ? Та шинэ фавконорын байршлыг харуулсан түр зуурын HTML файлыг нэмж болно. Мөн URL төгсгөлд та богино хайлтын мөр нэмэх шаардлагатай болно:

<link rel = "shortcut icon" href = "yours website .com / favicon.ico? v = 2" />

Тиймээс хөтөч нь энэ нь өвөрмөц URL бөгөөд ингэснээр шинэ дүр төрхийг үзүүлэх албагүй болно. Фавтикийг шинэчилсний дараа энэ HTML кодыг бүрэн устгаж болно. Хэрэв та favicon-д өөрчлөлт хийх хэрэгтэй бол асуулгын мөрөнд "v" гэсэн тоог өсгөх бүрдээ ижил аргыг ашиглаарай. Тиймээс хөтөч энэ URL-г өвөрмөц гэж үзэн шинэ хувилбараа харуулах болно. Амжилттай шинэчлэлтийн дараа HTML кодыг устгахаа бүү мартаарай.

Илүү нарийн төвөгтэй зүйлсийг хэрхэн үүсгэх

Энэ өгүүлэлд би ямар ч платформ дээр ажиллах фавикийг бий болгох бүх нийтийн, хялбар арга замыг тодорхойлохыг хүссэн. Гэхдээ вэб дизайн, хөгжүүлэлтэд төгс төгөлдөрт хязгаар байхгүй. Хэрэв та илүү төвөгтэй дүрсийг хэрхэн бүтээхийг сурахыг хүсч байгаа бол энэ үйлчилгээг ашиглана уу favico.js . Энэ нь янз бүрийн тоо бүхий динамик зургийг үүсгэх боломжийг танд олгоно. Энэ тэмдэгтийн ачаар та харгалзах таб идэвхгүй байсан ч уншаагүй зурвасуудын тоог харж чадна. Хэрвээ та интернетийг онлайнаар үүсгэхийг хүсвэл favicon үүсгэгчийг ашиглана уу favicon.cc .

Таны олж болох олон онлайн генераторууд энд байна .

Хэрвээ та favicons-ыг үүсгэх эсвэл асуулт асуух хүсэлтэй байгаа бол сэтгэгдэлээ хүлээж байна!