1. Како да креирате фавион
2. Како да направите фавион во Photoshop
3. Како да зачувате фавион
4. Како да вметнете веб-локација на фаворит
5. Како да го замените фавикон
6. Како да креирате посложени фаворики

Тешко е да се погоди што е фавион кога прв пат го слушаш овој збор. Ова е минијатурна икона која се прикажува на јазичињата на прелистувачите, во линии за адреси и во други области, во зависност од оперативниот систем што го користите и интернет прелистувачот. Тоа може безбедно да се нарече еден од најкомплексните и каприциозните елементи во веб-дизајнот.

Креирањето на добар фавион е доста тешко, бидејќи иконата е мала, треба да биде јасна и да прикаже нешто поврзано со вашиот сајт. Креирање на фавион кој е компатибилен со сите популарни пребарувачи исто така може да биде застрашувачка задача. Во оваа статија ќе се занимаваме со сите комплексни аспекти на неговото создавање. Ако исто така ви треба лого, тогаш имаме статија како да го направи тоа.

Како да креирате фавион

Да почнеме со дизајнот на фавикон. Добар дизајн, и покрај компактноста, треба да ја одразува суштината на вашата страница и да биде органски дел од корпоративниот идентитет. Типично, иконата е графички знак (икона) на една компанија, а не целото лого (икона, текст и слоган).

Како фавион, овие веб-страници ги користат нивните икони (или сликите близу до нив).

Текстот во фавикон не треба да се користи, бидејќи овој текст ќе биде нечитлив поради малата големина на сликата. Единствените исклучоци од ова правило се светски познатите текстуални ликови кои автоматски се поврзуваат со специфичен бренд. На пример, онлајн ресурс Википедија го остави на фавикон својата голема буква "W" и Facebook - буквата "F".

На овие фавиони има букви кои силно се поврзуваат со одреден бренд. На пример, Фејсбук го користи својот графички знак. Исто така, забележете дека пикселите се видливи на сликата на Дизни. Ова е затоа што сликата е снимена на Retina дисплеј, кој е компатибилен со 16 × 16 икони, додека веб-сајтовите користат 32 × 32 икони.

Бидејќи favicons се мали слики, секој пиксел игра важна улога. Понекогаш по намалувањето на логото, индивидуалните пиксели стануваат видливи, поради што сликата станува "нејасна". За да постигнете јасност, треба да ја уредите иконата на ниво на пиксел.

За да го избегнете ова, треба да го промените големината на логото користејќи специјални уредници како Photoshop или GIMP. Прво треба да ја намалите големината на сликата на 64x64 пиксели (ова е најголемата фавион со големина). Потоа треба да го уредите секој пиксел со помош на алатката Pencil додека сликата не е јасна. Ова е тежок процес, но резултатот е достоен за тоа. Кога favicon 64x64 е подготвен, треба да ја направите истата работа со сликата од 16 × 16, 24 × 24 и 32 × 32 пиксели. Толку многу големини што ви треба правилно да се прикажуваат сликата во сите прелистувачи и уреди:

• 64x64 - обележувачи на прелистувачи на Safari;
• 32x32 - дисплеи со висока резолуција (Retina);
• 24x24 - обележувачи Internet Explorer и MicroSoft Edge;
• 16x16 - Google Chrome и други прелистувачи.

Како да направите фавион во Photoshop

Прво треба да креирате неколку платна со горенаведените димензии.

Потоа треба да додадете икона, писмо или друга слика на платно.

Како да зачувате фавион

Откако креиравте икони со различни големини, зачувајте ја секоја како транспарентна PNG датотека (24 бита). Во Фотошоп, можете да ја користите функцијата Зачувај за веб достапна во менито Датотека. Потоа треба да ги споите сите PNG-датотеки во една ICO-датотека. Истовремено можете да ги користите и PNG-датотеките и ICO-датотеките, но често дури и Safari и Chrome претпочитаат само ICO-формат. Според мое мислење, полесно е да се создаде една датотека ICO. ICO формат не е многу честа, но за среќа постојат голем број на алатки кои можат да ви помогнат да ги конвертирате вашите датотеки во овој формат. За оваа намена, претпочитам да го користам Уредувач на X-икони . Ова е бесплатна онлајн услуга која веднаш ги претвора преземените слики во една ICO-датотека, по што можете да ја преземете. Ова не е ништо комплицирано, само следете ги инструкциите на страницата. Ако се сметате за очајна личност, можете да експериментирате со уредникот на пиксели на оваа услуга и да извлечете самиот фаворит. (Иако претпочитам да ги уредувам favicons во попрофесионален уредувач, на пример, во Photoshop).

Со поставување на вашите PNG слики во Уредувачот на X-икони, ќе добиете една ICO-датотека на излезот.

Како да вметнете веб-локација на фаворит

Значи, веќе имате датотека ICO. Сега треба да го додадете на веб-страницата. Преименувајте ја датотеката во favicon.ico и ставете ја во root директориумот на вашата веб-страница (каде се зачувуваат датотеката index.html и други стандардни датотеки). По успешното дополнување, можете да го погледнете на вашиот веб-сајт. / Favicon.ico. Речиси сите пребарувачи бараат датотека favicon.ico во root директориумот. Затоа, важно е да го преземете фавикон во оваа папка. За компатибилност со различни пребарувачи, подобро е да не додавате HTML елементи или линкови кои ја означуваат неговата локација. Овој трик работи за сите прелистувачи, до IE6. Исто така, ако имате WordPress сајт, тогаш во многу теми можете да додадете фавион во поставките за теми. Овој метод исто така може да се користи.

Како да го замените фавикон

Од некоја необјаснива причина, прелистувачите ја додаваат во кешот. Затоа, кога ќе испратите нова ICO-датотека, прелистувачот може да продолжи да го прикажува вашиот стар фавион. Што да направите во овој случај? Можете да додадете привремена HTML датотека која ја покажува локацијата на вашиот нов фавикон. Исто така, на крајот од URL-то треба да додадете кратка низа за пребарување:

<link rel = "икона за кратенка" href = "твое веб-страница. com / favicon.ico? v = 2" />

Значи прелистувачот ќе мисли дека ова е уникатен URL и, според тоа, ќе биде принуден да прикаже нова икона. По ажурирањето на фавикон, овој HTML код може целосно да се отстрани. Ако треба да направите промени во фавикон, користете истата техника, секој пат кога ќе го зголемите бројот по "v" во стрингот за пребарување. Така, прелистувачот секогаш ќе го доживува овој URL како единствен и ќе ја прикаже својата нова верзија. И не заборавајте да го избришете HTML кодот по успешното ажурирање.

Како да креирате посложени фаворики

Во оваа статија сакав да опишам еден универзален и лесен начин да креирам фавиони кои ќе работат на речиси секоја платформа. Но, во веб дизајн и развој не постои ограничување на совршенството. Ако сакате да дознаете како да креирате посложени икони, можете да пробате да ја користите услугата favico.js . Тоа ви овозможува да креирате динамични слики со различни броеви. Благодарение на оваа икона, можете да го видите бројот на непрочитани пораки, дури и кога соодветниот таб не е активен. Ако сакате да креирате анимирани страници на интернет, можете да пробате да користите генератор на favicon favicon.cc .

Повеќе онлајн генератори можете да ги најдете тука .

Ако сакате да ги споделите вашите совети за креирање на favicons или да поставите прашање, јас ве очекувам во коментарите!