Jak přidat a Shopify Favicon na váš Shopify Obchod

Identita váš e-shop spojuje několik prvků, jako je logo, barvy webu a vaše marketingové materiály. Tato identita posiluje vaši celkovou značku a vytváří zdravou připomínku pro vaše zákazníky, evokující pocity pohodlí a spolehlivosti, když vidí vaši značku a barvy.

I když je Favicon malý, také souvisí s touto strategií značky. V tomto tutoriálu vám ukážeme, jak vytvořit a přidat favicon Shopify uložit, doplní váš online vzhled a usnadní rozpoznání vašeho obchodu, když ho zákazníci navštíví.

Co je to Shopify Favicon?

A Shopify Favicon, nebo jakákoliv Favicon, je malá ikona vašeho webu, která se zobrazuje na kartě prohlížeče vedle názvu vašeho webu.

Adresní řádek prohlížeče je nejběžnější oblastí pro zobrazení stránky Favicon, ale vyskytuje se také na následujících místech:

• Aplikace lišty nástrojů
• Záložky
• Výsledky historie
• Vyhledávací pruhy
• Někdy při sdílení na sociálních sítích

V podstatě vždy, když prohlížeč potřebuje zobrazit odkaz na váš web a není mnoho místa pro jiný obsah, nahradí vaše obvyklé logo v plné velikosti ikonou Favicon.

Ve výchozím nastavení Shopify dodává Shopify logo pro váš Favicon, takže to musíme změnit.

Dobrá favicon je často menší verze vašeho loga, ale někdy se trochu liší, protože chcete zajistit, aby byly viditelné, zabíraly veškerý přidělený prostor a přidaly trochu barvy vedle názvu vašeho webu.

Ve výchozím nastavení všechny prohlížeče podporují Favicons o velikosti 32×32 pixelů. To je poměrně malý obrázek, ale s pomocí některých online generátorů si můžete vytvořit svůj vlastní Shopify Favicon pro váš web. Větší obrázky se také stejně zmenšují, takže je nemusíte nutně dostat přesně na 32×32.

Favicon má pro online obchody docela smysl Shopify protože se snadno přidávají a je důležité posílit identitu vaší značky jako online prodejce. Někteří také tvrdí, že to pomáhá se SEO.

Pokračujte ve čtení, abyste se dozvěděli více o tom, jak přidat Favicon do svého Shopify obchod.

Jak přidat favicon do svého Shopify Obchod – Rychlý průvodce

Jak již bylo zmíněno, při spuštění webu Shopify automaticky přidá a Shopify logo jako favicon vašeho webu. Není na tom nic špatného, ​​ale daleko profesionálnější a zaměřené na značku je vložit vlastní logo. Zde jsou kroky, které musíte dodržet:

Krok 1: Přejděte do svého Shopify Palubní deska

Proto jděte do svého Shopify dashboard a klikněte na Online Store v části Prodejní kanály.

Krok 2: Přejděte na Nastavení motivu

Přejděte na svá témata a klikněte na tlačítko Přizpůsobit vedle aktuálního motivu. Ačkoli se nastavení mění téma od tématu, všechna nejnovější Shopify témata mají sekci pro změnu Favicon.

v Shopify přizpůsobení, přejděte na konec seznamu vlevo a klikněte na Nastavení motivu.

Krok 3: Vyberte tlačítko Favicon

V nové sekci najděte a vyberte tlačítko Favicon.

Zobrazí se tlačítko pro výběr obrázku nebo prozkoumání volných obrázků. Nedokážu si představit, že mají nějaké bezplatné obrázky, které odpovídají vašemu logu, takže nejlepší bude kliknout na Vybrat obrázek a nahrát vlastní obrázek z vašeho počítače.

Krok 4: Nahrajte svou favicon

Vyberte soubor Favicon a nahrajte jej do Shopify.

Poté uvidíte náhled své ikony Favicon. Chcete-li, aby byly změny trvalé, vyberte tlačítko Uložit v Shopify.

Chcete-li zobrazit svůj Shopify favicon v akci, přejděte na frontend svého webu a podívejte se na aktuální kartu prohlížeče. Vedle názvu webu byste měli vidět ikonu Favicon.

Tipy pro vytvoření vaší favicon

I když se zdá, že vygenerování malé ikony je snadné, je důležité ji správně nastavit, protože zákazníci uvidí favicon, kdykoli přijdou na váš web. Je také snadné vytvořit Favicon, který je rozmazaný nebo nevyplňuje celý prostor, což maří účel Favicon, protože není tak viditelný pro oko.

Chcete-li vyřešit jakékoli problémy, zde je několik tipů pro vytvoření vašeho Shopify Favicon:

