В уеб дизайна, както вероятно знаете, всеки детайл има значение. Човек, който е преминал към вашия ресурс, не вижда всеки от елементите поотделно, а възприема цялото изображение като пакет, състоящ се от други малки детайли. По този начин, ако пропуснете нещо в процеса на разработване на вашия ресурс, този детайл може по-късно да развали целия комплекс, цялата композиция.
Такава дреболия може да бъде например фон на бутон, неправилно избран шрифт на някакъв малък елемент и дори фавикона. Наистина, уверете се сами - големите, добре познати сайтове имат индивидуална икона, която го показва в секцията „Отметки“на браузъра на потребителя. Без него разработчиците на ресурса не биха могли да създадат състава, към който първоначално са се стремели.
Ето защо, когато създавате дизайн за вашия сайт, трябва да се погрижите за такъв детайл като фавиконата. В тази статия ще говорим за това как да го съпоставим с общия стил на ресурса, както и какви размери трябва да има това изображение.
Икона на сайта
Първо, нека дефинираме какъв е този елемент. Точно сега погледнете заглавието на раздела на вашия браузър. Както можете да видите, вляво от него има малко изображение, което показва опростена версия на логото на ресурса. Същата снимка е и близо до името на сайта, показано в резултатите от търсенето. Това е, от което се ръководи потребителят, когато види заглавието.
Много уебмастъри разбират, че такава картина е необходима - но малко хора знаят какъв размер на иконата на фавикона за сайта ще бъде най-подходящ. Затова в тази статия не само ще дадем информация как да направите такава икона и как можете да я инсталирате на вашия ресурс, но и ще говорим за размерите на изображенията.
Целта на фавиконата
И така, снимката близо до заглавката на сайта се използва за идентификация. Това е първоначалната му цел: да изрази сайта, чието име виждаме, и да го изпъкне в очите на останалите. Това се прави възможно най-просто чрез използването на графики: ние интуитивно възприемаме информацията в снимките много по-бързо и по-лесно, отколкото в текстов формат. Фавиконите ни помагат да направим точно това. Но не забравяйте, че размерът на фавиконата е минимален в очите на потребителя. Това не е лого в „заглавката“на сайта, което може да съдържа допълнителна информация под формата на надписи, някои уточнения или информация за контакт. Всичко, което може да бъде показано в иконата до името, трябва да отговаря на размера на фавиконата, доколкото е възможно. А той, както вече беше посочено, е просто миниатюрен (само 16 на 16 пиксела).
Как да изберафавикон?
И така, как може уеб администраторът да проектира икона за своя сайт? Трябва да се отбележи, че простото компресиране на логото на сайта най-често няма да работи. На емблемите, които са поставени под формата на лого на определен ресурс, често се виждат различни елементи, които не винаги ще бъдат правилно показани в миниатюрна форма. По-добре е незабавно да се откажете от подобно начинание.
Разбира се, размерът на фавиконата не позволява да говорим за просто вмъкване на надпис там. Всеки текст просто ще бъде невидим при тази резолюция. Трябва да разработим нова икона, която да предава стила на сайта. За да намерим решения, отново, нека се обърнем към най-големите сайтове.
Много хора използват стилизираната първа буква на името на услугата като фавикона. Това е начинът, например, Bing, Yahoo, Yandex, Wikipedia, Google. Има и друг подход – ако имате кратко име на сайта, можете да го зададете като фон на вашата икона. За да може размерът на фавиконата (в пиксели достига, повтарям, 16 на 16 пиксела) да показва правилно този надпис, той трябва да бъде не по-дълъг от 3 букви. Ето какво прави например услугата Aol.
Как да създадете фавикона?
Има няколко начина да направите икона за името на сайта. Разбира се, най-лесно е да се работи с различни готови решения. Можем да говорим за някои услуги или програми, които ви позволяват да направите икона от пълноценно изображение, като го намалите. Въпреки това бих препоръчал да разработите такова лого сами. Това първо ще дадевъзможност да научите нещо; и второ, ще осигури повече инструменти. Всичко, което трябва да знаете за това, е какво да нарисувате, както и да знаете какъв размер трябва да бъде фавиконата в окончателната версия. За размера на иконите за сайта ще говорим малко по-късно, но засега ще отбележим някои тънкости при работа с такива изображения. По-конкретно, без да се споменава размера на фавиконата за сайта, форматът на такова изображение трябва да бъде изяснен. Както отбелязват опитни дизайнери, картината трябва да бъде запазена като-p.webp
Можете да запазите снимката, например, като използвате Photoshop, където ще бъде нарисувана емблемата.
Размери на Favicon
И така, нека сега да поговорим колко голяма трябва да бъде картината, която виждаме до името на сайта в резултатите от търсенето. По подразбиране, както вече споменахме, размерът му е само 16 пиксела (от всяка страна). Ако обаче се опитате да редактирате това изображение във Photoshop, сами ще се убедите колко е неудобно. Ето защо ви препоръчваме да работите с увеличена картина, която в бъдеще може просто да бъде компресирана по краищата и запазена в необходимия формат.
Мултиплатформен
Въпреки това, като говорим за това колко голям трябва да бъде фавиконата на вашия сайт, има още едно нещо, което трябва да имате предвид. Не всички платформи показват изображение на ресурс по един и същи начин. Например устройства с Retina дисплей „виждат“вашата фавикона с размери 32 на 32 пиксела. И в Safari, и на новата платформа на Windows, и изобщо, тези икони достигат размер от 64пиксели.
Затова ви препоръчваме да запазите различни версии на иконата и просто да предвидите промяната й в зависимост от платформата на потребителя в бъдеще. Друг интересен момент - можете да опитате да заредите иконата в най-големия формат, като разчитате, че ще се „свие“в зависимост от браузъра.
Външни редактори
Разбира се, че е добре, ако сте добри с Photoshop и знаете какъв размер трябва да бъде фавиконата и как да го постигнете, докато запазвате изображението си. Има обаче много начинаещи, които просто не са се срещали толкова отблизо с графичните редактори, така че не могат да нарисуват така лесно желаното изображение. За да помогнете на такива уеб администратори, има различни услуги, които ви позволяват автоматично да създавате иконата, която ви интересува. Много от тях са дори безплатни, което не изисква никаква инвестиция от потребителя.
Понякога трябва само да се регистрирате, за да работите, но, както разбирате, това се прави веднъж - в края на краищата компаниите не сменят толкова често фавиконата си. Разгледайте Google, който променя логото всеки ден, но не докосва иконата.
Как да инсталирам favicon?
По принцип настройването на вашия сайт по такъв начин, че да показва правилно изображението, от което се нуждаете, е много лесно. Достатъчно е да изпълните серия от прости стъпки, които ще позволят на търсачките, както и на простите браузъри, да прочетат информацията.
За да направите това, полученото изображение трябва да бъде запазено снаречен favicon.ico и поставен в корена на вашия ресурс. Това е всичко, сега вашето изображение ще бъде разпознато автоматично и след известно време ще бъде свързано към вашия сайт.
В допълнение към това обвързване, можете да добавите още един ред, който ще „предложи” къде се намира вашата икона. Изглежда така:
Инсталирайте кода в заглавката на сайта.
Заключения
И така, след като прочетете нашата статия, вие разбрахте какъв размер трябва да бъде фавиконата за даден сайт и какво представлява тя. Освен това, мисля, че разбрахте, че намирането на правилната икона за вашия ресурс е необходимост, тъй като това играе на вашите ръце както по отношение на увеличаването на признанието, така и по отношение на някои допълнителни отличия сред вашите конкуренти. Поне най-големите сайтове правят същото, което може да се вземе като отличен пример. И освен това не поражда много усилия - след като сте направили фавикона веднъж и сте го инсталирали правилно на вашия сайт, можете да забравите за него за следващите няколко месеца.
Затова, не се колебайте да експериментирате, измислете нещо ново, опитайте - и всичко ще се получи!
