Як стварыць фавикон для сайта: карысныя парады і сэрвісы

  1. Як стварыць фавикон
  2. Як зрабіць фавикон в Фотошопе
  3. Як захаваць фавикон
  4. Як ўставіць фавикон на сайт
  5. Як замяніць фавикон
  6. Як стварыць больш складаныя фавиконы

Складана здагадацца, што такое фавикон калі ўпершыню чуеш гэтае слова. Гэта мініяцюрная абразок, якая адлюстроўваецца на ўкладках браўзэраў, у адрасных радках і іншых галінах, у залежнасці ад выкарыстоўванай вамі аперацыйнай сістэмы і інтэрнэт браўзэра. Яго можна смела назваць адным з найбольш складаных і капрызных элементаў у дызайне сайта.

Стварыць добры фавикон даволі складана, так як абразок мае невялікі памер, яна павінна быць дакладнай і адлюстроўваць нешта звязанае з вашым сайтам
Стварыць добры фавикон даволі складана, так як абразок мае невялікі памер, яна павінна быць дакладнай і адлюстроўваць нешта звязанае з вашым сайтам. Стварыць фавикон, які будзе сумяшчальны з усімі папулярнымі браўзэрамі таксама можа стаць няпростай задачай. У гэтым артыкуле мы разбярэмся з усімі складанымі аспектамі яго стварэння. Калі вам патрэбен яшчэ і лагатып, то ў нас ёсць артыкул як яго зрабіць.

Як стварыць фавикон

Пачнем з распрацоўкі дызайну фавикона. Добры дызайн, нягледзячы на ​​сваю кампактнасць, павінен адлюстроўваць усю сутнасць вашага сайта і з'яўляцца арганічнай часткай фірмовага стылю. Звычайна ў якасці абразкі выступае графічны знак (абразок) кампаніі а не цэлы лога (іконка, тэкст і слоган).

У якасці фавикона гэтыя вэбсайты выкарыстоўваюць свае абразкі (ці блізкія да іх выявы) У якасці фавикона гэтыя вэбсайты выкарыстоўваюць свае абразкі (ці блізкія да іх выявы).

Тэкст у фавиконе выкарыстоўваць не варта, бо з-за маленькага памеру малюнка гэты тэкст будзе нечитабельным. Выключэннем з гэтага правіла могуць служыць толькі сусветна вядомыя тэкставыя сімвалы, якія аўтаматычна асацыююцца з пэўнымі брэндам. Напрыклад, анлайн-рэсурс Wikipedia пакінуў на фавиконе сваю загалоўную літару «W», а Facebook - літару «F».

На гэтых фавиконах прысутнічаюць літары, якія трывала асацыююцца з пэўным брэндам
На гэтых фавиконах прысутнічаюць літары, якія трывала асацыююцца з пэўным брэндам. Напрыклад, Facebook выкарыстоўвае свой графічны знак. Таксама зьвярніце ўвагу на тое, што на малюнку Disney бачныя пікселі. Гэта тлумачыцца тым, што скрыншот быў зроблены на Retina-дысплеі, які сумяшчальны з абразкамі памерам 16 × 16, у той час як сайты выкарыстоўваюць абразкі памерам 32 × 32.

Паколькі фавиконы гэта маленькія выявы, кожны піксель гуляе важную ролю. Часам пасля памяншэння лагатыпа становяцца бачныя асобныя пікселі, з-за чаго малюнак набывае «размыты» выгляд. Каб дамагчыся выразнасці, неабходна рэдагаваць абразок на піксельныя узроўні.

Каб пазбегнуць гэтага трэба змяніць памер лагатыпа з дапамогай спецыяльных рэдактараў, напрыклад Photoshop або GIMP
Каб пазбегнуць гэтага трэба змяніць памер лагатыпа з дапамогай спецыяльных рэдактараў, напрыклад Photoshop або GIMP. Спачатку трэба паменшыць памер малюнка да 64х64 пікселяў (гэта самы буйны памер фавиконки). Затым трэба адрэдагаваць кожны піксель з дапамогай інструмента «Аловак», пакуль малюнак не будзе выразным. Гэта працаёмкі працэс, але вынік таго варта. Калі фавикон 64х64 будзе гатовы, трэба прарабіць тую ж самую працу з выявай 16 × 16, 24 × 24 і 32 × 32 пікселяў. Столькі памераў трэба, каб малюнак правільна адлюстроўвалася ва ўсіх браўзэрах і гаджэтах:

  • 64х64 - закладкі браўзэра Safari;
  • 32х32 - дысплеі высокага дазволу (Рэцін);
  • 24х24 - закладкі браўзэра Internet Explorer і MicroSoft Edge;
  • 16х16 - Google Chrome і іншыя браўзэры.

Як зрабіць фавикон в Фотошопе

Для пачатку трэба стварыць некалькі палотнаў з вышэйазначанымі памерамі.

Затым трэба дадаць абразок, літару ці іншы малюнак на палатно
Затым трэба дадаць абразок, літару ці іншы малюнак на палатно.

Затым трэба дадаць абразок, літару ці іншы малюнак на палатно

