Jak vytvořit Favicon pro váš Blog

má váš blog vlastní favicon? Pokud ne, opravdu by to mělo. Dnes se dozvíme, co je favicon, proč ho potřebujete, a nakonec jak vytvořit favicon pro váš blog nebo web.

stále vidím spoustu blogů bez jednoho, takže pokud je váš blog jedním z nich, udělejte si laskavost a vytvořte si ji nyní pomocí níže uvedeného tutoriálu. Slibuji, že to nebude trvat dlouho a je to také druh zábavy!

Aktualizováno: 11/4/2020

zveřejnění: tento příspěvek může obsahovat přidružené odkazy (označené*), což znamená, že mohu obdržet malou provizi, pokud se rozhodnete provést nákup s mým odkazem. Vážím si vaší podpory a nikdy nedoporučuji produkty, které nestojím sám.

Za prvé, co je Favicon?

Favicon, prohlásil fave-icon, je zkratka pro oblíbené ikonu, která byla pojmenována, protože se objeví v seznamu záložek webových stránek, jinými slovy, vaše oblíbené webové stránky. Favicons jsou malá verze vašeho logomarku, která se zobrazí jako ikona karty prohlížeče, ikona záložky nebo ikona zástupce.

Favicons jsou rychlý způsob, jak uživatelé rozpoznat vaše webové stránky na první pohled. Podívejte se na mé karty prohlížeče níže. Poznáváte většinu webových stránek, které zde mám otevřené?

proč potřebujete vytvořit Favicon?

pokud svému blogu nebo webu nepřiřadíte vlastní favicon, bude k němu přiřazena obecná ikona nebo žádná ikona. V nejhorším případě váš blog používá favicon vaší hostingové společnosti. V nejlepším případě vám každý prohlížeč přiřadí svou vlastní věc: Chrome přidá malý glóbus (viz obrázek výše), Safari přidá první iniciál adresy URL vašeho webu do šedého pole (viz obrázek níže) a Firefox nepřidá vůbec nic. Ať tak či onak, mluvte o nudě!

podívejte se znovu na karty prohlížeče výše. Díky rozpoznatelným ikonám je snadné rychle klikat tam a zpět mezi webovými stránkami, že? Pokud uložíte web do záložek, uvidíte také favicon v seznamu záložek. Díky tomu je snadné rychle najít to, co hledáte. Pomozte svým čtenářům rychle najít svůj blog v jejich kartách nebo záložkách začleněním favicon.

vsadím se, že jste nemysleli na to, kde se favicony objevují: pokud máte v telefonu často navštěvované webové stránky, můžete je vždy přidat na domovskou obrazovku telefonu jako zkratku. Pokud vaši čtenáři rádi navštěvují vaše stránky často, možná budou chtít přidat zástupce z domovské obrazovky, takže určitě chcete, aby měli pěkně vypadající ikonu, která vynikne od ostatních ikon aplikací, které již přidali.

a tady je nová záložka ze Safari. Zde si představte zástupce svého webu. Nechcete, aby váš blog představoval nudnou šedou ikonu, jako je ikona“ C “ níže, že?

jak navrhnout Favicon pro váš Blog

některá pravidla návrhu pro vytvoření Favicon

nejprve si promluvme o některých osvědčených postupech pro navrhování favicon.

1. váš favicon by měl být viditelný a okamžitě rozpoznatelný
   nejlepší způsob, jak učinit váš favicon rozpoznatelným, je použít vaše logo jako výchozí bod. I když váš blog ještě není super slavný, to je v pořádku. Používání konzistentních designových prvků a motivů v celé vaší značce pomůže vyniknout od ostatních a pomůže lidem nakonec rozpoznat vaši značku.Zde je několik možností, které byste měli zvážit při navrhování svého faviconu:
   • vaše logo nebo logomark
   • jednodušší variace vašeho loga
   • symbol nebo ikona, která představuje vaši značku
   • iniciály (nebo jen první Iniciály) vaší značky-ujistěte se, že styl iniciál odpovídá designu a stylu vašeho původního loga
   • jednoduchá fotografie-v poslední době jsem viděl blogery, kteří používají své profilové fotografie k vytvoření favicon
2. váš favicon by měl používat velmi jednoduchý design
   podívejte se na favicons karty prohlížeče právě teď. Čeho si všímáte? Jsou maličké! Typický favicon je zobrazen na 16 x 16 pixelů. Z tohoto důvodu je důležité se ujistit, že používáte velmi zjednodušenou verzi svého loga nebo prvku značky. Detailní a propracovaná grafika nebude měřítko dobře v tak malé velikosti. S největší pravděpodobností budou vypadat jako rozmazaný nepořádek.
3. ujistěte se, že váš favicon dobře kontrastuje se světlým a tmavým pozadím
   v závislosti na preferencích vašich čtenářů mohou být jejich karty prohlížeče bílé, černé, světlé nebo tmavě šedé. Z tohoto důvodu budete chtít vytvořit favicon s barvami, které kontrastují dobře na světlém i tmavém pozadí.Některé favikony mají průhledné pozadí a fungují, protože jejich barvy dobře kontrastují na jakémkoli pozadí. Pokud je vaše grafika příliš světlá nebo příliš tmavá, může pomoci přidat za grafiku nebo logo jednobarevný kruh nebo čtverec, který mu pomůže vyniknout a být čitelný na jakékoli barevné kartě.
