Веб-дизайнда, сіз білетіндей, әрбір бөлшек маңызды. Ресурсыңызға ауысқан адам элементтердің әрқайсысын бөлек көрмейді, бірақ бүкіл кескінді басқа ұсақ бөлшектерден тұратын пакет ретінде қабылдайды. Осылайша, ресурсыңызды әзірлеу барысында бірдеңені жіберіп алсаңыз, бұл бөлшек кейінірек бүкіл кешенді, бүкіл композицияны бұзуы мүмкін.
Мұндай ұсақ-түйек, мысалы, түйменің фоны, кейбір шағын элементтің қате таңдалған қаріпі және тіпті фавикон болуы мүмкін. Шынында да, өзіңіз қараңыз - үлкен, танымал сайттарда пайдаланушы шолғышының «Бетбелгілер» бөлімінде оны көрсететін жеке белгіше бар. Онсыз ресурсты әзірлеушілер бастапқыда ұмтылған композицияны жасай алмас еді.
Сондықтан сайтыңыздың дизайнын жасаған кезде фавикон сияқты детальға мән бергеніңіз жөн. Бұл мақалада біз оны ресурстың жалпы стиліне қалай сәйкестендіру керектігі, сондай-ақ бұл кескіннің өлшемдері қандай болуы керектігі туралы сөйлесеміз.
Сайт белгішесі
Алдымен бұл элементтің не екенін анықтайық. Дәл қазір браузер қойындысының тақырыбын қараңыз. Көріп отырғаныңыздай, оның сол жағында ресурс логотипінің жеңілдетілген нұсқасын көрсететін шағын сурет бар. Сол сурет іздеу нәтижелерінде көрсетілген сайт атауының жанында да бар. Пайдаланушы тақырыпты көргенде осыны басшылыққа алады.
Көптеген веб-шеберлер мұндай сурет қажет екенін түсінеді, бірақ сайт үшін фавикон өлшемі қандай болатынын аз адамдар біледі. Сондықтан, бұл мақалада біз мұндай белгішені қалай жасауға болатыны және оны ресурсқа қалай орнатуға болатыны туралы ақпарат беріп қана қоймай, кескін өлшемдері туралы да айтамыз.
Фавиконның мақсаты
Сонымен, сайт тақырыбының жанындағы сурет сәйкестендіру үшін пайдаланылады. Бұл оның бастапқы мақсаты: атын көріп отырған сайтты білдіру және оны басқалардың алдында ерекше ету. Бұл графиканы қолдану арқылы мүмкіндігінше оңай орындалады: біз суреттердегі ақпаратты мәтіндік форматқа қарағанда әлдеқайда жылдам және оңай интуитивті түрде қабылдаймыз. Фавикондар бізге дәл осылай жасауға көмектеседі. Бірақ фавиконның өлшемі пайдаланушының көз алдында минималды екенін ұмытпаңыз. Бұл сайттың «тақырыпындағы» логотип емес, онда жазулар, кейбір түсініктемелер немесе байланыс ақпараты түріндегі қосымша ақпарат болуы мүмкін. Атаудың жанындағы белгішеде көрсетілетін барлық нәрсе фавикон өлшеміне барынша сәйкес келуі керек. Ал ол, жоғарыда көрсетілгендей, жай миниатюралық (бар болғаны 16-16 пиксель).
Қалай таңдау керекфавикон?
Сонымен веб-шебер өз сайтының белгішесін қалай жасай алады? Айта кету керек, сайт логотипін жай қысу көбінесе жұмыс істемейді. Белгілі бір ресурстың логотипі түрінде салынған эмблемаларда әртүрлі элементтер жиі көрінеді, олар әрқашан миниатюралық пішінде дұрыс көрсетілмейді. Мұндай әрекеттен дереу бас тартқан дұрыс.
Әрине, фавиконның өлшемі ол жерге жай ғана жазу енгізу туралы айтуға мүмкіндік бермейді. Бұл рұқсатта кез келген мәтін көрінбейтін болады. Бізге сайттың стилін беретін жаңа белгішені әзірлеу керек. Шешімдерді табу үшін тағы да ең үлкен сайттарға жүгінейік.
Көптеген адамдар фавикон ретінде қызмет атауының стильдендірілген бірінші әрпін пайдаланады. Бұл, мысалы, Bing, Yahoo, Yandex, Wikipedia, Google. Басқа тәсіл бар - егер сізде қысқа сайт атауы болса, оны белгішенің фоны ретінде орнатуға болады. Бұл жазуды дұрыс көрсету үшін фавиконның өлшемі (пиксельде, қайталаймын, 16-дан 16 пикселге жетеді) ол 3 әріптен аспауы керек. Бұл, мысалы, Aol қызметі.
Фавиконды қалай жасауға болады?
Сайт атауы үшін белгіше жасаудың бірнеше жолы бар. Әрине, ең оңай - әртүрлі дайын шешімдермен жұмыс істеу. Біз толыққанды кескінді азайту арқылы белгішені жасауға мүмкіндік беретін кейбір қызметтер немесе бағдарламалар туралы айта аламыз. Дегенмен, мен мұндай логотипті өз бетіңізше әзірлеуге кеңес берер едім. Бұл бірінші кезекте бередібір нәрсені үйрену мүмкіндігі; екіншіден, ол көбірек құралдармен қамтамасыз етеді. Бұл үшін нені салу керектігін білу керек, сонымен қатар соңғы нұсқада фавиконның өлшемі қандай болуы керек екенін білу керек. Біз сайттың белгіше өлшемі туралы сәл кейінірек айтатын боламыз, бірақ қазір біз мұндай суреттермен жұмыс істеудің кейбір нәзіктіктерін атап өтеміз. Атап айтқанда, сайтқа арналған фавиконның өлшемін айтпай-ақ, мұндай кескіннің пішімін нақтылау керек. Тәжірибелі дизайнерлер атап өткендей, суретті-p.webp
Сіз суретті, мысалы, эмблема сызылатын Photoshop көмегімен сақтауға болады.
Фавикон өлшемдері
Ендеше, енді іздеу нәтижелерінде сайт атауының жанында көретін суреттің қаншалықты үлкен болуы керектігі туралы сөйлесейік. Әдепкі бойынша, жоғарыда айтылғандай, оның өлшемі бар болғаны 16 пиксел (әр жағынан). Дегенмен, бұл суретті Photoshop бағдарламасында өңдеуге тырыссаңыз, оның қаншалықты ыңғайсыз екенін өзіңіз көресіз. Сондықтан, болашақта жай ғана жиектерінен қысылып, қажетті форматта сақтауға болатын үлкейтілген суретпен жұмыс істеуді ұсынамыз.
Мультиплатформа
Алайда, сіздің сайтыңыздағы фавиконның қаншалықты үлкен болуы керектігі туралы айтатын болсақ, тағы бір нәрсені есте ұстаған жөн. Барлық платформалар ресурс кескінін бірдей көрсетпейді. Мысалы, Retina дисплейі бар құрылғылар сіздің фавиконыңызды 32х32 пиксельде «көреді». Safari және жаңа Windows платформасында бұл белгішелер 64 өлшеміне жетедіпикселдер.
Сондықтан, белгішенің әртүрлі нұсқаларын сақтауды және болашақта пайдаланушы платформасына байланысты оның өзгеруін қамтамасыз етуді ұсынамыз. Тағы бір қызықты жайт – шолғышқа байланысты оның «кішірейетінін» ескере отырып, белгішені ең үлкен форматта жүктеп көруге болады.
Сыртқы редакторлар
Әрине, сіз Photoshop-ты жақсы меңгерсеңіз және фавиконның өлшемі қандай болуы керектігін және суретті сақтау кезінде оған қалай жетуге болатынын білсеңіз жақсы. Дегенмен, графикалық редакторларды бұрын соншалықты жақын кездестірмеген көптеген жаңадан бастағандар бар, сондықтан олар қалаған суретті оңай сала алмайды. Мұндай веб-шеберлерге көмектесу үшін сізді қызықтыратын белгішені автоматты түрде жасауға мүмкіндік беретін әртүрлі қызметтер бар. Олардың көпшілігі тіпті тегін, бұл пайдаланушыдан ешқандай инвестицияны қажет етпейді.
Кейде сізге жұмыс істеу үшін тіркелу қажет, бірақ, түсінгеніңіздей, бұл бір рет жасалады, өйткені компаниялар фавиконын жиі ауыстырмайды. Күнделікті логотипін өзгертетін, бірақ белгішені ұстамайтын Google-ды қараңыз.
Фавиконды қалай орнатуға болады?
Жалпы, сайтты қажетті кескінді дұрыс көрсететіндей етіп орнату өте қарапайым. Іздеу жүйелеріне, сондай-ақ қарапайым браузерлерге ақпаратты оқуға мүмкіндік беретін қарапайым қадамдар қатарын орындау жеткілікті.
Ол үшін алынған кескінді көмегімен сақтау керекfavicon.ico деп аталады және ресурстың түбіріне орналастырылады. Міне, енді сіздің суретіңіз автоматты түрде танылады және біраз уақыттан кейін ол сіздің сайтыңызбен байланыстырылады.
Бұл байланыстыруға қосымша, белгішеңіздің қай жерде орналасқанын «ұсынатын» тағы бір жолды қосуға болады. Мынадай көрінеді:
Кодты сайттың тақырыбына орнатыңыз.
Қорытынды
Сонымен, біздің мақаланы оқығаннан кейін сіз сайт үшін фавиконның өлшемі қандай болуы керектігін және оның қандай екенін түсіндіңіз. Сондай-ақ, сіз өзіңіздің ресурсыңыз үшін дұрыс белгішені табу қажеттілік екенін түсіндіңіз деп ойлаймын, өйткені ол танылуды арттыру тұрғысынан да, бәсекелестеріңіздің арасында қосымша ерекшелік тұрғысынан да сіздің қолыңызға әсер етеді. Кем дегенде, ең үлкен сайттар дәл осылай жасайды, оны мысал ретінде алуға болады. Сонымен қатар, бұл көп күш жұмсамайды - бір рет фавикон жасап, оны сайтыңызға дұрыс орнатқаннан кейін, сіз оны келесі бірнеше айда ұмыта аласыз.
Сондықтан эксперимент жасаудан тартынбаңыз, жаңа нәрсе ойлап табыңыз, көріңіз - сонда бәрі ойдағыдай болады!
