- Како створити фавицон
- Како направити фавицон у Пхотосхопу
- Како сачувати фавикон
- Како да убацим фавицон сајт
- Како заменити фавицон
- Како створити сложеније фавиконе
Тешко је погодити шта је фавицон када први пут чујете ову реч. Ово је минијатурна икона која се приказује на картицама прегледача, у линијама адреса и другим областима, у зависности од оперативног система који користите и Интернет прегледача. Може се сигурно назвати једним од најсложенијих и хировитијих елемената у дизајну веб сајта.
Креирање доброг фавикона је прилично тешко, пошто је икона мала, требало би да буде јасно и да се прикаже нешто везано за ваш сајт. Креирање фавикона који је компатибилан са свим популарним претраживачима такође може бити тежак задатак. У овом чланку бавићемо се свим сложеним аспектима његовог стварања. Ако вам треба и лого, онда имамо чланак како то урадити.
Како створити фавицон
Почнимо са дизајном фавикона. Добар дизајн, упркос компактности, треба да одражава суштину вашег сајта и да буде органски део корпоративног идентитета. Типично, икона је графички знак (икона) компаније, а не читав логотип (икона, текст и слоган).
Као фавицон, ове веб странице користе своје иконе (или слике које су им блиске).
Текст у фавицону не треба користити, јер ће текст бити нечитљив због мале величине слике. Једини изузетак од овог правила су светски познати текстуални знакови који се аутоматски повезују са одређеним брендом. На пример, он-лине ресурс Википедиа оставио је на фавицону своје велико слово "В", а Фацебоок - слово "Ф".
На овим фавиконима постоје слова која су снажно повезана са одређеним брендом. На пример, Фацебоок користи свој графички знак. Такође имајте на уму да су пиксели видљиви на Диснеи-овој слици. То је зато што је снимак снимљен на ретина дисплеју, који је компатибилан са 16 × 16 иконама, док сајтови користе 32 × 32 иконе.
Пошто су фавикони мале слике, сваки пиксел игра важну улогу. Понекад након смањења логотипа, појединачни пиксели постају видљиви, због чега слика постаје "замагљена". Да бисте постигли јасноћу, потребно је да уредите икону на нивоу пиксела.
Да бисте то избегли, потребно је да промените величину логотипа помоћу специјалних едитора као што су Пхотосхоп или ГИМП. Прво морате смањити величину слике на 64к64 пиксела (ово је фавицон највеће величине). Затим морате уредити сваки пиксел помоћу оловке док слика не постане јасна. Ово је тежак процес, али резултат је вредан тога. Када је фавицон 64к64 спреман, морате урадити исти посао са сликом од 16 × 16, 24 × 24 и 32 × 32 пиксела. Толико величина које требате исправно приказати у свим прегледницима и гаџетима:
- 64к64 - Ознаке прегледника Сафари;
- 32к32 - екрани високе резолуције (Ретина);
- 24к24 - боокмаркс Интернет Екплорер и МицроСофт Едге;
- 16к16 - Гоогле Цхроме и други претраживачи.
Како направити фавицон у Пхотосхопу
Прво морате направити неколико платна са горе наведеним димензијама.
Затим морате да додате икону, слово или неку другу слику на платно.
Како сачувати фавикон
Након креирања икона различитих величина, сачувајте сваку од њих као транспарентну ПНГ датотеку (24 бита). У Пхотосхопу можете да користите функцију Саве фор Веб која је доступна у менију Филе. Затим морате спојити све ПНГ датотеке у једну ИЦО датотеку. Истовремено можете користити и ПНГ датотеке и ИЦО датотеке, али често чак и Сафари и Цхроме преферирају само ИЦО формат. По мом мишљењу, лакше је креирати једну ИЦО датотеку. ИЦО формат није уобичајен, али на срећу постоје бројни алати који вам могу помоћи да конвертујете ваше датотеке у овај формат. У ту сврху, ја радије користим Кс-Ицон Едитор . Ово је бесплатна онлине услуга која тренутно претвара преузете слике у једну ИЦО датотеку, након чега је можете преузети. Ово није ништа компликовано, само пратите упутства на сајту. Ако себе сматрате очајном особом, можете експериментисати са уређајем за пикселе ове услуге и сами нацртати фавицон. (Иако радије уређујем фавиконе у професионалнијем уређивачу, на пример, у Пхотосхопу).
Отпремањем ПНГ слика у Кс-Ицон Едитор добићете једну ИЦО датотеку на излазу.
Како да убацим фавицон сајт
Дакле, већ имате ИЦО датотеку. Сада га морате додати на веб страницу. Преименујте датотеку на фавицон.ицо и поставите је у основну фасциклу вашег веб сајта (где су ускладиштени индек.хтмл фајл и друге стандардне датотеке). Након успешног додавања, можете га погледати на вашем сајту .цом / фавицон.ицо. Готово сви претраживачи траже датотеку фавицон.ицо у коријенској мапи. Зато је важно да преузмете фавицон у ову фасциклу. За компатибилност са различитим претраживачима, боље је да не додајете ниједан ХТМЛ елемент или линкове који указују на његову локацију. Овај трик ради за све прегледаче, све до ИЕ6. Такође, ако имате ВордПресс сајт, онда у многим темама можете додати фавицон у подешавањима теме. Овај метод се такође може користити.
Како заменити фавицон
Из неког необјашњивог разлога, претраживачи га додају у кеш. Стога, када отпремите нову ИЦО датотеку, претраживач може наставити да приказује ваш стари фавицон. Шта учинити у овом случају? Можете додати привремену ХТМЛ датотеку која означава локацију новог фавикона. Такође, на крају УРЛ-а морате додати кратки низ упита:
<линк рел = "икона пречице" хреф = "твоје веб странице .цом / фавицон.ицо? в = 2> />
Тако ће претраживач помислити да је ово јединствени УРЛ, и стога ће бити присиљен да прикаже нову икону. Након ажурирања фавикона, овај ХТМЛ код се може потпуно уклонити. Ако је потребно да направите промене у фавицон-у, користите исту технику, сваки пут повећавајући број после “в” у низу упита. Тако ће претраживач сваки пут перципирати овај УРЛ као јединствен и приказати своју нову верзију. И не заборавите да избришете ХТМЛ код након успешног ажурирања.
Како створити сложеније фавиконе
У овом чланку сам желела да опишем универзалан и једноставан начин за креирање фавикона који ће радити на готово свакој платформи. Али у веб дизајну и развоју нема граница савршенства. Ако желите да научите како да направите сложеније иконе, можете покушати да користите услугу фавицо.јс . Омогућава вам да креирате динамичке слике са различитим бројевима. Захваљујући овој икони, можете видети број непрочитаних порука, чак и када одговарајућа картица није активна. Ако желите да креирате анимиране фавиконе на мрежи, можете покушати да користите фавицон генератор фавицон.цц .
Више онлине генератора можете пронаћи овде .
Ако желите да поделите своје савете о стварању фавицона или поставите питање, чекам вас у коментарима!
Шта учинити у овом случају?Ицо?