Як захаваць фавикон

Стварыўшы абразкі розных памераў, захавайце кожную з іх як празрысты файл PNG (24 біт). У Photoshop можна скарыстацца функцыяй «Захаваць для вэб», даступнай у меню «Файл». Затым неабходна аб'яднаць усе PNG-файлы ў адзін ICO-файл. Можна адначасова выкарыстоўваць і файлы PNG, і файлы ICO, але нярэдка нават Safari і Chrome аддаюць перавагу выключна фармат ICO. На мой погляд, прасцей стварыць адзін ICO-файл. Фармат ICO нельга назваць вельмі распаўсюджаным, але, на шчасце, існуе шэраг інструментаў, якія дапамогуць вам канвертаваць вашыя файлы ў гэты фармат. Для гэтай мэты я аддаю перавагу выкарыстоўваць X-Icon Editor . Гэта бясплатны онлайн-сэрвіс, які імгненна канвертуе загружаныя выявы ў адзін ICO-файл, пасля чаго вы можаце яго спампаваць. У гэтым няма нічога складанага, проста прытрымлівайцеся інструкцыі на сайце. Калі вы лічыце сябе адчайным чалавекам, можаце паэксперыментаваць з піксельных рэдактарам гэтага сэрвісу і намаляваць фавикон самастойна. (Хаця я аддаю перавагу рэдагаваць фавиконы ў больш прафесійным рэдактары, напрыклад, у Photoshop).

Загрузіўшы свае PNG-малюнкі ў рэдактар X-Icon Editor, на выхадзе вы атрымаеце адзін файл фармату ICO
Загрузіўшы свае PNG-малюнкі ў рэдактар X-Icon Editor, на выхадзе вы атрымаеце адзін файл фармату ICO.

Як ўставіць фавикон на сайт

Такім чынам, у вас ужо ёсць файл фармату ICO. Цяпер яго неабходна дадаць на вэб-сайт. Пераназавіце файл у favicon.ico і размесціце яго ў каранёвай тэчцы вашага вэб-сайта (туды, дзе захоўваецца файл index.html і іншыя стандартныя файлы). Пасля паспяховага дадання вы можаце паглядзець яго па адрасе: вашсайт .com / favicon.ico. Практычна ўсе браўзэры шукаюць файл favicon.ico ў каранёвай тэчцы. Таму важна, каб вы загрузілі фавикон менавіта ў гэтую тэчку. Для забеспячэння сумяшчальнасці з рознымі браўзэрамі, лепш не дадаваць ніякія HTML-элементы або спасылкі, якія паказваюць на яго месцазнаходжанне. Гэты прыём працуе для ўсіх браўзэраў, аж да IE6. Таксама, калі ў вас сайт на WordPress, то ў многіх тэмах фавикон можна дадаць у наладах тэмы. Гэты спосаб таксама можна выкарыстоўваць.

Як замяніць фавикон

Па нейкай невытлумачальнай прычыне браўзэры дадаюць яго ў кэш. Таму калі вы загружаеце новы файл ICO, браўзэр можа працягваць паказваць ваш стары фавикон. Што ж рабіць у такім выпадку? Вы можаце дадаць часовы HTML-файл які паказвае на месцазнаходжанне вашага новага фавикона. Таксама ў канец URL неабходна дадаць кароткую радок запыту:

<Link rel = "shortcut icon» href = "вашсайт .com / favicon.ico? V = 2" />

Так браўзэр будзе думаць, што гэта ўнікальны URL, і, такім чынам, будзе вымушаны адлюстроўваць новую абразок. Пасля абнаўлення фавикона гэты HTML-код можна цалкам выдаліць. Калі вам трэба будзе ўнесці змены ў фавикон, скарыстайцеся тым жа прыёмам, кожны раз павялічваючы лічбу пасля «v» у радку запыту. Такім чынам, браўзэр будзе кожны раз ўспрымаць гэты URL як унікальны і адлюстроўваць новую яго версію. І не забывайце выдаляць HTML-код пасля паспяховага абнаўлення.

Як стварыць больш складаныя фавиконы

У гэтым артыкуле я хацеў апісаць універсальны і просты спосаб стварэння фавиконов, якія будуць працаваць на практычна любых платформах. Але ў вэб-дызайне і распрацоўцы няма мяжы дасканаласці. Калі вы хочаце навучыцца ствараць больш складаныя абразкі, то можаце паспрабаваць выкарыстоўваць сэрвіс favico.js . Ён дазваляе ствараць дынамічныя выявы з зменлівымі лічбамі. Дзякуючы такой абразку, вы зможаце бачыць колькасць непрачытаных паведамленняў, нават калі адпаведная ўкладка не актыўны. Калі вы хочаце стварыць аніміраваныя фавиконы онлайн, то можаце паспрабаваць выкарыстоўваць генератар фавиконов favicon.cc .

Больш онлайн генератараў вы можаце знайсці тут .

Калі вы хочаце падзяліцца сваімі парадамі па стварэнні фавиконов або задаць пытанне, я чакаю вас у каментарах!

Што ж рабіць у такім выпадку?
Ico?