Ako navrhnúť favicon: Dokonalý sprievodca

favikónový dizajn
(Obrazový kredit: Michael Flarup)
SKOČ DO:


Dizajn faviconu je dôležitejší, ako by ste si mysleli. Na veľkosti tu skutočne záleží, pretože dobre navrhnuté logo musí byť rozpoznateľné pri akejkoľvek veľkosti, na ktorej je vidieť. Musí sa škálovať od masívnych obrazoviek až po ikonu, ktorá môže mať veľkosť iba 16 x 16 pixelov, a ktorá sa nazýva favicon. Skvelým príkladom dizajnu favicon je logo Google. Funguje perfektne na väčšie obrazovky s veľkým „G“ a výrazným štvorfarebným textom. A stále je to také rozpoznateľné, keď sa zmenší na malé štvorfarebné písmeno „G“, ktoré sa zobrazuje v paneli s adresou webových prehľadávačov.

Favikónu je tiež možné vidieť ako ikonu skratky, ikonu karty alebo ikonu záložky, takže je potrebné vyhľadať príslušnú časť. Ak chcete vidieť vzory favicon, ktoré fungujú, pozrite si našu zhrnutie inšpirácia dizajnom loga a pozrite sa na túto ohromujúcu zbierku súborov Ikony aplikácií pre iOS že to bude tak akurát.

V tomto článku si ukážeme postup, ako navrhnúť dokonalý favicon. Zahrnieme konkrétne tipy na vytvorenie favikonu pre zariadenia Apple, Android, Chrome, Opera a Safari. Plus praktický sprievodca rôznymi veľkosťami a formátmi favicon, ktoré potrebujete vedieť. Pomocou Rýchlych odkazov (vpravo) preskočíte priamo na požadovanú časť.

Dizajn favicon: Rýchle odkazy

- Pravidlá návrhu favicon
- Favikónový cheatsheet veľkostí
- Favikóny prehliadača pre stolné počítače
- Favikóny Apple Touch
- Android, Chrome a Opera
- Pripnutá karta Safari



ako sa stať návrhárom loga

V začiatkoch webu bol favicon jednoducho súbor s ikonou 16x16px, ale v dnešnej dobe je to trochu komplikovanejšie. Existujú rôzne veľkosti a procesy favicon pre rôzne kontexty. Vytvorenie správnej favikony je veda.

Začneme teda niektorými špičkovými tipmi, ako by mala vaša favicon vyzerať, a potom prejdeme ku konkrétnym radám, ako vytvoriť favicon pre rôzne kontexty. Budeme používať šablóna dostupná na stránke Apply Pixels na jednoduché generovanie rôznych požadovaných veľkostí favikónov a ako príklad favikón z aplikácie Apply Pixels.

Pravidlá návrhu favicon

01. Urobte to rozpoznateľným

Prvá vec, ktorú je potrebné vziať do úvahy pri navrhovaní favicon, je to, čo musí byť na plátne zastúpené. Pamätajte, že vaša ikona sa zobrazuje používateľovi iba vtedy, ak už je k dispozícii na svojom webe alebo si ho označte ako záložku. Nie je potrebné sa snažiť prilákať používateľa pomocou svojej favicon.

Favikóny považujte za triezve ukazovatele, ktoré používateľom pomáhajú pri rozpoznávaní vášho webu pri prehľadávaní zoznamov záložiek a domovských obrazoviek. Preto chcete použiť svoje logo alebo akýkoľvek symbol, ktorý používateľovi najľahšie umožní rozpoznať váš web. Ak nemáte logomark, ktorý by sa hodil na kvadratické plátno, použite najznámejšiu časť svojho loga.

03. Majte to jasné

Existuje tiež niekoľko vecí, ktorým by ste sa mali vyhnúť. Nepoužívajte favicon ako marketingový nástroj - to znamená, že neexistujú žiadne cenovky, „nové“ alebo „aktualizované“ bannery atď. V skutočnosti vôbec nechcete vkladať text do favicon. Text nemá mierku dobre a je pravdepodobné, že bude aj tak nečitateľný. Nakoniec nepoužívajte fotografiu - bude blatistá a nerozoznateľná pri veľkosti, v ktorej sa objaví.

04. Vytvorte dve verzie

Favicon na priehľadnom pozadí a jeden na pozadí s plnou výplňou

Rôzne pozadia fungujú dobre pre rôzne kontexty(Obrázkový kredit: Michael Flarup / Použiť pixely)

Keď boli favikony prvýkrát predstavené v prehliadači Internet Explorer 5, zobrazovali sa na paneli s adresou URL a v zozname záložiek. Favikóny sa dnes zobrazujú v mnohých ďalších kontextoch vrátane zoznamov záložiek, kontextových ponúk a dokonca aj domovských obrazoviek mobilných a televíznych prijímačov. To sťažuje predvídanie toho, ako sa vaša favicon zobrazí koncovému používateľovi.

Aby váš favicon vyzeral dobre v mnohých rôznych kontextoch, v ktorých sa objaví, ideálne je poskytnúť dva štýly favicon:

Logo na priehľadnom pozadí
Táto verzia sa zobrazuje na paneli s adresou URL, zoznamoch záložiek a na ďalších miestach, kde sa favicon zobrazuje vedľa adresy URL alebo názvu vášho webu.

ako sa stať konceptuálnym umelcom

Logo na pevnej výplni
Táto verzia sa používa v záložkách a kontextových ponukách podobných mriežke, kde prehliadač alebo zariadenie maskuje pozadie, aby sa dosiahol jednotný vzhľad v kontexte.

Cheat sheet s veľkosťou favicon

