Како дизајнирати фавицон: Крајњи водич

Садржај

• Правила дизајна Фавицон-а
• 01. Учините то препознатљивим
• 02. Користите свој логотип
• 03. Нека буде јасно
• 04. Направите две верзије
• Фавицон таблица величине
• Фаворити десктопа
• Како се креира фавицон за прегледач радне површине
• Аппле
• Како створити Аппле Тоуцх фавицонс
• Андроид, Цхроме и Опера
• Како створити фавицон за Андроид, Цхроме и Опера
• Сафари
• Како направити фавицон за Сафари-јеву закачену картицу
• Остале врсте фавикона

• Правила дизајна Фавицон-а
• Фавицон таблица величине
• Фаворити десктопа
• Аппле
• Андроид, Цхроме и Опера
• Сафари
• Остале врсте фавикона

Дизајн Фавицон-а је важнији него што можда мислите. Величина је овде заиста битна, јер добро дизајниран логотип мора бити препознатљив у било којој величини. Треба да се скалира од масивних екрана до иконе која може бити мања од 16 к 16 пиксела, познате као фавицон. Сјајан пример фавицон дизајна је Гоогле лого. Савршено функционише за веће екране са својим великим „Г“ и препознатљивим текстом у четири боје. И још увек је препознатљив када се смањи на малени четворобојни „Г“ виђен у траци за адресу веб прегледача.

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

У овом чланку ћемо проћи кроз поступак дизајнирања савршеног фавикона. Укључићемо конкретне савете за прављење фавикона за Аппле уређаје, Андроид, Цхроме, Опера и Сафари. Плус згодан водич за различите величине и формате фавикона које требате знати. Користите брзе везе (десно) да бисте прешли право на одељак који желите.

- Фавицон правила дизајна
- Фавицон величине варалица
- Фаворити десктопа
- Аппле Тоуцх фавицонс
- Андроид, Цхроме и Опера
- Сафари-ова закачена картица

• Тражите другу врсту иконе? Погледајте наш водич за најбоље бесплатне сетове икона

У првим данима веба фавицон је једноставно био датотека са иконама 16к16пк, али данас је мало компликованији. Постоје различите величине и процеси фавикона за различите контексте. Стварање одговарајућег фавикона је наука.

Дакле, покренућемо неколико главних савета како би ваш фавицон требао изгледати, а затим пређимо на конкретне савете о томе како створити фавицон за различите контексте. Користићемо шаблон доступан на Примени пикселе да бисмо лако генерисали различите потребне величине фавикона, а као пример фавикон из Примени пикселе.

Правила дизајна Фавицон-а

01. Учините то препознатљивим

Прво што треба узети у обзир приликом дизајнирања фавикона је оно што треба да буде представљено на платну. Имајте на уму да се ваш фавицон приказује кориснику само када већ јестена вашој веб локацији или сте је обележили. Дакле, нема потребе да покушавате да привучете корисника својим фавицоном.

02. Користите свој логотип

Сматрајте фавиконе трезвеним путоказима који помажу корисницима у препознавању ваше веб странице приликом прегледавања њихових листа обележивача и почетних екрана. Због тога желите да користите свој логотип или било који симбол који кориснику најлакше омогућава да препозна вашу веб страницу. Ако немате логотип који одговара квадратном платну, користите најпрепознатљивији део свог логотипа.

03. Нека буде јасно

Постоји и неколико ствари које бисте требали избегавати. Не користите фавицон као маркетиншки алат - то значи да нема ознака са ценама, „нових“ или „ажурираних“ банера и тако даље. У ствари, уопште не желите да ставите текст у фавицон. Текст се не прилагођава добро, а шансе су да ће ионако бити нечитљив. Коначно, немојте користити фотографију - она ​​ће бити мутна и непрепознатљива у величини на којој ће се појавити.

04. Направите две верзије

Када су фавикони први пут представљени у Интернет Екплореру 5, појавили су се у УРЛ траци и на листи обележивача. Данас се фавикони приказују у многим другим контекстима, укључујући листе обележивача, меније пречица, па чак и мобилне и ТВ почетне екране. Због тога је тешко предвидети како ће се фавицон приказивати крајњем кориснику.

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

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

Лого на чврстом испуну
Ова верзија се користи у мрежним обележивачима и пречицама у којима прегледач или уређај маскирају позадину како би постигли једнообразан изглед у контексту.

Фавицон таблица величине

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

Раније фавицонс морали су бити у ИЦО формату. Данас је у реду да датотеке пружите у ПНГ формату (осим иконе закачене Сафари картице која би требало да буде СВГ).

Ако желите једноставан начин дизајнирања и извоза свих величина фавикона, погледајте предложак фавикона у делу Примени пикселе.

