Примери за фавикон, най-добри практики и техники

Обръщаш ли внимание някога на тези мънички икони на върховете на раздели на браузъра? Какво ще кажете, когато запазите пряк път до уебсайт или страница онлайн? Тези миниатюрни изображения или фавикони са създадени специално за тази цел.

Има доста отчетлива разлика между това, което прави добра или лоша миниатюрна икона. Ще ви простят, че мислите, че дизайнерските решения в малкия мащаб имат значение. Но лошо проектираният фавикон може да се отрази зле на вашата марка.

Днес разглеждаме какви са тези икони, основни техники за дизайн за тях и спецификациите, които ще трябва да следвате.

Разгледайте елементи Envato

Какво е фавикон?

Просто favicon е малка, прозрачна икона, използвана за представяне на уебсайт, марка или бизнес. Favicons помагат за подобряване на потребителското изживяване, като предоставят последователен маркер, който казва на посетителите на уебсайта, че те са на един и същ сайт, докато навигират благодарение на последователна визуална информация.

Терминът favicon идва от „любимата икона“. Тази терминология датира в дните на Internet Explorer, когато страниците с отметки се наричат ​​„Любими“. Favicon за първи път беше приет от World Wide Web Consortium (W3C) за HTML 4.0, около 2000 г., и той започна да се появява по-последователно в прозорците на браузъра на следващата година.

Използвайте фавикони, за да преминете бързо между раздели на браузъра, да идентифицирате отметка или да намерите запазено приложение или пряк път на телефона си. Визуалният идентификатор е това, което повечето хора използват, за да свържат тези връзки и страници с десния бутон за достъп до тях.

Традиционно favicons използваха .ico файлов формат, но това вече не е проблем. Всеки прозрачен тип файл ще работи в повечето случаи; .png често е формат на избор.

Технически съображения

Едно време всички фаворити бяха супер малки квадратчета с 16 пиксела. Това вече не е така, когато трябва да се вземат предвид още екраните на ретината с висока разделителна способност и иконите за бърз достъп.

HTML 5 включва стандарти за фавикони с множество размери за всякакъв вид употреба, от миниатюрни иконки на браузър до икони на докинг станция за компютър до икони на началния екран. Вече дори не се нуждаете от този квадрат от 16 пиксела.

Модерни размери и употреба на фавикон:

• 32 × 32: Стандартен за повечето браузъри за десктоп (замества 16 × 16)
• 128 × 128: Chrome магазин и малка икона на Windows 8 star
• 152 × 152: iPad touch icon
• 167 × 167: iPad Retina touch icon
• 180 × 180: Икона на iPhone Retina
• 192 × 192: Препоръка за уеб приложения на Google Developer
• 196 × 196: Икона на началния екран на Android

Най-добри практики

Въпреки че изглежда като икона, която може да се окаже незначителна по отношение на цялостния дизайн, това далеч не е вярно.

Favicon казва много за вашата марка и уебсайт. Потребителите са ги очаквали, ако не могат да ги идентифицират по име. Тези малки елементи допринасят за цялостното потребителско изживяване и марка.

И така, как можете да се възползвате максимално от фавикон?

Имайте предвид тези най-добри практики:

• Favicon трябва да се свързва с идентичността на вашата марка, но често е твърде малък, за да включва цяло лого. Използвайте разпознаваем елемент, като първата буква на името на вашата марка или миниатюрен знак, който използвате във връзка с марката.
• Помислете за формата. Пространството за фавикон по подразбиране е квадратно. Ако искате нещо друго, прозрачен фон е необходим. Някои системи също могат да закръглят краищата, което прави още едно съображение, което трябва да имате предвид.
• Уверете се, че файлът е малък, но не твърде малък. Качете размер на favicon, който ще се изобрази правилно на повечето устройства, но няма да затъмни цялостния уебсайт.
• Избягвайте думи или сложни елементи в дизайна на фавикон.
• Придържайте се към обикновена рационализирана цветова палитра за фавикон. Прекалено малък е, за да се побърка с цвят. Ето защо повечето от тези малки икони използват малко повече от цвят на фон и преден план с много контраст между двете.

Техники на проектиране

Тъй като фавикон е малък, може да сте склонни да го проектирате по каприз във Photoshop. Това не е препоръчителният маршрут за дълголетие.

Основното правило за визуален дизайн за фавикони е да се поддържа дизайнът прост. Не прекалявайте с цвят, текст или елементи на марката.

Създайте своя фавикон във векторен инструмент като Illustrator или Sketch, след което експортирайте дизайна до необходимите размери. Това ще гарантира, че с промяна на разделителните способности на екрана, ще имате фавикон, който издържа на теста на времето. (Всичко, което трябва да направите, е да реекспортирате в нов размер.)

Основното правило за визуален дизайн за фавикони е да се поддържа дизайнът прост. Не прекалявайте с цвят, текст или елементи на марката. Разглеждайки примерите в тази публикация, ще видите, че почти всички тези мънички елементи са четими на 16 от 16 пиксела.

Избягвайте трикове като анимация; те се намесват само тук.

Считайте го за дизайнерско предизвикателство. Може да бъде доста трудно да създадете нещо толкова малко, че да е лесно да се чете.

Запазете файла като прозрачен png. Това е добър навик, който гарантира, че няма да стигнете с нечетни ръбове или граници на фавикон. (Нищо не изглежда по-лошо от назъбен бял ръб, заобикалящ иконата.)

Използвайте принципите на добрия дизайн. Никога не знаеш кога фавиконът може да се използва за нещо с по-голям, по-видим размер. Например, ако запазите отметка на уебсайт, можете да използвате голяма версия на фавикон. Същото важи и за докинг и дори за визуализации на резултатите от търсачките.

Въпреки че е малка, тази икона представлява вашата марка. Проектирайте го добре.

След като файлът е готов, можете да го добавите към вашия уебсайт само с няколко реда код. (Много теми на WordPress и създатели на уебсайтове вече имат включен фавикон елемент, така че дори не е нужно да мислите за тази стъпка.)

След като качите файла с изображение, поставете следния код в заглавката на вашия уебсайт, като отбелязвате, че „iconpath“ и „iconname“ се отнасят за вашия конкретен файлов елемент:

• HTML индексен файл:
• WordPress:

Примери

Примерите по-долу включват някои елементи на марката със свързани фавикони. (Уверете се, че щракнете върху и покажете на дизайнерите известна любов на техните Dribbble страници.)

Логотип на отзивчивия Prodigi.team

Предложена система за лого на Butterscotch

Дисплей с лого Favicon

Шаблон Favicon

Опция за лого на TEC 2

заключение

Това, което favicons липсва по размер, те съставят в потребителското изживяване. Тези икони служат като инструменти за навигация за посетителите на вашия сайт и тези, които са склонни да оставят твърде много раздели на браузъра отворени.

Като общо правило, favicon е бърз визуален идентификатор, който свързва потребителя с вашето цифрово присъствие. Внимавайте с него, за да сте сигурни, че е най-доброто и по-точно представяне на вашата марка.