Ako už bolo spomenuté, rôzne kontexty vyžadujú rôzne veľké ikony. Nižšie nájdete stručného sprievodcu rôznymi formátmi a dimenziami, ktoré budete musieť dodať, aby ste pokryli všetky hlavné prípady použitia.

Predtým museli byť favikóny poskytované vo formáte ICO. Dnes je v poriadku poskytovať súbory vo formáte PNG (okrem ikony Safari Pinned Tab, ktorá by mala byť poskytnutá ako SVG).

Ak chcete jednoduchý spôsob navrhovania a exportu všetkých veľkostí favikónov, pozrite sa na ikonu šablóna favicon viac ako pri použití pixelov.

Favicon cheatsheet

Toto sú najbežnejšie veľkosti favikónov(Obrázkový kredit: emergeinteractive)

Teraz sa pozrime bližšie na konkrétne požiadavky rôznych prípadov použitia.

Favikóny prehliadača pre stolné počítače

Ako vytvoriť favicon prehliadača pre počítač

Začnime s najpriamočiarejšou ikonou, ktorú musíte vytvoriť: klasickou ikonou pre klasické prehliadače na pracovnej ploche. Tento typ favicon funguje najlepšie na priehľadnom pozadí, pretože sa často zobrazuje na paneli s adresou URL a v zoznamoch záložiek.

Favikony zobrazené v paneli so záložkami a na paneli s adresou URL v prehliadači Google Chrome

Favikony klasického štýlu zobrazené v paneli so záložkami a na paneli URL v prehliadači Google Chrome(Obrázkový kredit: Michael Flarup / Použiť pixely)

Tento typ favicon budete musieť poskytnúť v troch veľkostiach Formát PNG s priehľadné pozadie .

  • 16x16
  • 32x32
  • 48x48

Apple

Ako vytvoriť favikony Apple Touch

IOS spoločnosti Apple používa Apple Touch Icons reprezentovať webové stránky, ktoré boli uložené na domovskú obrazovku systému iOS ako záložky. To znamená, že ikona Apple Touch bude zaokrúhlená na veverička maska ​​ikon aplikácií pre iOS.

Zobrazí sa tiež na akomkoľvek pozadí, ktoré si používateľ vybral pre svoju domovskú obrazovku. S týmto vedomím by mala mať vaša Apple Touch Icon a plné výplňové pozadie štýl.

Domovská obrazovka iPhone s ikonami

Táto ikona sa zobrazí na pozadí domovskej obrazovky používateľa(Obrázkový kredit: Michael Flarup / Použiť pixely)

Favikóny spoločnosti Apple by mali byť dodávané v a Formát PNG . Môžete ujsť poskytnutím a 180 x 180 Ikona Apple Touch, ktorá sa automaticky zmení na rôzne veľkosti zariadení iPhone a iPad. Vo väčšine prípadov to bude fungovať dobre.

najlepší fotoaparát na fotografovanie pri slabom osvetlení

Ak nie, môžete poskytnúť ďalšie veľkosti pre rôzne zariadenia Apple:

  • 60 x 60
  • 76 x 76
  • 120 x 120
  • 152x152
  • 180 x 180

Android, Chrome a Opera

Ako vytvoriť favicon pre Android, Chrome a Opera

Android, Chrome a Opera používajú android-chrome-192x192.png a android-chrome-512x512.png že Google odporúča .

Od zavedenia adaptívnych ikon v systéme Android budú webové stránky pridané na úvodnú obrazovku systému Android maskovať dizajn s rozmermi 192 x 192, takže ikona má tvar podľa preferovaného štýlu maskovania používateľom. Môže to byť kruhový tvar, elipsa, obdĺžnik, zaoblený obdĺžnik alebo tvar slzy.

Favicons na domovskej obrazovke Android Pie

super veci do činenia s povrchom pro 4
Favikóny tu budú maskované do rôznych tvarov podľa preferencií používateľa(Obrázkový kredit: Michael Flarup / Použiť pixely)

Musíte vytvoriť PNG favicon s pevné pozadie , o 192 x 192 a 512x512 .

Tieto ikonky implementujte pridaním a manifest.json súbor na svoju stránku a na ňu odkazujte v rámci značiek:

Tu je kód pre manifest.json spis:

{ 'name': '', 'short_name': '', 'icons': [ { 'src': '/android-chrome- 192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': '/android- chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' } ], 'theme_color': '#ffffff', 'background_color': '#ffffff', 'display': 'standalone' }

Safari

Ako vytvoriť favicon pre pripnutú kartu Safari

Toto je nepárne a je to jediný favikón, ktorý musí byť uvedený v vektorový formát ako Súbor SVG . Keď používateľ pripne kartu na okno prehľadávača Safari, zobrazí sa ako ikona miniatúry.

ikona favicon: formát SVG

Na rozdiel od všetkých ostatných favikónov je táto ikona generovaná z obrázka SVG(Obrázkový kredit: Michael Flarup / Použiť pixely)

Tento favicon musí byť 100% čierny súbor SVG s priehľadné pozadie . SVG môže byť iba jedna vrstva a safari vyžaduje viewBox atribút SVG nastavený na „ 0 0 16 16 ' .

Ostatné typy favikónov

V tomto článku nie sú zahrnuté niektoré rozmery a formáty favicon, napr. Google TV, Internetový obchod Chrome a Apple Touch ikony staršie ako iOS 7. Prečo? Pretože boli zastarané alebo preto, že sú pre priemerného webového vývojára zriedka relevantné.

Vo všeobecnosti by sa vývojári a dizajnéri mali usilovať podporovať čo najširšiu škálu zariadení a operačných systémov, ale niekedy to nemá zmysel. Ak si však chcete pozrieť úplnejší zoznam obrázkov favicon, nezabudnite sa na to pozrieť favicon cheat sheet na GitHub.

Čítaj viac: