favicon design je důležitější, než si myslíte,. Velikost zde opravdu záleží, protože dobře navržené logo musí být rozpoznatelné v jakékoli velikosti, na které je vidět. Musí škálovat od masivních obrazovek až po ikonu, která může být tak malá jako 16 x 16 pixelů, známá jako favicon. Skvělým příkladem designu favicon je logo Google. Funguje perfektně pro větší obrazovky s velkým “ G “ a výrazným čtyřbarevným textem., A je to stále stejně rozpoznatelné, když se zmenší na malé čtyřbarevné “ G “ viděné v adresním řádku webových prohlížečů.
favicon lze také považovat za ikonu zástupce, ikonu karty nebo ikonu záložky, takže musí vypadat část. Vidět favicon vzory, které fungují, viz naše zátah logo design inspiraci a podívejte se na tento úžasný sbírku iOS app ikony, které si to prostě právo.
v tomto článku projdeme procesem, jak navrhnout perfektní favicon., Budeme obsahovat konkrétní tipy pro vytvoření favicon pro zařízení Apple, Android, Chrome, Opera a Safari. Plus praktický průvodce různými velikostmi a formáty favicon, které potřebujete vědět. Pomocí rychlých odkazů (vpravo) přeskočte přímo do požadované sekce.
- Hledáte jiný druh ikony? Viz náš průvodce na nejlepší free sad ikon
V počátcích webu, favicon byl prostě 16x16px ikonu souboru, ale v dnešní době je to trochu složitější., Existují různé velikosti favicon a procesy pro různé kontexty. Vytvoření správného faviconu je věda.
Tak, jdeme na kick-off s tipy na to, co váš favicon by měl vypadat, a pak přejít na konkrétní rady, jak vytvořit favicon pro různé kontexty. Budeme používat šablonu k dispozici na Použít pixely snadno generovat různé velikosti favicon požadované, a favicon z aplikovat Pixelů jako příklad.,
Favicon design pravidla
, Aby bylo rozpoznatelné
první věc, aby zvážila při navrhování favicon je to, co musí být zastoupeny v plátně. Nezapomeňte, že váš favicon se uživateli zobrazí pouze tehdy, když jsou již na vašem webu nebo jej mají v záložce. Takže není třeba se snažit přilákat uživatele s favicon.
Použití vaše logo
Zvážit favicony jako střízlivý rozcestníky, které pomoci uživatelů v rozpoznání svých webových stránkách při procházení své záložky seznamy a homescreens., Proto chcete používat své logo, nebo podle toho, který symbol nejsnadněji umožňuje uživateli rozpoznat vaše webové stránky. Pokud nemáte logomark, který se hodí na kvadratické plátno, použijte nejznámější část vašeho loga.
Udržujte to jasné
existuje také několik věcí, kterým byste se měli vyhnout. Nepoužívejte favicon jako marketingový nástroj – to znamená žádné cenové značky, „nové“ nebo „aktualizované“ bannery a tak dále. Ve skutečnosti nechcete dát text do faviconu vůbec. Text se moc nemění a šance je, že to bude stejně nečitelné., Nakonec nepoužívejte fotografii-bude blátivá a nerozpoznatelná ve velikosti, na které se objeví.
Vytvořit dvě verze
Když favicony byly poprvé zavedeny v aplikaci Internet Explorer 5, které se objevily v adresním řádku a v seznamu záložek. Dnes jsou favicony zobrazeny v mnoha dalších kontextech, včetně seznamů záložek, nabídek zkratek a dokonce i mobilních a televizních domů., To ztěžuje předvídat, jak se váš favicon zobrazí koncovému uživateli.
Aby zajistili, že vaše favicon vypadá dobře v mnoha různých kontextech, že to bude vypadat v ideálním případě byste měli poskytnout dva favicon styly:
Logo na průhledném pozadí
Tato verze je zobrazena v adresním řádku, záložky, seznamy a další místa, kde favicon se zobrazí vedle vaší webové stránky URL nebo název.,
Logo na vyplnění
Tato verze se používá v mřížce-jako záložky a místní nabídky pokud prohlížeč nebo zařízení, masky, pozadí, dosáhnout jednotný vzhled v kontextu.
favicon velikost cheatsheet
jak již bylo zmíněno, různé kontexty vyžadují různé velikosti favicons. Níže naleznete rychlý průvodce různými formáty a rozměry, které budete muset dodat, abyste pokryli všechny hlavní případy použití.
dříve musely být favicony poskytovány ve formátu ICO., Dnes je v pořádku poskytnout soubory ve formátu PNG (s výjimkou ikony Safari Pinned Tab, která by měla být poskytnuta jako SVG).
Pokud chcete snadný způsob, jak navrhnout a exportovat všechny velikosti favicon, podívejte se na šablonu favicon v aplikaci Pixels.
Teď pojďme se blíže podívat na specifické požadavky různých případech použití.,
Desktop prohlížeč favicony
Jak vytvořit na ploše prohlížeči favicon
Pojďme začít s nejvíce jednoduché favicon, budete muset vytvořit: klasický favicon pro klasické desktopové prohlížeče. Tento typ favicon funguje nejlépe na průhledném pozadí, protože se často objeví na panelu URL a v seznamech záložek.,
Budete muset poskytnout tento typ favicon ve třech velikostech, všechny ve formátu PNG s průhledným pozadím.,
- 16×16
- 32×32
- 48×48
Apple
Jak vytvořit Apple Touch favicony
Apple iOS používá Apple Dotykové Ikony se představují webové stránky, které byly uloženy na domovské obrazovce iOS jako záložky. To znamená, že ikona Apple Touch bude zaokrouhlena na squircle masku ikon aplikací pro iOS.
zobrazí se také na jakémkoli pozadí, které uživatel zvolil pro svou úvodní obrazovku. S ohledem na tuto skutečnost by vaše ikona Apple Touch měla mít pevný styl pozadí.,
Apple favicony by měly být dodávány ve formátu PNG. Můžete se dostat pryč s poskytováním 180×180 Apple dotyková ikona, která bude automaticky měřítko pro různé velikosti iPhone a iPad. Ve většině případů to bude fungovat dobře.,
Pokud ne, můžete poskytnout další velikosti pro různé Apple zařízení:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome a Opera
Jak vytvořit favicon pro Android, Chrome a Opera
Android, Chrome a Opera používat android-chrome-192×192.png a android-chrome-512×512.png, který Google doporučuje.,
od zavedení adaptivních ikon v systému Android budou webové stránky přidané do domovské obrazovky Android maskovat design 192×192, takže ikona se formuje po preferovaném stylu maskování uživatele. Může to být čtverec, elipsa, obdélník, zaoblený obdélník nebo tvar slzy.
Budete muset vytvořit PNG favicon s solidní zázemí, na 192×192 a 512×512.,
implementujte tyto favicony přidáním manifestu.json souboru na vaše stránky a odkaz na něj v rámci tagy:
<link rel="manifest" href="/manifest.json">Zde je kód pro záznam.soubor json:
Safari
jak vytvořit favicon pro připnutou kartu Safari
toto je liché a je to jediný favicon, který musí být poskytnut ve vektorovém formátu jako soubor SVG. Zobrazí se jako ikona miniatury, když uživatel připne kartu do okna prohlížeče Safari.,
Tento favicon musí být 100% černá SVG souboru s průhledným pozadím. SVG může být pouze jedna vrstva a safari vyžaduje, aby byl atribut viewBox SVG nastaven na „0 0 16 16“.
<link rel="mask-icon" href="your_icon.svg">Další favicon typy
Tam jsou některé favicon rozměry a formáty, které nebyly zahrnuty v tomto článku, např., Google TV, Chrome Web Store a pre-iOS 7 Apple Touch ikony. Proč? Protože byly zastaralé nebo proto, že jsou zřídka relevantní pro průměrného webového vývojáře.
obecně by se vývojáři a návrháři měli snažit podporovat co nejširší škálu zařízení a operačních systémů, ale někdy to prostě nedává smysl. Ale pokud chcete vidět úplnější seznam obrázků favicon, ujistěte se, že se podíváte na tento favicon cheat sheet na Githubu.,
- top design trendy pro rok 2020
- 15 profesionální písma pro designéry
- 27 nejlepších sad zdarma ikony