• Začněte svůj návrh větší než 32×32 a v případě potřeby jej zmenšete. Pokud se pokusíte roztáhnout menší obrázek do prostoru, budete mít nutně rozmazanější obraz. Problémy může způsobit například odebrání obrázku 32×32 z Hatchful a pokus o jeho roztažení, abyste se zbavili napsané části loga.
• Obvykle nemůžete vzít své aktuální logo a očekávat, že bude perfektně fungovat jako Favicon.
• Favicon vypadá skvěle, když pokryjete každý pixel poskytnutého prostoru. Nemáte mnoho místa, takže byste měli využít každého square pixel v prostoru 32×32.
• Odstraňte veškerý text, protože je obtížné jej přečíst ve Faviconu. Výjimkou je případ, kdy primárním prvkem loga je velké písmeno.
• Vyfoťte plné, jasnější barvy. Nejlépe fungují jednoduchá, kreslená loga.
• Podívejte se na Favicons od svých oblíbených značek. Co udělali, aby zajistili, že jejich online obrázek projde ikonou favicon?
• Zvažte buď vyplnění celého prostoru jednobarevným pozadím, nebo vytvoření průhledného pozadí s prvkem popředí roztaženým tak, aby se dotýkal pouze okrajů. Všimnete si, že mnoho větších značek má pro své Favicons průhledné pozadí.
• Soubor ICO format funguje dobře pro menší obrázky. Pokud nejste obeznámeni, použijte PNG pro průhledná pozadí nebo JPG pro oblíbené ikony ve vysokém rozlišení s plným pozadím.

Jak pro vás vygenerovat favicon Shopify Obchod

Favicon máte možnost navrhnout v libovolném návrhovém softwaru dle vašeho výběru. Pokud dáváte přednost Photoshopu, jděte do toho. Pokud byste raději svobodný software jako GIMP nebo Pixlr, všechny fungují, pokud dodržíte požadované rozměry 32×32.

Máte také možnost vytvořit Favicon pomocí ShopifyLogo 's Hatchful a bezplatný generátor favicon. Podívejte se na celý náš průvodce o používání Líhavý k vytvoření loga.

Jakmile tvůrce loga udělá svou práci, poskytne vám soubor s více logy formats, z nichž jeden je Favicon.

Mějte na paměti, že s mnoha logy vytváříte Líhavý (přečtěte si naše Nápadná recenze) kolem loga použijte bílý prostor, takže jej možná budete muset upravit, aby grafika pokryla většinu prostoru. Obecně jsem zjistil, že poskytnutou favikonu Hatchful byste měli používat pouze v případě, že již vypadá dobře (zaplňuje většinu prostoru a neobsahuje malé prvky, jako je text).

Pokud tomu tak není, použijte k odstranění některých nepotřebných prvků editační software třetí strany, jako je Photoshop nebo Pixlr.

důležitý: Pokud plánujete natažení přes plátno, abyste vyřízli text a prázdné místo, musíte použít větší verzi obrázku. Za tímto účelem jsem použil Hatchful ke generování log, ale ve skutečnosti jsem vzal jedno z velkých log (ne poskytnutý soubor Favicon), protože nechci, aby došlo k rozmazání, když jej roztáhnu na plátno 32×32.

Ve svém editačním softwaru vyberte nové plátno s nastavením Šířka a Výška na 32.

Vytvořte vrstvu pro nový obrázek a ujistěte se, že je obrázek větší než plátno 32×32, protože ho můžete natahovat. Poté nahrajte nebo umístěte obrázek na plátno.

Na následujícím snímku obrazovky mám přiblížený design Favicon, abych se mohl ujistit, že se hodí square správně. Je to rozmazané, ale vím, že to bude vypadat mnohem lépe, když to oddálím.

Jak můžete vidět, oddálená verze Faviconu v Pixlr designeru vypadá dobře. Pokryl jsem většinu přiděleného prostoru, zvolil jsem jasnou a plnou barevnou ikonu a odstranil jsem všechny známky menšího textu.

Posledním krokem je stažení souboru. V tomto okamžiku si můžete vybrat, zda z něj uděláte průhledný PNG. Ale pro tento tutoriál zůstanu u JPG s vysokým rozlišením, aby vypadal co nejostřeji. A nevadí mi mít pozadí s plnou barvou.

Vraťte se do vaší Shopify přístrojová deska. Klikněte na Online obchod > Motivy > Přizpůsobit.

Poté přejděte na Nastavení motivu > Favicon.

Nahrajte tuto novou favicon a klikněte na tlačítko Uložit v Shopify editor.

Opět platí, že primárním způsobem, jak otestovat a zobrazit svůj Favicon, je jednoduše otevřít kartu s adresou URL vaší domovské stránky. Jak můžete vidět, Favicon se zobrazuje pěkně a je ve skutečnosti o něco lepší než můj předchozí Favicon, protože nezaplnil celý poskytnutý prostor 32 × 32.

Na závěr

A Shopify Favicon nezabere více než několik minut, než navrhnete a přidáte na váš web, přesto vašim návštěvníkům poskytuje skvělou připomínku, na kterých webových stránkách se právě nacházejí. Kromě toho může lidem sloužit jako způsob, jak najít váš web ve svých záložkách a historii prohlížeče, protože při procházení těmito sekcemi s největší pravděpodobností prohledávají dlouhý seznam jiných webů.

Mějte na paměti, že byste se neměli spokojit s rozmazaným nebo nečitelným Shopify Obrázek favicon. Pokud zjistíte, že první favicon nevypadá úplně správně, nebo byste chtěli vystřihnout nějaký text nebo přidat průhledné pozadí, vraťte se na začátek a udělejte to správně. Ačkoli není dobrý nápad nemít žádný Favicon, rozmazaný nebo špatně viditelný Favicon způsobuje, že vaše značka vypadá neprofesionálně a poněkud hloupě.

Máte-li jakékoli dotazy ohledně přidávání Favicon do Shopify, nebo si vyrobit vlastní Shopify Favicon, dejte nám vědět v sekci komentářů níže.