Favicon je ten skvělý malý obrázek vedle adresního řádku ve vašem prohlížeči. Právě to odlišuje váš web na kartě záložek a lze jej použít ke zvýšení povědomí o značce. Pokud máte web, ale nikdy jste neuvažovali o vytvoření favikonu, měli byste své rozhodnutí přehodnotit. Vývojáři softwaru stále častěji využívají favikony pro různé aspekty svých aplikací, například ikony domovské obrazovky na tabletech. Naštěstí navrhování, vytváření a implementace favicon je něco, co může udělat téměř každý, pokud bude postupovat podle správných kroků.
Kroky
Metoda 1 ze 3: Navrhování vašeho Faviconu
Krok 1. Vytvořte favicon, který bude reprezentovat váš web
Typ vašeho webu by měl určovat vzhled vašeho favicon. Zkuste navrhnout něco, co bude odpovídat image vaší značky a co bude pro lidi rozpoznatelné a zapamatovatelné. Váš favicon bude první, co lidé uvidí, když se podívají na karty ve svém prohlížeči, a také se objeví v záložkách lidí.
- Pokud například máte webové stránky s potravinami, výběr favicon, který má jako design ovoce nebo zeleninu, může být nezapomenutelnější.
- Pokud jsou vaše webové stránky pro advokátní kancelář nebo investiční společnost, je nejlepší tradiční a elegantní favicon.
- Pokud je váš web zaměřen na mladší lidi, zkuste vytvořit hravý a barevný favicon.
Krok 2. Rozhodněte se, zda chcete průhledné pozadí
Pokud neurčíte pozadí, vyplní se bíle, což nemusí odpovídat vaší značce. Průhledné pozadí bude mít barvu osobního prohlížeče a v některých případech bude vypadat efektivněji. V ostatních případech může mít barva pozadí popředí nebo grafiku. Rozhodněte se, co by bylo pro váš návrh nejlepší, a mějte to při tvorbě na paměti.
Nejzákladnějším faviconem je čtverec 16x16 a má barvu pozadí
Krok 3. Vytvořte favicon, který bude snadno čitelný
Protože obrázek favikonu, který budete používat, je malý, je důležité, abyste svou značku mohli propagovat, aniž byste zmátli své návštěvníky. Těžko čitelný favikon zanechává negativní dojem a v mysli návštěvníka může vytvářet otázky o kvalitě práce, kterou můžete poskytnout. Příliš složité obrázky a loga nevypadají dobře, když jsou zmenšeny na 16x16 nebo 32x32 pixelů.
- Pokud je vaše stávající logo příliš komplikované, můžete jej zjednodušit pomocí taktiky, aby bylo rozpoznatelné podle velikosti favicon. Místo zobrazení celého názvu společnosti použijte iniciály nebo místo obrázku použijte jednoduchou ikonu.
- Pokud již máte jednoduché logo, můžete obrázek zmenšit a nastavit jako svůj favicon. Před převedením na soubor ikon bude možná nutné jej změnit.
- Můžete také použít obrázek objektu, který popisuje celkové téma vašeho webu.
Krok 4. Vytvořte esteticky příjemný favicon
Struktura vašeho favicon se nazývá jeho forma. Favikony obvykle nabývají tvarů, jako je kruh nebo čtverec. Když navrhujete svůj favicon, je obecně lepší, když se vejde do jedné z těchto základních forem, protože tvary s volným tvarem se často mohou zamotat nebo zmást v rozlišení 16 x 16 pixelů. Další důležitý aspekt vašeho návrhu se nazývá estetická jednota. Estetická jednota zahrnuje detaily a velikosti různých komponent ve vašem favicon a jak je váš favicon vyvážený. Čím jednotnější detaily, tím soudržnější bude váš favicon vypadat. Například používání různých typů nebo velikostí písem ve vašem favikonu není příjemné pro oči a může váš favicon vypadat zmateně nebo chaoticky.
- Dalším příkladem estetické jednoty je zachování zaoblených rohů v tvarech ve vašem favicon.
- Dobrým příkladem ikony, která změnila formu, je favicon společnosti Google. Změnilo se to ze čtverce na kruh.
Krok 5. Použijte barvy, které jsou soudržné pro vaši značku
Když vytvoříte svůj favicon, měli byste jej vytvořit v 8bitové (256 barvách) nebo 24bitové (16,7 milionu barev) barevné hloubce, protože to bude fungovat v moderních prohlížečích. Ujistěte se, že vámi zvolené barvy najdete jinde na vašem webu nebo jsou nějakým způsobem spojeny s vaší značkou. Favicon s barvami, které nejsou na vašem webu, logu nebo v aplikacích, nebude zapamatovatelný a lidé nebudou moci ikonu spojit s vaší značkou.
- Některá kreativní použití barvy favicon zahrnují GitHub, který mění barvy v závislosti na stavu vašeho systému a Trello, které se mění v závislosti na barvě pozadí.
- Nejběžnější barvy používané ve faviconech jsou červená a modrá.
Krok 6. Při navrhování favikonu zvažte své publikum
Kromě identifikace vaší značky musí váš favicon pro vaše návštěvníky vypadat přitažlivě. Lidé s různým vkusem, zájmy a společenskými normami se budou na odlišnou ikonologii dívat z různých perspektiv. Kulturní rozdíly v naší společnosti existují a mohly by zmást nebo odrazit publikum, které se snažíte přilákat.
Například Mac Os X používá razítko, které je univerzálním symbolem pro poštu. Používání poštovní schránky by nebylo tak efektivní, protože poštovní schránky se v různých částech světa liší
Krok 7. Získejte názor přátel a kolegů
I když to není neuvěřitelně graficky náročné, favicon je důležitou součástí vaší značky. Vzpomeňte si například na své oblíbené weby jako Twitter, Gmail, Facebook nebo wikiHow a na to, jak moc favicon ke značce přiřadíte. Pokud nemáte dobrý cit pro design nebo vás zajímá, jaký design byste pro svůj web měli mít, poraďte se s přáteli, kteří mají smysl pro design nebo pracují v grafickém designu.
- Zeptejte se ve své síti přátel, zda někdo může poskytnout rady ohledně designu zdarma.
- Větší společnosti mají vlastní grafické designéry, kteří dokážou vytvořit favicon image.
Metoda 2 ze 3: Vytvoření vašeho Favicon
Krok 1. Vytvořte svůj favicon pomocí softwaru pro úpravu fotografií
K vytvoření obrázku pro svůj favicon můžete použít software pro úpravu fotografií, jako je Adobe Photoshop nebo Illustrator. Tyto softwarové aplikace také umožňují změnit velikost a export obrázku ve správném formátu. Některý software vám umožňuje vytvořit si favicon ručně.
- K dispozici jsou také editační programy specifické pro favicon, které najdete online.
- Použijte vyhledávač a zadejte „editory faviconů“.
- Vytvořte velikost plátna 512 x 512 pixelů, protože toto číslo se rozdělí na většinu příslušných velikostí faviconů a je stále dostatečně velké, abyste je mohli efektivně upravovat.
- Mezi další populární software pro úpravu fotografií patří GIMP, PhotoScape a Paint. NET.
- Při používání tohoto softwaru nebudete moci přímo upravovat soubory.ico, ale můžete použít soubory.png,-j.webp" />
Krok 2. Změňte velikost a uložte svůj favicon
32x32 px je velikost položek na ploše Windows, zatímco 16x16 px je velikost faviconů na kartě vašeho prohlížeče. Poté, co vytvoříte svůj favicon ve větším formátu, je důležité zmenšit jeho velikost, abyste viděli, jak bude vypadat v prohlížečích lidí. Pokud je nečitelné nebo nepůsobí esteticky, začněte znovu od svého původního návrhu. Zamyslete se nad platformami, na kterých bude váš web nebo aplikace s největší pravděpodobností používán, a poté vytvořte favicon, který pokryje všechny vaše základny.
- Je důležité si uvědomit, že různý hardware a software využívá různé velikosti faviconů.
- Některé další velikosti faviconů zahrnují 57x57px pro standardní domovskou obrazovku iOS, 72x72px pro iPad, 96x96px pro Google TV, 128x128px pro Internetový obchod Chrome a 195x195px pro Opera Speed Dial.
- Pokud chcete pokrýt všechny své základny, můžete vytvořit verze svého favicon v každé z těchto velikostí.
- Uložte si různé verze svého favicon, abyste nepřišli o práci, kterou jste odvedli.
Krok 3. Zkombinujte soubory pomocí převaděče
Skvělá věc na souborech.ico je, že můžete vytvořit více než jeden soubor. To je užitečné, protože různé prohlížeče a software budou chtít favicon různé velikosti. Chcete -li zajistit, aby váš favicon vypadal dobře na všech různých platformách, převádějte soubory pomocí online převaděče. Zadejte „převaděč ikon“do svého oblíbeného vyhledávače a najděte k tomu bezplatné online aplikace. Sloučený soubor uložte jako „favicon.ico“.
- Můžete také použít program, jako je GIMP, který má vestavěnou funkci, nebo si stáhnout plugin s názvem ICO FORMAT do Adobe Photoshopu.
- Vytvořte novou složku, abyste mohli ukládat nové favikony nebo nedokončené práce.
- Do vyhledávače zadejte „.ico converter“nebo „favicon generator“a najděte různé nástroje, které můžete použít.
Metoda 3 ze 3: Implementace vašeho Faviconu
Krok 1. Pokud používáte editor webových stránek, nahrajte svůj favicon
Mnoho editorů webových stránek má vestavěný formulář, který vám umožňuje automaticky nahrát váš favicon na váš web. Pokud používáte editor webových stránek, který má tento vestavěný, vyhledejte v nabídce nastavení svého webu možnosti „Nahrát Favicon“nebo „Přidat Favicon“. Vyberte soubor favicon.ico a nahrajte jej na svůj web.
Pokud nemůžete najít místo, kam byste mohli svůj favicon nahrát, v editoru webových stránek, budete to muset udělat ručně
Krok 2. Nahrajte soubor do kořenového adresáře vašeho webu
Pokud vaše webové stránky podporují protokol přenosu souborů nebo FTP, můžete pomocí svého klienta FTP nahrát nový soubor favicon.icon do kořenového (indexového) adresáře. Pokud ne, budete muset přejít na stránku svých webových hostitelů a obrázek nahrát ručně. Nezapomeňte nahradit stávající soubor favicon.ico novým souborem.
Krok 3. Přidejte soubor do záhlaví
Najděte místo, kde máte přístup k souborům PHP a CSS pro svůj web. Přejděte do souboru header.php svého webu a upravte jej. Pod typem značky „
-
. To by mělo spojit váš web s vaším faviconem.
Protože používáte PHP, znamená to, že všechny weby, které používají váš záhlaví, budou mít nyní stejný favicon
Vytvořte si vlastní ikonu Favicon Krok 14 Krok 4. Obnovte prohlížeč
Jakmile dokončíte nahrávání favikonu, můžete obnovit prohlížeč a zobrazit nový obrázek vedle adresního řádku. Chcete -li přejít přímo na obrázek aktualizovaného favicon, zadejte „https://www.vasadomena.com/favicon.ico“.
- Pokud se váš favicon zpočátku nezobrazuje, možná budete muset obnovit mezipaměť prohlížeče.
- Chcete -li vymazat mezipaměť, přejděte do nastavení prohlížeče a odstraňte dočasné internetové soubory, soubory cookie a historii.