Сада ћемо детаљније погледати специфичне захтеве различитих случајева употребе.

Фаворити десктопа

Како се креира фавицон за прегледач радне површине

Почнимо са најједноставнијим фавицоном који ћете требати да направите: класични фавицон за класичне прегледаче на радној површини. Ова врста фавикона најбоље функционише на прозирној позадини, јер ће се често појављивати на траци УРЛ-а и на листама обележивача.

Морате да доставите ову врсту фавикона у три величине, све у ПНГ формат са прозирна позадина.

• 16к16
• 32к32
• 48к48

Аппле

Како створити Аппле Тоуцх фавицонс

Апплеов иОС користи Аппле Тоуцх Ицонсда представљају веб локације које су сачуване на почетном екрану иОС-а као обележивачи. То значи да ће Аппле Тоуцх Ицон бити заокружена на веверицу маске икона иОС апликација.

Такође ће бити приказано на било којој позадини коју је корисник изабрао за почетни екран. Имајући ово на уму, ваша Аппле Тоуцх икона треба да има солидна позадина за попуњавање стил.

Аппле фавицонс треба испоручити у а ПНГ формат. Можете се извући ако пружите а 180к180 Икона Аппле Тоуцх која ће се аутоматски прилагодити разним иПхоне и иПад величинама. То ће у већини случајева добро функционисати.

Ако не, можете да наведете додатне величине за различите Аппле уређаје:

• 60к60
• 76к76
• 120к120
• 152к152
• 180к180

линк рел = "аппле-тоуцх-ицон" сизес = "60к60" хреф = "/ аппле-тоуцх-ицон-60к60.пнг"> линк рел = "аппле-тоуцх-ицон" сизес = "76к76" хреф = "/ аппле -тоуцх-ицон-76к76.пнг "> линк рел =" аппле-тоуцх-ицон "сизес =" 120к120 "хреф =" / аппле-тоуцх-ицон- 120к120.пнг "> линк рел =" аппле-тоуцх-ицон " сизес = "152к152" хреф = "/ аппле-тоуцх-ицон- 152к152.пнг"> линк рел = "аппле-тоуцх-ицон" сизес = "180к180" хреф = "/ аппле-тоуцх-ицон- 180к180.пнг">

Андроид, Цхроме и Опера

Како створити фавицон за Андроид, Цхроме и Опера

Андроид, Цхроме и Опера користе андроид-хром-192к192.пнг и андроид-цхроме-512к512.пнг које Гоогле препоручује.

Од увођења прилагодљивих икона у Андроид, веб локације додате на Андроид почетни екран прикриваће дизајн 192к192, тако да икона добија облик према жељеном стилу маскирања корисника. Ово би могао бити облик веверице, елипсе, правоугаоника, заобљеног правоугаоника или капљице.

Морате да направите ПНГ фавицон витх солидна подлога, ат 192к192 и 512к512.

Примените ове фавиконе додавањем а манифест.јсон датотеку на вашу веб локацију и везу до ње у оквиру ознака:

веза рел = "манифест" хреф = "/ манифест.јсон">

Ево шифре за манифест.јсон датотека:

{"наме": "", "схорт_наме": "", "ицонс": [{"срц": "/ андроид-цхроме- 192к192.пнг", "величине": "192к192", "типе": "слика / пнг "}, {" срц ":" / андроид- цхроме-512к512.пнг "," величине ":" 512к512 "," типе ":" имаге / пнг "}]," тхеме_цолор ":" #фффффф ", "бацкгроунд_цолор": "#фффффф", "дисплаи": "самостално"}

Сафари

Како направити фавицон за Сафари-јеву закачену картицу

Ово је необично и то је једини фавицон који треба пружити векторски формат као ан СВГ датотека. Приказује се као икона сличице када корисник закачи картицу у прозор прегледача Сафари.

Овај фавицон мора бити 100% црна СВГ датотека са прозирна позадина. СВГ може бити само један слој, а сафари захтева виевБок атрибут СВГ-а треба поставити на "0 0 16 16’.

веза рел = "маск-ицон" хреф = "иоур_ицон.свг">

Остале врсте фавикона

Постоје неке димензије и формати фавицон-а који нису укључени у овај чланак, нпр. Гоогле ТВ, Цхроме веб продавница и Аппле иОС иконе пре иОС-а 7. Зашто? Зато што су застарели или зато што су ретко релевантни за просечног веб програмера.

Генерално, програмери и дизајнери треба да настоје да подрже што шири спектар уређаја и оперативних система, али понекад то једноставно нема смисла. Али, ако желите да видите комплетнију листу фавицон слика, обавезно погледајте овај фавицон цхеат схеет на ГитХуб-у.