Pri webdizajne, ako asi viete, záleží na každom detaile. Osoba, ktorá prešla na váš zdroj, nevidí každý z prvkov samostatne, ale vníma celý obrázok ako balík pozostávajúci z ďalších malých detailov. Ak vám teda niečo v procese vývoja zdroja chýba, tento detail môže neskôr pokaziť celý komplex, celú kompozíciu.
Takouto drobnosťou môže byť napríklad pozadie tlačidla, nesprávne zvolený font nejakého drobného prvku a dokonca aj favicon. Skutočne, presvedčte sa sami - veľké, známe stránky majú individuálnu ikonu, ktorá to označuje v sekcii "Záložky" prehliadača používateľa. Bez nej by vývojári zdroja neboli schopní vytvoriť kompozíciu, o ktorú sa pôvodne snažili.
Pri vytváraní dizajnu vašej stránky by ste si preto mali dať záležať na takom detaile, akým je favicon. V tomto článku si povieme, ako ho priradiť k všeobecnému štýlu zdroja, ako aj o tom, aké veľkosti by mal mať tento obrázok.
Ikona stránky
Najprv si definujme, čo tento prvok je. Práve teraz sa pozrite na názov karty prehliadača. Ako vidíte, naľavo od neho je malý obrázok, ktorý označuje zjednodušenú verziu loga zdroja. Rovnaký obrázok je aj pri názve stránky zobrazenej vo výsledkoch vyhľadávania. To je to, čím sa používateľ riadi, keď uvidí názov.
Mnoho webmasterov chápe, že takýto obrázok je potrebný – ale len málo ľudí vie, aká veľkosť favicon pre danú stránku bude najvhodnejšia. Preto v tomto článku poskytneme nielen informácie o tom, ako vytvoriť takúto ikonu a ako ju nainštalovať na svoj zdroj, ale tiež hovoriť o veľkostiach obrázkov.
Účel favicon
Na identifikáciu teda slúži obrázok v blízkosti hlavičky stránky. Toto je jeho pôvodný účel: vyjadriť stránku, ktorej meno vidíme, a urobiť ju viditeľnou v očiach ostatných. Toto sa robí čo najjednoduchšie pomocou grafiky: intuitívne vnímame informácie na obrázkoch oveľa rýchlejšie a jednoduchšie ako v textovom formáte. Favicony nám v tom pomáhajú. Nezabudnite však, že veľkosť favicon je v očiach používateľa minimálna. Toto nie je logo v „hlavičke“stránky, ktorá môže obsahovať dodatočné informácie vo forme nápisov, niektorých vysvetlení alebo kontaktných informácií. Všetko, čo je možné zobraziť v ikone vedľa názvu, by malo čo najviac zodpovedať veľkosti favicon. A on, ako už bolo naznačené, je jednoducho miniatúrny (iba 16 x 16 pixelov).
Ako si vybraťfavicon?
Ako teda môže správca webu navrhnúť ikonu pre svoju stránku? Je potrebné poznamenať, že obyčajná kompresia loga lokality, najčastejšie, nebude fungovať. Na emblémoch, ktoré sú umiestnené vo forme loga konkrétneho zdroja, sú často viditeľné rôzne prvky, ktoré nie sú vždy správne zobrazené v miniatúrnej podobe. Je lepšie okamžite opustiť takýto záväzok.
Veľkosť favicon samozrejme neumožňuje hovoriť o jednoduchom vložení nápisu. Akýkoľvek text bude pri tomto rozlíšení jednoducho neviditeľný. Potrebujeme vyvinúť novú ikonu, ktorá by vyjadrovala štýl stránky. Ak chcete nájsť riešenia, opäť sa obráťme na najväčšie stránky.
Mnoho ľudí používa štylizované prvé písmeno názvu služby ako favicon. Takýmto spôsobom sú napríklad Bing, Yahoo, Yandex, Wikipedia, Google. Existuje aj iný prístup – ak máte krátky názov stránky, môžete si ho nastaviť ako pozadie svojej ikony. Aby veľkosť favicon (v pixeloch dosahuje, opakujem, 16 x 16 pixelov) správne zobrazovala tento nápis, nemala by byť dlhšia ako 3 písmená. To robí napríklad služba Aol.
Ako vytvoriť favicon?
Existuje niekoľko spôsobov, ako vytvoriť ikonu pre názov lokality. Samozrejme, najjednoduchšie je pracovať s rôznymi hotovými riešeniami. Môžeme sa baviť o niektorých službách alebo programoch, ktoré umožňujú urobiť ikonu z plnohodnotného obrázka jej zmenšením. Odporúčal by som však vyvinúť takéto logo svojpomocne. Toto bude najprv dávaťmožnosť niečo sa naučiť; a po druhé, poskytne viac nástrojov. Potrebujete na to len vedieť, čo kresliť, a tiež vedieť, akú veľkosť by mala mať favicon vo finálnej verzii. O veľkosti ikony pre stránku budeme hovoriť o niečo neskôr, ale zatiaľ si všimneme niektoré jemnosti práce s takýmito obrázkami. Najmä bez uvedenia veľkosti favicon stránky by sa mal objasniť formát takéhoto obrázka. Ako poznamenávajú skúsení dizajnéri, obrázok musí byť uložený ako-p.webp
Obrázok si môžete uložiť napríklad pomocou Photoshopu, kde bude nakreslený znak.
Rozmery favicon
Poďme si teda teraz povedať, aký veľký by mal byť obrázok, ktorý vidíme vedľa názvu stránky vo výsledkoch vyhľadávania. Štandardne, ako už bolo spomenuté, je jeho veľkosť iba 16 pixelov (na každej strane). Ak však skúsite upraviť tento obrázok vo Photoshope, sami uvidíte, aké je to nepohodlné. Preto odporúčame pracovať so zväčšeným obrázkom, ktorý v budúcnosti stačí po okrajoch stlačiť a uložiť v požadovanom formáte.
Multiplatforma
Keď však hovoríme o tom, aká veľká by mala byť ikona favicon na vašom webe, je potrebné mať na pamäti ešte jednu vec. Nie všetky platformy zobrazujú obrázok zdroja rovnakým spôsobom. Napríklad zariadenia s displejom Retina „vidia“vašu favicon s rozmermi 32 x 32 pixelov. A v Safari a na novej platforme Windows a vôbec tieto ikony dosahujú veľkosť 64pixelov.
Preto vám odporúčame uložiť si rôzne verzie ikony a jednoducho zabezpečiť jej zmenu v závislosti od platformy používateľa v budúcnosti. Ďalší zaujímavý bod - môžete sa pokúsiť načítať ikonu v najväčšom formáte, rátajte s tým, že sa bude „zmenšovať“v závislosti od prehliadača.
Externí redaktori
Samozrejme je dobré, ak ovládate Photoshop a viete, akú veľkosť by mala mať favicon a ako to dosiahnuť pri ukladaní obrázka. Je však veľa začiatočníkov, ktorí sa s grafickými editormi len tak tesne nestretli, a tak požadovaný obrázok len tak ľahko nenakreslí. Na pomoc takýmto webmasterom existujú rôzne služby, ktoré vám umožnia automaticky vytvoriť ikonu, o ktorú máte záujem. Mnohé z nich sú dokonca zadarmo, čo si od používateľa nevyžaduje žiadne investície.
Niekedy sa stačí zaregistrovať, aby ste mohli pracovať, ale ako viete, urobí sa to raz – napokon, spoločnosti nemenia svoju favicon tak často. Pozrite sa na Google, ktorý mení logo každý deň, no nedotýka sa ikony.
Ako nainštalovať favicon?
Vo všeobecnosti je nastavenie vašej stránky tak, aby správne zobrazovalo obrázok, ktorý potrebujete, veľmi jednoduché. Stačí vykonať sériu jednoduchých krokov, ktoré umožnia vyhľadávacím nástrojom, ako aj jednoduchým prehliadačom čítať informácie.
Ak to chcete urobiť, výsledný obrázok musí byť uložený ss názvom favicon.ico a umiestnený v koreňovom adresári vášho zdroja. To je všetko, teraz bude váš obrázok rozpoznaný automaticky a po určitom čase bude prepojený s vašou stránkou.
Okrem tejto väzby môžete pridať ešte jeden riadok, ktorý „naznačí“, kde sa vaša ikona nachádza. Vyzerá to takto:
Nainštalujte kód do hlavičky stránky.
Závery
Po prečítaní nášho článku ste teda prišli na to, akú veľkosť by mala mať favicon pre stránku a aká je. Tiež si myslím, že ste pochopili, že nájdenie správnej ikony pre váš zdroj je nevyhnutnosťou, pretože vám to hrá do karát tak z hľadiska zvyšovania uznania, ako aj z hľadiska určitej ďalšej výnimočnosti medzi vašimi konkurentmi. Prinajmenšom najväčšie stránky robia to isté, čo možno brať ako ukážkový príklad. A okrem toho to nedáva veľa námahy – ak si raz vytvoríte favicon a správne si ho nainštalujete na svoje stránky, môžete na to na niekoľko mesiacov zabudnúť.
Neváhajte preto experimentovať, vymýšľať niečo nové, skúšať – a všetko bude fungovať!
