გადაიყვანეთ PNG ICO-ში მკვეთრი ფავიკონისთვის
ფავიკონი პატარა სურათია, რომელიც ვებგვერდს ვიზუალურ ხელმოწერას აძლევს. მას ხედავთ ბრაუზერის ჩანართში გვერდის სათაურის გვერდით, სანიშნეების სიაში, მისამართის ველის ისტორიის ჩამოსაშლელ სიაში, ხანდახან საძიებო შედეგებთანაც. ის პატარაა, მაგრამ დიდ საქმეს აკეთებს: ცნობადი ფავიკონი მომხმარებელს ტუზინობით ჩანართს შორის თავისი ჩანართის პოვნაში ეხმარება და გვერდის დასრულებულობასა და ყურადღებას გადმოსცემს. ამ პატარა აიკონის კლასიკური ფორმატი ICO-ა, მისი შექმნის ყველაზე ადვილი გზა კი სუფთა კვადრატული PNG-დან დაწყება და გადაყვანაა.
ეს ხელსაწყო PNG სურათს იღებს და მას ICO ფავიკონად აქცევს, პირდაპირ თქვენს ბრაუზერში. კონვერტაცია ლოკალურად მიმდინარეობს თქვენივე მოწყობილობაზე, ასე რომ თქვენ მიერ არჩეული სურათი არასდროს იტვირთება სერვერზე. ამას მნიშვნელობა აქვს, როცა თქვენი აიკონი ლოგო ან ბრენდის მასალაა, რომლის მესამე მხარისთვის გადაცემასაც არ ისურვებდით. ფაილის მზადყოფნისთანავე უბრალოდ ჩამოტვირთავთ.
რა არის ICO ფორმატი და რატომ ინახავს რამდენიმე ზომას
ICO აიკონების კონტეინერის ფორმატია, რომელიც Microsoft Windows-იდან იღებს სათავეს, სადაც ის პროგრამების, მალსახმობებისა და საქაღალდეების აიკონებს ინახავს. მისი განმსაზღვრელი თვისება, რის გამოც ის ვებ-ფავიკონების სტანდარტად იქცა, ისაა, რომ ერთი ICO ფაილი ერთდროულად შეიძლება ინახავდეს ერთსა და იმავე სურათს რამდენიმე გარჩევადობაზე. ერთი ფიქსირებული ბიტმაპის ნაცვლად ფაილი შეფუთავს კვადრატული სურათების მცირე ნაკრებს და აძლევს ბრაუზერს ან ოპერაციულ სისტემას საშუალებას, აირჩიოს ის ზომა, რომელიც შესაბამის ადგილას აიკონის დასახატად ერგება.
ეს ნამდვილად სასარგებლოა. ბრაუზერის ჩანართს ძალიან პატარა აიკონი სჭირდება, სანიშნეების ზოლმა შეიძლება ოდნავ დიდი გამოიყენოს, ხოლო დესკტოპზე მიმაგრებულმა მალსახმობმა შეიძლება კიდევ უფრო დიდი მოითხოვოს. მრავალზომიანი ICO-ს შემთხვევაში, ყოველი კონტექსტი იმ ვერსიას აიღებს, რომელიც მას შეესაბამება, ასე რომ თქვენი აიკონი მკვეთრი რჩება, ერთი პატარა ბიტმაპის გადიდების ნაცვლად, რაც ბუნდოვანებას იწვევს. ICO ასევე ინარჩუნებს გამჭვირვალობას, რაც მრგვალი ან არარეგულარული ლოგოს კუთხეებს ნებისმიერ ჩანართის ფერზე სუფთად ინახავს.
ფავიკონის რეკომენდებული ზომები
ვებგვერდის ფავიკონისთვის ღირს სამი ზომის ჩართვა: 16x16, 32x32 და 48x48 პიქსელი. 16 პიქსელიანი ვერსია ის არის, რასაც ბრაუზერების უმეტესობა ჩანართსა და მისამართის ველში აჩვენებს. 32 პიქსელიანი ვერსია გამოიყენება უფრო მაღალი გარჩევადობის ეკრანებზე და ზოგიერთ სანიშნეებისა და ისტორიის ხედში, ასე რომ ის თანამედროვე ეკრანებზეც მკვეთრს ინარჩუნებს. 48 პიქსელიანი ვერსია ფარავს უფრო დიდ კონტექსტებს, როგორიცაა Windows-ის საიტის მალსახმობები. რადგან ისინი ყველა ერთ ICO ფაილშია, თქვენ ერთ აქტივს გზავნით და ყოველ ზედაპირს ეძლევა საშუალება, საკუთარი საჭიროება აირჩიოს.
დაიწყეთ კვადრატული PNG-დან, რომ არაფერი გაიწელოს. თუ თქვენი საწყისი სურათი მართკუთხაა ან ზედმეტად დიდი, ჯერ ამოჭერით ან შეამცირეთ ის სუფთა კვადრატამდე ჩვენი სურათის ზომის შემცვლელით, შემდეგ კი გაუშვით კონვერტაცია. მარტივი, მაღალკონტრასტიანი დიზაინი ბევრად უკეთ იკითხება 16 პიქსელზე, ვიდრე დეტალური ილუსტრაცია, ამიტომ ბოლდი ფორმები ამჯობინეთ წვრილ ტექსტს.
როგორ დავამატოთ ფავიკონი საკუთარ საიტზე
ICO ფაილის მზადყოფნისთანავე ატვირთეთ ის თქვენს ვებგვერდზე, ტრადიციულად საიტის ძირში, favicon.ico სახელით. ბრაუზერების უმეტესობა მას ავტომატურად იპოვის, მაგრამ საუკეთესო პრაქტიკაა, ის ცალსახად გამოაცხადოთ თქვენი HTML-ის head ნაწილში, რომ ვარაუდის ადგილი არ დარჩეს. დაამატეთ ასეთი ტიპის link ტეგი:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
განათავსეთ ეს ხაზი თქვენი გვერდების <head> ნაწილში. rel="icon" ატრიბუტი ბრაუზერს ეუბნება, რომ ეს რესურსი გვერდის აიკონია, ხოლო href მიუთითებს, სად ინახავთ ფაილს. თუ ზემოთ ნაჩვენების მსგავს root-ფარდობით მისამართს გამოიყენებთ, იგივე დეკლარაცია თქვენი საიტის ყოველ გვერდზე იმუშავებს. განთავსების შემდეგ შეიძლება საჭირო გახდეს გვერდის ხისტი განახლება ან ქეშის გასუფთავება, სანამ ახალი აიკონი გამოჩნდება, რადგან ბრაუზერები ფავიკონებს დაჟინებით ინახავენ.
პირადი კონვერტაცია თქვენს ბრაუზერში
ყველაფერი თქვენს მოწყობილობაზე ხდება. თქვენ მიერ არჩეული PNG იკითხება, დეშიფრდება და ხელახლა კოდირდება ICO-დ ლოკალურად, და პროცესის დროს არაფერი ტოვებს თქვენს მანქანას. არც ანგარიშია, არც რიგი, არც სერვერზე შენახვა, რაც ამას მოსახერხებელს ხდის თუნდაც გამოუქვეყნებელი ლოგოებისთვის ან შეთანხმებით შესრულებული კლიენტის სამუშაოსთვის. გრაფიკის მოსამზადებლად და მოსაწესრიგებლად მეტი გზისთვის დაათვალიერეთ ჩვენი სრული ნაკრები სურათის ხელსაწყოები.
ხშირად დასმული კითხვები
ჩემი სურათი იტვირთება სადმე?
არა. PNG გადაიქცევა ICO-დ მთლიანად თქვენს ბრაუზერში, თქვენსავე მოწყობილობაზე. არაფერი იგზავნება სერვერზე და არაფერი ინახება, ასე რომ თქვენი სურათი კონფიდენციალური რჩება.
რა ზომები უნდა ჰქონდეს ჩემს ფავიკონს?
ყველაზე სასარგებლო ზომებია 16x16, 32x32 და 48x48 პიქსელი. 16 პიქსელიანი სურათი ჩანართებში ჩნდება, ხოლო უფრო დიდები აიკონს მკვეთრს ინარჩუნებს მაღალგარჩევადობიან ეკრანებსა და დესკტოპის მალსახმობებზე.
რატომ ICO და არა უბრალოდ PNG?
ICO დიდი ხნის ფავიკონის ფორმატია და შეუძლია ერთ ფაილში რამდენიმე ზომის შენახვა. ბრაუზერები და ოპერაციული სისტემა ირჩევენ იმ გარჩევადობას, რომელიც კონკრეტულ კონტექსტს ერგება, ასე რომ აიკონი მკვეთრი რჩება ერთი ბიტმაპის გადიდების ნაცვლად.
ინარჩუნებს ICO ჩემი PNG-ის გამჭვირვალობას?
დიახ. ICO ფორმატი მხარს უჭერს გამჭვირვალობას, ასე რომ თქვენი PNG-ის გამჭვირვალე ადგილები ინარჩუნებს, აიკონი კი ნებისმიერ ჩანართის ან ფონის ფერზე სუფთად ერწყმის.
როგორ დავამატო ფავიკონი ჩემს ვებგვერდზე?
ატვირთეთ ICO ფაილი თქვენს საიტზე, ჩვეულებრივ root-ში favicon.ico სახელით, და დაამატეთ link ტეგი თქვენი HTML-ის head ნაწილში: rel icon type image x-icon href slash favicon.ico. შემდეგ გაასუფთავეთ ბრაუზერის ქეში, რომ ის ნახოთ.
ჩემი წყარო სურათი კვადრატული არაა. რა გავაკეთო?
ჯერ ამოჭერით ან შეამცირეთ ის კვადრატამდე, რომ არ გაიწელოს. შეგიძლიათ გამოიყენოთ ჩვენი სურათის ზომის შემცვლელი სუფთა კვადრატის შესაქმნელად, შემდეგ კი ის ICO-დ გადააკონვერტიროთ საუკეთესო გარეგნობის ფავიკონისთვის.