Веб дизайнында, сиз билгендей, ар бир деталь маанилүү. Сиздин ресурсуңузга өткөн адам элементтердин ар бирин өз-өзүнчө көрбөйт, бирок бүт сүрөттү башка майда деталдардан турган пакет катары кабылдайт. Ошентип, ресурсуңузду иштеп чыгуу процессинде бир нерсени өткөрүп жиберсеңиз, бул детал кийинчерээк бүт комплексти, бүт композицияны бузушу мүмкүн.
Мындай майда-чүйдө нерсе, мисалы, баскычтын фону, кандайдыр бир кичинекей элементтин туура эмес тандалган шрифти, жада калса фавикон болушу мүмкүн. Чынында эле, өзүңүз караңыз - чоң, белгилүү сайттарда колдонуучунун браузеринин "Белгилер" бөлүмүндө аны көрсөткөн жеке сөлөкөт бар. Ансыз ресурсту иштеп чыгуучулар алгач умтулган композицияны түзө алышмак эмес.
Ошондуктан, сайтыңыз үчүн дизайн түзүп жатканда, фавикон сыяктуу деталга кам көрүшүңүз керек. Бул макалада биз аны ресурстун жалпы стилине кантип туура келтирүү, ошондой эле бул сүрөт кандай өлчөмдөрдө болушу керектиги жөнүндө сүйлөшөбүз.
Сайттын сөлөкөтү
Адегенде бул элемент эмне экенин аныктап алалы. Азыр, браузериңиздин өтмөктүн аталышын карап көрүңүз. Көрүнүп тургандай, анын сол жагында ресурстун логотипинин жөнөкөйлөштүрүлгөн версиясын көрсөткөн кичинекей сүрөт бар. Ошол эле сүрөт издөө натыйжаларында көрсөтүлгөн сайттын аталышынын жанында. Колдонуучу аталышты көргөндө ушул нерсени жетектейт.
Көптөгөн веб-мастерлер мындай сүрөт керек экенин түшүнүшөт - бирок сайт үчүн фавикондун өлчөмү кандай болорун аз эле адамдар билет. Ошондуктан, бул макалада биз мындай сөлөкөттү кантип жасоо жана аны ресурсуңузга кантип орнотуу жөнүндө гана маалымат бербестен, сүрөттүн өлчөмдөрү жөнүндө да сүйлөшөбүз.
Фавикондун максаты
Ошентип, сайттын башынын жанындагы сүрөт идентификация үчүн колдонулат. Бул анын түпкү максаты: биз аты-жөнүн көрүп турган сайтты билдирүү жана аны башкалардын алдында өзгөчө кылуу. Бул графиканы колдонуу аркылуу мүмкүн болушунча жөнөкөй жасалат: биз интуитивдик түрдө сүрөттөрдөгү маалыматты текст форматына караганда алда канча тез жана оңой кабыл алабыз. Фавикондор бизге дал ушундай кылууга жардам берет. Бирок фавикондун өлчөмү колдонуучунун көз алдында минималдуу экенин унутпаңыз. Бул жазуулар, кээ бир түшүндүрмөлөр же байланыш маалыматы түрүндөгү кошумча маалыматты камтышы мүмкүн болгон сайттын "башындагы" логотип эмес. Аттын жанындагы сөлөкөттө көрсөтүлө турган нерселердин баары фавикондун өлчөмүнө мүмкүн болушунча туура келиши керек. Жана ал, мурда айтылгандай, жөн гана миниатюралык (болгону 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 деп аталып, ресурсуңуздун тамырына жайгаштырылган. Болду, эми сүрөтүңүз автоматтык түрдө таанылып, бир канча убакыттан кийин ал сиздин сайтка шилтемеленет.
Бул байланыштыруудан тышкары, сиз дагы бир сапты кошсоңуз болот, ал сиздин сөлөкөтүңүздүн жайгашкан жерин "сунуштайт". Бул мындай көрүнөт:
Кодду сайттын башына орнотуңуз.
Тыянактар
Ошентип, биздин макаланы окугандан кийин, сиз сайт үчүн фавикондун өлчөмү жана ал эмне экенин түшүндүңүз. Ошондой эле, менимче, сиз ресурсуңуз үчүн туура иконканы табуу зарылчылык экенин түшүндүңүз деп ойлойм, анткени ал сиздин колуңузга таанылууну жогорулатуу жагынан да, атаандаштарыңыздын айрым кошумча өзгөчөлүгү жагынан да ойнойт. Жок дегенде эң чоң сайттар да ушундай кылышат, муну мисал катары алсак болот. Мындан тышкары, бул көп күч-аракетти талап кылбайт - бир жолу фавикон жасап, аны сайтыңызга туура орнотсоңуз, аны кийинки бир нече айга унута аласыз.
Ошондуктан, эксперименттен тартынбаңыз, жаңы нерсе ойлоп табыңыз, аракет кылыңыз - ошондо баары ойдогудай болот!