4. podívejte se na záložky prohlížeče pro inspiraci
   klikněte na web a podívejte se na favicony používané na vašich oblíbených webech. Všimněte si, zda budou pracovat na světlém nebo tmavém pozadí. Má grafika průhledné pozadí nebo je na barevném čtverci nebo kruhu?

Favicon Inspirace

Favicons pomocí průhlednosti

Všimněte si, jak tyto ikony mohou vyniknout na tmavém nebo světlém pozadí, s výjimkou posledního, “ Řekni ano. Ten měl být pravděpodobně umístěn na bílém čtverci. A je to trochu těžké říct, ale čtvrtá ikona, lotosový květ má ve skutečnosti velmi jemný černý obrys. Tímto způsobem můžete snadno vidět, i když je zobrazen na světlých barevných kartách.

Favikony s barevným pozadím

tyto favikony byly navrženy se čtvercovým nebo zaobleným čtvercovým pozadím, aby bylo zajištěno, že jsou jasně viditelné na tmavých i světlých kartách.

Favikony používající Iniciály

některé z těchto iniciál ikon používají barevné pozadí, některé používají průhledný. Ať tak či onak, ujistěte se, že je čitelný.

Favicons použití profilové fotografie

použití profilové fotografie se zdá být novým trendem, který se chytá. Pokud jdete touto cestou, nezapomeňte použít stejnou profilovou fotku ve všech svých online profilech, aby byla okamžitě rozpoznatelná.

jak vytvořit Favicon pro váš Blog

Vytvořte soubor Favicon krok za krokem

1. Vytvořte grafiku v editoru obrázků
   pomocí editoru obrázků, jako je Photoshop (zaregistrujte se zdarma zkušební verze)*, Pixlr, BeFunky nebo Canva, * vytvořte soubor favicon na 512 x 512 pixelů. I když je zobrazen pouze na 16×16 v kartách prohlížeče, bude také zobrazen ve větších velikostech v některých dalších aplikacích, které jsem zmínil výše.
2. náhled vašeho Faviconu v malé velikosti
   pokud jste hotovi s vytvořením grafického faviconu, oddálte obrázek, dokud se vaše grafika nezmění, o velikosti faviconů, které vidíte v prohlížeči. Je to stále čitelné? Dává to smysl? Pokud ano, skvělý, přejděte k dalšímu kroku.
3. uložte soubor
   nejprve uložte grafiku jako upravitelný soubor do softwarového programu, abyste se mohli vrátit a doladit ji, pokud potřebujete.Dále jej uložte jako soubor PNG.
4. Vygenerujte Favicon.soubor ico
   použijte generátor favicon pro převod souboru PNG na soubor ICO. Tento krok je nezbytný, protože některé prohlížeče budou číst pouze soubory ICO.

alternativy k navrhování vlastní od nuly

pokud chcete rychlý a snadný způsob, jak vytvořit text nebo iniciály favicon, použijte Text > ICO favicon generátor. Rychle jsem vytvořil tento pro DYOB:

můžete také použít Emoji > ICO favicon generátor, pokud opravdu chcete, aby bylo snadné na sebe.

nakonec přidejte svůj nový Favicon na svůj Blog nebo web

WordPress

nejjednodušší způsob, jak přidat favicon do blogu WordPress s vlastním hostitelem, je přihlásit se do řídicího panelu. Poté přejděte na vzhled > přizpůsobit a poté klikněte na kartu identita webu. V části ikona webu vyberte nový favicon.ico soubor nahrát.

a boom, máte hotovo, podívejte se na to ve svém prohlížeči! Všimněte si, že možná budete muset několikrát aktualizovat a/nebo vymazat mezipaměť v prohlížeči, než se objeví.

jak přidat favicon do a WordPress.com blog.

Squarespace

je velmi snadné přidat favicon do Squarespace.

Blogger

přihlaste se do svého blogu a klikněte na Nastavení v levém sloupci. Poté klikněte na Favicon v části základní. Dále Nahrajte svůj favicon.ico soubor, uložit a boom!

Otestujte svůj nový Favicon

pokud si chcete vyzkoušet, jak vypadá váš favicon v různých platformách a nastaveních, použijte tento Favicon Checker. Chcete-li upravit způsob, jakým vaše ikony vypadají na kterékoli z platforem, například iOS (iPhone), můžete je pomocí generátoru optimalizovat pro každé nastavení. Pak postupujte podle pokynů a přidejte je všechny do svého blogu.

právě jste se naučili, jak vytvořit Favicon

Gratulujeme! Při navrhování vlastního blogu se chcete ujistit,že nevynecháte žádné podrobnosti, ani ty nejmenší. Přidání vlastního favicon k němu nejen pomáhá svým čtenářům rychle najít svůj blog v jejich kartách nebo záložek, to ukazuje, že vám záleží na udržení své značky konzistentní.

nyní je řada na vás

dejte mi vědět v komentářích, pokud máte nějaké dotazy ohledně toho, jak vytvořit favicon nebo pokud potřebujete pomoc s identifikací typu favicon vytvořit pro vaši značku. V opačném případě, Prosím, podělte se o své favicon s námi v komentářích!
a pokud se vám tento tutoriál líbil, sdílejte jej kliknutím na jednu z ikon pod mým podpisem!
tento příspěvek byl původně publikován na 8/14/2013 a aktualizován na 2/11/2015, pak znovu na 11/4/2020.