Веб-сайттың бренді мен пайдаланушы интерфейсін қалыптастыруда фавикондар мен сайт белгішелері маңызды рөл атқарады. Олар браузер қойындыларында, бетбелгілерде, мобильді құрылғылардың негізгі экрандарында және прогрессивті веб-қолданбаларда (PWA) сайтты тануға көмектеседі. «Фавикон генераторы» құралы бір сурет файлын веб-сайтқа қажетті белгішелердің толық жинағына айналдыруға мүмкіндік береді.
Бұл құрал өңдеу жұмыстарын толығымен пайдаланушының браузерінде орындайды. Суретіңіз браузеріңізде белгішелерге айналдырылады және BroBroGo қызметіне ештеңе жүктелмейді.
Қолдау көрсетілетін форматтар және бастапқы суретке қойылатын талаптар
Генератор жұмыс істеуі үшін бір PNG, JPG немесе SVG сурет файлын қабылдайды. Сапалы белгішелер жинағын алу үшін бастапқы файлдың сипаттамаларына назар аудару қажет:
- Файл өлшемінің шегі: Құрал 50 MB көлеміне дейінгі файлдарды өңдей алады. Егер жүктелген файл бұл шектен асып кетсе, жүйеде «Бұл файл 50 МБ-тан асады. Кішірек бастапқы суретті пайдаланыңыз.» деген қате көрсетіледі.
- Форматты тексеру: Егер пайдаланушы басқа форматтағы файлды жүктеуге әрекет жасаса, «Тек PNG, JPG және SVG суреттеріне қолдау көрсетіледі.» деген хабарлама шығады. Суретті таңдамай тұрып әрекет жасаған жағдайда «Алдымен PNG, JPG немесе SVG суретін таңдаңыз.» ескертуі беріледі.
- Файлдың бүтіндігі: Егер файл зақымдалған немесе бос болса, «Бұл файлды сурет ретінде ашу мүмкін болмады. Ол зақымдалған, бос немесе сурет емес болуы мүмкін.» қатесі пайда болады. Жарамсыз SVG файлдары үшін «Бұл SVG файлын оқу мүмкін болмады. Файлдың жарамды SVG құжаты екенін тексеріңіз.» деген қате қарастырылған.
- Өлшем ұсыныстары: Растрлық форматтар (PNG немесе JPG) үшін кем дегенде 512 × 512 пиксель өлшемі ұсынылады. Егер жүктелген сурет кішірек болса, құрал «Шағын бастапқы сурет (
{w}×{h}пиксель): үлкен белгішелер бұлыңғыр көрінуі мүмкін. Ең жақсы нәтиже алу үшін 512 × 512 немесе одан үлкенірек суретті — немесе SVG файлын — пайдаланыңыз.» деген ескертуді шығарады. Сурет жүктелген кезде құрал оның нақты ені мен биіктігін «{w}×{h}пиксель» форматында көрсетеді.
Шаршы емес суреттерді өңдеу және фон параметрлері
Веб-сайт белгішелері әрқашан шаршы пішінді болуы керек. Егер жүктелген сурет шаршы болмаса, құрал оны пайдаланушы таңдаған екі режимнің бірімен үйлестіреді:
- Сыйдыру (бос орынмен): Бұл әдепкі режим. Бүкіл сурет көрінетін болып қалады, айналасында бос орынмен ортаға орналастырылады.
- Толтыру (қию): Сурет шаршыны толтырады және сыртқа шығып тұрған жиектері қиылады.
Фонды реттеу үшін екі түрлі нұсқа ұсынылады:
- Мөлдір: Әдепкі бойынша қолданылады. Мөлдір фон браузер қойындыларына сәйкес келеді.
- Түс: Пайдаланушы таңдаған нақты фон түсі қолданылады. iPhone негізгі экранының белгішелері үшін фон түсі қауіпсізірек, себебі iOS жүйесі белгішелердегі мөлдір аймақтарды автоматты түрде қара түске бояйды.
Жасалатын файлдар жинағы және олардың өлшемдері
Генератор барлық қажетті белгішелерді жасап, оларды бір ZIP файлына жинақтайды. Жинақтың ішінде келесі файлдар болады:
| Файл атауы | Сипаттамасы мен өлшемдері | Қолданылу мақсаты |
|---|---|---|
favicon.ico |
16, 32 және 48 пиксельдік нұсқаларды қамтиды | Классикалық қойынды белгішесі |
PNG белгішелері |
16, 32, 180, 192 және 512 пиксель | Қойындылар, iPhone/iPad негізгі экраны және Android құрылғылары |
site.webmanifest |
Үлкен белгішелерді тізімдейтін шағын мәтіндік файл | Құрылғыларға белгішелердің қайда екенін көрсетеді |
SVG векторы |
Бастапқы файл SVG болған жағдайда ғана қосылады | Заманауи браузерлер үшін кез келген өлшемде анық көрінеді |
Сайтқа орнату және интеграциялау
Белгішелерді жасау процесі аяқталғаннан кейін, оларды веб-сайтқа біріктіру үшін келесі қадамдарды орындау қажет:
- Генератор ұсынған ZIP файлын жүктеп алып, оның ішіндегі файлдарды сайтыңыздың түбірлік қалтасына орналастырыңыз.
- Құрал автоматты түрде жасап беретін HTML код үзіндісін көшіріп алыңыз.
- Бұл кодты веб-сайтыңыздағы әрбір беттің
<head>бөліміне қойыңыз.
Егер белгішелерді жасау барысында қате орын алса, жүйеде «Жасау сәтсіз аяқталды. Басқа суретті байқап көріңіз.» деген хабарлама көрсетіледі.
Жиі қойылатын сұрақтар (FAQ)
Белгішелер жинағында қандай файлдар бар?
Ішінде 16, 32 және 48 пиксельдік нұсқалары бар favicon.ico, 16, 32, 180, 192 және 512 пиксельдік PNG белгішелері және үлкен белгішелерді тізімдейтін site.webmanifest файлы. Егер SVG файлынан бастасаңыз, вектордың өзі де қосылады. Бір ZIP файлы бәрін қамтиды.
Бастапқы суреттің өлшемі қандай болуы керек?
SVG форматы өте қолайлы — әрбір белгіше вектордан салынады, сондықтан тіпті 16 пиксель де анық болып қалады. PNG немесе JPG үшін кем дегенде 512 × 512 өлшемінен бастаңыз; кішірек суреттердің өлшемі үлкейтіліп, бұлыңғыр көрінуі мүмкін.
Фон мөлдір болуы керек пе әлде түсті ме?
Қойынды белгішелері мөлдір күйде жақсы көрінеді. Дегенмен, iPhone және iPad негізгі экрандары мөлдір аймақтарды қара түске бояйды — егер адамдар сіздің сайтыңызды негізгі экранға қосуы мүмкін болса, фон түсін таңдаңыз.
Шаршы емес суретпен не болады?
Белгішелер шаршы болып табылады, бірақ суретіңіз ешқашан созылмайды. Әдепкі бойынша ол айналасында бос орынмен ортаға орналастырылады; ұзын жиектерді қиып тастау үшін «Толтыру (қию)» режиміне ауысыңыз.
Файлдар менің сайтымда қайда орналасады?
Оларды сайтыңыздың түбірлік қалтасына жүктеңіз, сонда favicon.ico файлына /favicon.ico ретінде қол жеткізуге болады, содан кейін жасалған жолдарды беттеріңіздің <head> бөліміне қойыңыз. Браузерлер қажетті өлшемді өздері таңдайды.