ფავიკონების და საიტის ხატულების როლი თანამედროვე ვებ-სივრცეში
ფავიკონი და საიტის ხატულები წარმოადგენს ვებ-გვერდის ვიზუალური იდენტობის უმნიშვნელოვანეს ნაწილს ბრაუზერებსა და მობილურ მოწყობილობებში. ისინი ეხმარებიან მომხმარებლებს თქვენი საიტის სწრაფად ამოცნობაში ბრაუზერის მრავალ გახსნილ ჩანართს შორის, სანიშნეებში, მობილური ტელეფონების მთავარ ეკრანებზე და პროგრესულ ვებ-აპლიკაციებში (PWA).
ერთიანი ვიზუალური იდენტობის შესაქმნელად საჭიროა სხვადასხვა ზომისა და ფორმატის ხატულების მომზადება, რადგან სხვადასხვა ოპერაციული სისტემა და ბრაუზერი განსხვავებულ სტანდარტებს ითხოვს. ეს ინსტრუმენტი საშუალებას გაძლევთ, ერთი საწყისი სურათიდან მიიღოთ ყველა საჭირო ფაილი, რომლებიც გაერთიანებულია ჩამოსატვირთ ZIP არქივში, და მიიღოთ მზა HTML კოდი საიტზე ინტეგრაციისთვის.
საწყისი სურათის შერჩევა და რეკომენდებული პარამეტრები
ხატულების ხარისხი პირდაპირ დამოკიდებულია თქვენ მიერ ატვირთული საწყისი ფაილის ფორმატსა და ზომაზე. საუკეთესო შედეგის მისაღწევად გაითვალისწინეთ შემდეგი წესები:
- ფაილის ფორმატები: ხელსაწყო მხარს უჭერს მხოლოდ PNG, JPG და SVG ფორმატებს. სხვა ფორმატის ატვირთვის შემთხვევაში გამოჩნდება შეტყობინება: „მხარდაჭერილია მხოლოდ PNG, JPG და SVG ფორმატის სურათები.“.
- ფაილის ზომის ლიმიტი: მაქსიმალური დასაშვები ზომა არის 50 მბ. ლიმიტის გადაჭარბებისას სისტემა აჩვენებს შეცდომას: „ფაილის ზომა აჭარბებს 50 მბ-ს. გამოიყენეთ უფრო მცირე ზომის საწყისი სურათი.“.
- ვექტორული გრაფიკა (SVG): თუ საწყის ფაილად გამოიყენებთ SVG ფორმატს, თავად ვექტორული ფაილიც ჩაირთვება საბოლოო ხატულების ნაკრებში. ეს უზრუნველყოფს აბსოლუტურ სიმკვეთრეს ნებისმიერ რეზოლუციაზე, რადგან ვექტორი მასშტაბირდება ხარისხის დაკარგვის გარეშე.
- რასტრული გრაფიკა (PNG ან JPG): რასტრული სურათების შემთხვევაში რეკომენდებულია მინიმუმ 512 × 512 პიქსელი ზომის ფაილის გამოყენება. თუ ატვირთავთ უფრო მცირე ზომის სურათს, სისტემა გამოიტანს გაფრთხილებას: „მცირე ზომის წყარო (
{w}×{h}px): დიდი ხატულები შეიძლება ბუნდოვანი გამოჩნდეს. საუკეთესო შედეგისთვის გამოიყენეთ 512 × 512 ან მეტი ზომა, ან SVG ფაილი.“.
არაკვადრატული სურათების დამუშავება და ფონის პარამეტრები
გენერირებული ხატულები ყოველთვის კვადრატული ფორმისაა. თუ თქვენი საწყისი სურათი არ არის კვადრატული, ხელსაწყო გთავაზობთ ორ გზას მის დასამუშავებლად:
- ჩატევა (მინდვრებით): ეს არის ნაგულისხმევი არჩევანი. მთელი სურათი რჩება ხილვადი, თავსდება ცენტრში და მის გარშემო ემატება ცარიელი სივრცე (მინდვრები) კვადრატული ფორმის მისაღებად.
- შევსება (ჩამოჭრა): სურათი მთლიანად ავსებს კვადრატულ არეს, ხოლო მისი ზედმეტი, გამოწეული კიდეები ავტომატურად იჭრება.
ფონის შერჩევა
ხატულების გენერირებისას შეგიძლიათ მართოთ ფონის გამჭვირვალობა:
- გამჭვირვალე: ნაგულისხმევი პარამეტრი, რომელიც იდეალურია ბრაუზერის ჩანართებისთვის.
- ფერი: მომხმარებლის მიერ შერჩეული კონკრეტული ფონის ფერი.
გაითვალისწინეთ, რომ მიუხედავად იმისა, რომ გამჭვირვალე ფონი კარგად გამოიყურება ბრაუზერის ჩანართებში, iPhone-ის მთავარ ეკრანზე განთავსებისას გამჭვირვალე ადგილები ავტომატურად შავად შეიღებება. ამიტომ, მობილური მოწყობილობებისთვის ფონის კონკრეტული ფერის მითითება უფრო უსაფრთხო არჩევანია.
გენერირებული ფაილების სტრუქტურა და ზომები
გენერირების პროცესის დასრულების შემდეგ იქმნება ZIP არქივი, რომელიც შეიცავს შემდეგ ფაილებს:
| ფაილის სახელი | ზომა (პიქსელებში) / ტიპი | დანიშნულება და როლი |
|---|---|---|
favicon.ico |
16 × 16, 32 × 32, 48 × 48 px | კლასიკური ჩანართის ხატულა ძველი და თანამედროვე ბრაუზერებისთვის. |
PNG ხატულები |
16, 32, 180, 192, 512 px | გამოიყენება ბრაუზერის ჩანართებისთვის, Apple touch (iPhone/iPad) და Android მოწყობილობებისთვის. |
site.webmanifest |
მცირე ტექსტური ფაილი | მანიფესტი, რომელიც მიუთითებს მოწყობილობებს დიდი ზომის ხატულების მდებარეობას. |
SVG ფაილი |
ვექტორული ფორმატი | შედის ნაკრებში მხოლოდ იმ შემთხვევაში, თუ საწყისი ფაილი იყო SVG. |
ინსტალაცია და საიტზე ინტეგრაცია
ხატულების საიტზე გამოსაჩენად მიყევით ამ ნაბიჯებს:
- ჩამოტვირთეთ გენერირებული ZIP არქივი ღილაკით „ZIP-ის ჩამოტვირთვა“.
- განათავსეთ არქივში არსებული ყველა ფაილი თქვენი ვებ-საიტის ძირეულ (root) საქაღალდეში. მნიშვნელოვანია, რომ
favicon.icoხელმისაწვდომი იყოს პირდაპირ მისამართზე:/favicon.ico. - დააკოპირეთ გენერირებული HTML კოდის სნიპეტი.
- ჩასვით ეს კოდი თქვენი ვებ-გვერდების
<head>სექციაში. ბრაუზერები და ოპერაციული სისტემები თავად შეარჩევენ და ჩატვირთავენ მათთვის საჭირო ზომის ხატულას.
კონფიდენციალურობა და მონაცემთა დამუშავება
თქვენი უსაფრთხოება და კონფიდენციალურობა დაცულია. ატვირთული სურათის დამუშავება და ხატულებად გარდაქმნა ხდება უშუალოდ თქვენს ვებ-ბრაუზერში. ფაილები არ იგზავნება გარე სერვერებზე და არაფერი იტვირთება BroBroGo-ს სერვერებზე.
ხშირად დასმული კითხვები
რომელი ფაილები შედის ხატულების ნაკრებში?
ნაკრებში შედის favicon.ico 16, 32 და 48 პიქსელიანი ვერსიებით, PNG ხატულები 16, 32, 180, 192 და 512 პიქსელზე, და site.webmanifest ფაილი, რომელიც შეიცავს დიდ ხატულებს. თუ დაიწყებთ SVG ფორმატით, თავად ვექტორიც ჩაირთვება ნაკრებში. ყველაფერი მოთავსებულია ერთ ZIP არქივში.
რა ზომის უნდა იყოს საწყისი სურათი?
SVG იდეალური ვარიანტია — თითოეული ხატულა იხატება ვექტორიდან, ამიტომ 16 პიქსელიანიც კი ინარჩუნებს სიმკვეთრეს. PNG ან JPG-ის შემთხვევაში, დაიწყეთ მინიმუმ 512 × 512 ზომით; უფრო მცირე სურათები გაფართოებისას შეიძლება ბუნდოვანი გამოჩნდეს.
ფონი გამჭვირვალე უნდა იყოს თუ ფერადი?
ჩანართის ხატულები შესანიშნავად გამოიყურება გამჭვირვალე ფონით. თუმცა, iPhone და iPad-ის მთავარ ეკრანებზე გამჭვირვალე ადგილები შავად იფერება — თუ მომხმარებლებმა შეიძლება თქვენი საიტი მთავარ ეკრანზე დაამატონ, უმჯობესია აირჩიოთ ფონის კონკრეტული ფერი.
რა მოსდის სურათს, რომელიც არ არის კვადრატული?
ხატულები კვადრატულია, მაგრამ თქვენი სურათი არასდროს გაიწელება. ნაგულისხმევად ის თავსდება ცენტრში მინდვრებით; გადართეთ რეჟიმზე „შევსება (ჩამოჭრა)“, რათა გრძელი კიდეები ჩამოიჭრას.
სად უნდა განვათავსო ეს ფაილები ჩემს საიტზე?
ატვირთეთ ისინი თქვენი საიტის ძირეულ (root) საქაღალდეში, რათა favicon.ico ხელმისაწვდომი იყოს მისამართზე /favicon.ico, შემდეგ კი ჩასვით გენერირებული ხაზები თქვენი გვერდების სექციაში. ბრაუზერები თავად შეარჩევენ საჭირო ზომას.