რა არის favicon და როგორ დავაყენო ?

დღევანდელ გაკვეთილში განვიხილიავთ ე.წ. favicon-ს რომელიც გამოსახულია ჩვენი ბრაუზერის ჩანართზე ე.წ. ტაბზე

იმისთვის, რომ დავაყენოთ favicon ამისთვის პირველი აუცილებელი პირობაა შევარჩიოთ სასურველი ხატულა (icon) სასურველია იყოს svg გაფართოების, რომელიც ბევრად კარგად გამოჩნდება მაღალი გაფართოების ეკრანების მქონე მოწყობილობებზე, ხატულის ასარჩევად ვიდეოში ვიყენებ fontawesome.com საიტს, რომელზეც მრაფალი უფასო ხატულაა წარმოდგენილი.

მას შემდეგ რაც გადმოვწერთ სასურველი დიზაინის ხატულას აუცილებელია მისი კონვერტაცია ასევე .ico ფორმატში, სწორედ ამისთვის გამოვიყენე ონლაინ კონვერტერი convertio.co მოცემული საიტი დაგვეხმარება .svg გაფართოების ფაილი დავაკოვერტიროთ .ico ფორმატში.

კონვერტაციის შემდეგ აუცილებელია ჩვენი ხატულები განვათავსოთ პროექტის მთავარ დირექტორიაში და მივაბათ HTML დოკუმენტს

მაგალითი:

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <!--favicons-->
  <link rel="icon" href="./favicon.ico">
  <link rel="icon" type="image/svg+xml" href="./favicon.svg">
</head>

როგორც მაგალითშია მოცემული შეამჩნევდით, რომ გამოყენებული გვაქვს 2 link თეგი პირველი ემსახურება .ico ფორმატის მიბმას ხოლო მეორე .svg-ის მიბმას.

ბრაუზერების უმეტეს ნაწილს აქვს .ico ხატულის მხარდაჭერა, მაგრამ ზოგიერთ ბრაუზერს არ აქვს .svg ხატულის მხარდაჭერა. სწორედ ამისთვის ვაბავთ 2 თეგს, იმ შემთხვევაში თუ ბრაუზერს არ აქვს .svg ხატულის მხარდაჭერა მიებმევა .ico ხოლო თუ აქვს მიებმევა .svg ხატულა