როგორ შევქმნათ ფავიკონი.

გახსენით Favicon / ICO Generator და აირჩიეთ Image. ატვირთეთ PNG, JPG, JPEG, WebP ან GIF, ან აირჩიეთ Try a sample. სამუშაო მაგალითი იყენებს favicon-orbit.png-ს, 512 × 512 პიქსელიან იისფერ ორბიტის ნიშანს გამჭვირვალე კუთხეებით. შეყვანა არის 202,491 ბაიტი.

ბრენდისთვის დასრულებული ლოგოს გარეშე, აირჩიეთ Text ხელსაწყოს გვერდზე. შეიყვანეთ ერთი ან ორი ასო და აირჩიეთ Continue. რედაქტორი გთავაზობთ Modern sans, Classic serif და Monospace შრიფტებს, პლუს ცალკე ტექსტისა და ფონის ფერებს. მიიღება სამამდე სიმბოლო, მაგრამ დამატებითი სიმბოლოების ამოცნობა შეიძლება რთული გახდეს მცირე ზომებში.

შეინახეთ ორიგინალი ნამუშევარი. გენერატორი ქმნის ახალ ხატულების ფაილებს და არ ცვლის წყაროს. GIF შეყვანა ხდება სტატიკური ხატულა და არა ანიმირებული ფავიკონი.

მონოგრამისთვის, Font მენიუ იწყება სამი ჩართული სტილით. აირჩიეთ Use system fonts მხარდაჭერილ დესკტოპის ბრაუზერზე და მიეცით წვდომა თქვენს მოწყობილობაზე დაინსტალირებული შრიფტების დასამატებლად. გამოიყენეთ წინა და შემდეგი ისრები მიმდებარე შრიფტების შესადარებლად, ან აირჩიეთ ოჯახი და შეამოწმეთ ცოცხალი გადახედვა, განსაკუთრებით 16 პიქსელზე. შრიფტები რჩება თქვენს მოწყობილობაზე; ჩართული სტილები მუშაობს ნებართვის გარეშე.

რედაქტორი აჩვენებს ღია და მუქი ბრაუზერის ჩანართებს, პლუს გადახედვებს ხატულების საერთო ზომებში. ჯერ შეამოწმეთ 16-პიქსელიანი მაგალითი; ეს არის ყველაზე მკაცრი ტესტი იმისა, რჩება თუ არა ნიშანი ცნობადი. Apple Touch გადახედვა წარმოადგენს 180-პიქსელიან ექსპორტს და ნაჩვენებია უფრო პატარა სამუშაო სივრცეში.

ტელეფონზე გახსენით Settings. დატოვეთ Create from დაყენებული Uploaded image-ზე და Image fit დაყენებული Show the whole image-ზე. ამ ნიმუშისთვის, დააყენეთ Space around content 0-ზე და ჩართეთ Transparent background. წყარო უკვე შეიცავს თავის მომრგვალებულ იისფერ ფორმას და მკაფიო ზღვრებს, ამიტომ მას არ სჭირდება დამატებითი ფერადი ფონი.

სხვა წყაროსთან ერთად, Show the whole image ინარჩუნებს კიდეებს, ხოლო Fill the icon შეიძლება მათ ჭრიდეს. Rounded square, Square და Circle განსაზღვრავს გარე ფორმას. Transparent background ინარჩუნებს მკაფიო ადგილებს, მაგრამ ვერ აშორებს ფოტოზე უკვე დახატულ გაუმჭვირვალე ფონს. გადახედეთ უმცირეს გადახედვას ყოველი ჩარჩოს ცვლილების შემდეგ.

„ჩამოტვირთვის“ (Download) განყოფილებაში, ამ მაგალითისთვის აირჩიეთ „ვებსაიტის ხატულების პაკეტი“ (ZIP). დატოვეთ „ვებსაიტის სახელი“ (Website name) როგორც „My website“ ნიმუშისთვის, ან შეცვალეთ თქვენი პროექტის რეალური ბრენდის სახელით. ეს სახელი გამოიყენება site.webmanifest ფაილში; ის არ ემატება გამოსახულებას ტექსტის სახით.

აირჩიეთ „დაწყება“ (Start). ბრაუზერი გენერირებს შვიდკადრიან favicon.ico-ს კვადრატული გამოსახულებებით 16, 24, 32, 48, 64, 128 და 256 პიქსელზე. ის ასევე ქმნის PNG ხატულებს 16, 32, 48, 180, 192 და 512 პიქსელზე, მანიფესტს და ინსტალაციის ინსტრუქციებს. შედეგი არის ერთი ZIP ფაილი და არა ცალკე ჩამოსატვირთი ღილაკი თითოეული ხატულისთვის.

თუ მხოლოდ კლასიკური favicon.ico გჭირდებათ, ამის ნაცვლად აირჩიეთ „მრავალზომიანი ICO“. ეს სასარგებლოა, როდესაც ვებსაიტის პლატფორმა იღებს ICO ატვირთვას და არ საჭიროებს ცალკე პაკეტს.

„ჩამოტვირთვა“ ინახავს website-icons.zip ფაილს. რეალური სამუშაო მაგალითი შეიცავს ცხრა ფაილს და არის 304,351 ბაიტი. ზემოთ მოყვანილი შედარება გვიჩვენებს 512-პიქსელიან წყაროს ექსპორტირებული ICO-დან ამოღებული ნამდვილი 256-პიქსელიანი კადრის გვერდით, ნაცვლად სიმულირებული ბრაუზერის ეკრანის ანაბეჭდისა.

ამოაარქივეთ ZIP, ატვირთეთ ხატულების ფაილები თქვენი ვებსაიტის მთავარ დირექტორიაში და წაიკითხეთ INSTALL.txt. ის მოიცავს HTML ბმულის ტეგს ICO, PNG ხატულისთვის, Apple Touch ხატულისთვის და ვებ-მანიფესტისთვის. თუ ფაილებს ქვედირექტორიაში განათავსებთ, განაახლეთ როგორც HTML ბილიკები, ისე ხატულების ბილიკები site.webmanifest ფაილის შიგნით.

შეამოწმეთ თქვენი საიტი ახალ ბრაუზერის ჩანართში და იმ მოწყობილობებზე, რომლებიც თქვენთვის მნიშვნელოვანია. ბრაუზერებს შეუძლიათ ფავიკონების ქეშირება, ამიტომ ძველი ხატულა ავტომატურად არ ნიშნავს, რომ ინსტალაცია წარუმატებელი იყო. შეინახეთ წყარო გამოსახულება და ჩამოტვირთული პაკეტი რედაქტორის განახლებამდე, რადგან განახლება დაგაბრუნებთ ხელსაწყოს მთავარ გვერდზე.