Favicon je úžasný malý obrázok vedľa panela s adresou vo vašom prehliadači. Práve to odlišuje váš web na karte záložiek a dá sa použiť na zvýšenie povedomia o značke. Ak máte web, ale nikdy ste neuvažovali o vytvorení faviconu, mali by ste svoje rozhodnutie prehodnotiť. Vývojári softvéru stále častejšie používajú ikony favicon pre rôzne aspekty svojich aplikácií, ako sú ikony domovskej obrazovky na tabletoch. Našťastie je navrhovanie, vytváranie a implementácia faviconu niečo, čo môže urobiť takmer každý, ak dodržiava správne kroky.
Kroky
Metóda 1 z 3: Navrhovanie vášho Favicon
Krok 1. Vytvorte favicon, ktorý bude reprezentovať vašu webovú stránku
Typ vašej webovej stránky by mal určovať vzhľad vašej favicon. Skúste navrhnúť niečo, čo bude zodpovedať imidžu vašej značky a čo bude pre ľudí rozpoznateľné a zapamätateľné. Váš favicon bude prvou vecou, ktorú ľudia uvidia pri pohľade na karty vo svojom prehliadači a tiež sa zobrazia v záložkách ľudí.
- Ak máte napríklad webovú stránku o jedle, výber favikónu s dizajnom ovocia alebo zeleniny ho môže urobiť nezabudnuteľnejším.
- Ak sú vaše webové stránky určené pre právnickú firmu alebo investičnú spoločnosť, je najlepšie použiť tradičné a elegantné favicon.
- Ak je váš web zameraný na mladších ľudí, skúste vytvoriť hravé a farebné favicon.
Krok 2. Rozhodnite sa, či chcete priehľadné pozadie
Ak neurčíte pozadie, vyplní sa bielou farbou, ktorá nemusí priliehať k vašej značke. Priehľadné pozadie bude v niektorých prípadoch preberať farbu prehliadača osoby a bude pôsobiť efektívnejšie. V ostatných prípadoch farba pozadia spôsobí vyskočenie písmen v popredí alebo grafiky. Rozhodnite sa, čo by bolo pre váš návrh najlepšie, a pri vytváraní ho majte na pamäti.
Najzákladnejší favicon je štvorec 16x16 a má farbu pozadia
Krok 3. Vytvorte favicon, ktorý sa ľahko číta
Pretože obrázok favikónu, ktorý budete používať, je malý, je dôležité, aby ste svoju značku mohli propagovať bez toho, aby ste zamieňali návštevníkov. Ťažko čitateľný favión zanecháva negatívny dojem a v mysli návštevníka môže vytvárať otázky o kvalite práce, ktorú môžete poskytnúť. Príliš zložité obrázky a logá nevyzerajú dobre, keď sú zmenšené na 16 x 16 alebo 32 x 32 pixelov.
- Ak je vaše existujúce logo príliš komplikované, môžete ho zjednodušiť pomocou taktiky, aby bolo možné ho rozpoznať podľa veľkosti favicon. Namiesto zobrazovania celého názvu spoločnosti používajte iniciály alebo namiesto obrázku navrhnite jednoduchú ikonu.
- Ak už máte jednoduché logo, môžete obrázok zmenšiť a nastaviť ho ako svoj favicon. Pred konverziou na súbor s ikonami ho možno budete musieť zmeniť.
- Môžete tiež použiť obrázok objektu, ktorý popisuje celkovú tému vášho webu.
Krok 4. Vytvorte esteticky príjemný favicon
Štruktúra vášho favicon sa nazýva jeho forma. Favikony zvyčajne nadobúdajú tvary, napríklad kruh alebo štvorec. Keď navrhujete svoj favicon, je všeobecne lepšie, ak sa zmestí do jednej z týchto základných foriem, pretože tvary vo voľnom formáte sa často môžu zamotať alebo zameniť pri rozlíšení 16 x 16 pixelov. Ďalší dôležitý aspekt vášho návrhu sa nazýva estetická jednota. Estetická jednota zahŕňa detaily a veľkosti rôznych komponentov vo vašom favicone a to, ako je váš favicon vyvážený. Čím jednotnejšie detaily, tým súdržnejšie bude váš favicon pôsobiť. Napríklad používanie rôznych typov alebo veľkostí písma vo vašom favicone nie je príjemné pre oči a môže spôsobiť, že váš favicon bude pôsobiť zmätene alebo chaoticky.
- Ďalším príkladom estetickej jednoty je zachovanie zaoblených rohov v tvaroch vo vašom favikóne.
- Dobrým príkladom ikony, ktorá zmenila formu, je favicon spoločnosti Google. Zmenilo sa to zo štvorca na kruh.
Krok 5. Použite farby, ktoré súdržné s vašou značkou
Keď vytvoríte svoj favicon, mali by ste ho vytvoriť v 8 -bitovej (256 farbách) alebo 24 -bitovej (16,7 milióna farieb) farebnej hĺbke, pretože to bude fungovať v moderných prehliadačoch. Zaistite, aby sa vami zvolené farby nachádzali inde na vašom webe alebo boli nejakým spôsobom spojené s vašou značkou. Favicon s farbami, ktoré sa nenachádzajú na vašom webe, logu alebo aplikáciách, nebude zapamätateľný a ľudia si nebudú môcť ikonu priradiť k vašej značke.
- Niektoré kreatívne použitia farby faviconu zahŕňajú GitHub, ktorý mení farby v závislosti od stavu systému, a Trello, ktoré sa mení v závislosti od farby pozadia.
- Najbežnejšími farbami používanými vo faviconoch sú červená a modrá.
Krok 6. Pri navrhovaní faviconu vezmite do úvahy svoje publikum
Okrem identifikácie vašej značky musí váš favicon pre vašich návštevníkov pôsobiť príťažlivo. Ľudia s rôznym vkusom, záujmami a spoločenskými normami sa budú pozerať na odlišnú ikonológiu z rôznych perspektív. Kultúrne rozdiely v našej spoločnosti existujú a môžu zamieňať alebo odpudzovať publikum, ktoré sa pokúšate prilákať.
Napríklad Mac Os X používa pečiatku, ktorá je univerzálnym symbolom pre poštu. Používanie poštovej schránky by nebolo také efektívne, pretože poštové schránky sa v rôznych častiach sveta líšia
Krok 7. Získajte názor priateľov a kolegov
Aj keď to nie je neuveriteľne graficky náročné, favicon je dôležitou súčasťou vašej značky. Zamyslite sa napríklad nad svojimi obľúbenými webmi, ako sú Twitter, Gmail, Facebook alebo wikiHow, a nad tým, ako favicon so značkou spájate. Ak nemáte dobrý vkus pre dizajn alebo vás zaujíma, aký dizajn by ste pre svoj web mali mať, poraďte sa s priateľmi, ktorí majú cit pre dizajn alebo sa zaoberajú grafickým dizajnom.
- Opýtajte sa vo svojej sieti priateľov, či niekto nemôže bezplatne poskytnúť rady týkajúce sa dizajnu.
- Väčšie spoločnosti majú vlastných grafických dizajnérov, ktorí dokážu vytvoriť obrázok favicon.
Metóda 2 z 3: Vytvorenie vášho Favicon
Krok 1. Vytvorte svoj favicon pomocou softvéru na úpravu fotografií
Na vytvorenie obrázka pre svoj favicon môžete použiť softvér na úpravu fotografií, ako je Adobe Photoshop alebo Illustrator. Tieto softvérové aplikácie vám tiež umožňujú zmeniť veľkosť a exportovať obrázok v správnom formáte. Niektorý softvér vám umožňuje vytvoriť si svoj favicon ručne.
- K dispozícii sú aj editačné programy špecifické pre favicon, ktoré nájdete online.
- Použite vyhľadávací nástroj a zadajte „editory favicon“.
- Nastavte veľkosť plátna 512 x 512 pixelov, pretože toto číslo sa delí na väčšinu použiteľných veľkostí favicon a je stále dostatočne veľké na to, aby ste ich mohli efektívne upravovať.
- Ďalší populárny softvér na úpravu fotografií obsahuje GIMP, PhotoScape a Paint. NET.
- Pri použití tohto softvéru nebudete môcť priamo upravovať súbory.ico, ale môžete použiť súbory.png,-j.webp" />
Krok 2. Zmeňte veľkosť a uložte svoj favicon
32 x 32 px je veľkosť položiek pracovnej plochy Windows, zatiaľ čo 16 x 16 px je veľkosť favicon na karte vášho prehliadača. Keď svoj favicon vytvoríte vo väčšom formáte, je dôležité zmenšiť jeho veľkosť, aby ste videli, ako bude vyzerať v prehliadačoch ľudí. Ak je to nečitateľné alebo esteticky nevhodné, začnite znova od svojho pôvodného návrhu. Zamyslite sa nad platformami, na ktorých sa bude pravdepodobne používať váš web alebo aplikácia, a potom vytvorte favicon, ktorý pokryje všetky vaše základne.
- Je dôležité poznamenať, že rôzny hardvér a softvér používa rôzne veľkosti favicon.
- Niektoré ďalšie veľkosti faviconu zahŕňajú 57x57px pre štandardnú domovskú obrazovku iOS, 72x72px pre iPad, 96x96px pre Google TV, 128x128px pre Internetový obchod Chrome a 195x195px pre Opera Speed Dial.
- Ak chcete pokryť všetky svoje základne, môžete vytvoriť verzie svojho faviconu v každej z týchto veľkostí.
- Uložte si rôzne verzie svojho faviconu, aby ste neprišli o prácu, ktorú ste urobili.
Krok 3. Skombinujte súbory pomocou prevodníka
Na súboroch.ico je skvelé to, že na ich vytvorenie môžete skombinovať viac ako jeden súbor. Je to užitočné, pretože rôzne prehliadače a softvér budú chcieť favicon rôznej veľkosti. Aby ste zaistili, že váš favicon vyzerá dobre na všetkých rôznych platformách, prevádzajte súbory pomocou online prevodníka. Do svojho obľúbeného vyhľadávača zadajte „prevodník ikon“a vyhľadajte bezplatné online aplikácie, ako to urobiť. Zlúčený súbor uložte ako „favicon.ico“.
- Môžete tiež použiť program, ako je GIMP, ktorý má vstavanú funkciu, alebo si stiahnuť doplnok s názvom ICO FORMAT do Adobe Photoshopu.
- Vytvorte nový priečinok, aby ste mohli ukladať nové favikony alebo prebiehajúce práce.
- Do vyhľadávacieho nástroja zadajte „.ico converter“alebo „generátor favicon“a nájdite rôzne nástroje, ktoré môžete použiť.
Metóda 3 z 3: Implementácia vášho Favicon
Krok 1. Ak používate editor webových stránok, nahrajte svoj favicon
Mnoho editorov webových stránok má vstavaný formulár, ktorý vám umožňuje automaticky nahrať váš favicon na váš web. Ak používate editor webových stránok, ktorý má tento vstavaný softvér, v ponuke nastavení svojho webu vyhľadajte možnosti „Nahrať Favicon“alebo „Pridať Favicon“. Vyberte súbor favicon.ico a nahrajte ho na svoj web.
Ak nemôžete nájsť miesto, kam by ste mohli pridať svoj favicon, do editora webových stránok, musíte to urobiť ručne
Krok 2. Odovzdajte súbor do koreňového adresára vášho webu
Ak váš web podporuje protokol File Transfer Protocol alebo FTP, môžete pomocou klienta FTP nahrať nový súbor favicon.icon do koreňového (indexového) adresára. Ak nie, budete musieť prejsť na stránku svojich webových hostiteľov a obrázok nahrať ručne. Nezabudnite nahradiť existujúci súbor favicon.ico novým súborom.
Krok 3. Pridajte súbor do hlavičky
Nájdite miesto, kde máte prístup k súborom PHP a CSS pre svoj web. Prejdite na svoj web do súboru header.php a upravte ho. Pod typom značky „
-
. To by malo spojiť váš web s vašim faviconom.
Pretože používate PHP, znamená to, že všetky weby, ktoré používajú váš hlavičkový súbor, budú teraz mať rovnaký favicon
Vytvorte si vlastnú ikonu Favicon, krok 14 Krok 4. Obnovte prehliadač
Keď nahrávanie favikonu dokončíte, obnovte prehliadač a vedľa panela s adresou sa zobrazí váš nový obrázok. Ak chcete prejsť priamo na obrázok svojho aktualizovaného favicon, zadajte „https://www.vasadomena.com/favicon.ico“.
- Ak sa váš favicon na začiatku nezobrazuje, možno budete musieť obnoviť vyrovnávaciu pamäť prehliadača.
- Ak chcete vymazať vyrovnávaciu pamäť, prejdite na nastavenia prehliadača a odstráňte svoje dočasné internetové súbory, súbory cookie a históriu.
