Jak vytvořit favicon pro web: užitečné tipy a služby

1. Jak vytvořit favicon
2. Jak udělat favicon ve Photoshopu
3. Jak uložit favicon
4. Jak vložit stránku favicon
5. Jak nahradit favicon
6. Jak vytvořit složitější favicons

Je těžké odhadnout, co je to favicon, když poprvé slyšíte toto slovo. Jedná se o miniaturní ikonu, která se zobrazuje na kartách prohlížečů, v adresních řádcích a dalších oblastech v závislosti na používaném operačním systému a internetovém prohlížeči. To může být bezpečně nazvaný jeden z nejsložitějších a vrtošivých prvků v designu webových stránek.

Vytvoření dobré favicon je poměrně obtížné, protože ikona je malá, měla by být jasná a zobrazit něco, co souvisí s vašimi stránkami. Vytváření favicon, který je kompatibilní se všemi populárními prohlížeči, může být také skličující úkol. V tomto článku se budeme zabývat všemi komplexními aspekty jeho vzniku. Pokud také potřebujete logo, pak máme článek jak to udělat.

Jak vytvořit favicon

Začněme s designem favicon. Dobrý design, navzdory své kompaktnosti, by měl odrážet podstatu vašeho webu a být organickou součástí firemní identity. Typicky je ikonou grafické označení (ikona) firmy a ne celé logo (ikona, text a slogan).

Jako favicon tyto webové stránky používají své ikony (nebo obrázky v jejich blízkosti).

Text ve favicon by neměl být používán, protože tento text bude nečitelný kvůli malé velikosti obrázku. Jedinými výjimkami z tohoto pravidla jsou světoznámé textové znaky, které jsou automaticky přidruženy ke konkrétní značce. Například, online zdroj Wikipedia vlevo na favicon jeho velké písmeno “W”, a Facebook - písmeno “F”.

Na těchto favicons jsou dopisy, které jsou silně spojeny s určitou značkou. Facebook například používá své grafické označení. Všimněte si také, že pixely jsou viditelné na obrázku Disney. Je to proto, že snímek byl pořízen na displeji Retina, který je kompatibilní s ikonami 16 × 16, zatímco webové stránky používají ikony 32 × 32.

Protože favicons jsou malé obrazy, každý pixel hraje důležitou roli. Někdy po zmenšení loga se jednotlivé pixely stanou viditelnými, díky čemuž se obraz stane „rozmazaným“. Pro dosažení jasnosti musíte upravit ikonu na úrovni pixelů.

Abyste tomu zabránili, musíte změnit velikost loga pomocí speciálních editorů, jako je Photoshop nebo GIMP. Nejprve musíte zmenšit velikost obrázku na 64x64 pixelů (to je největší velikost favicon). Pak musíte upravit každý pixel pomocí nástroje Tužka, dokud nebude obraz čistý. To je pracný proces, ale výsledek stojí za to. Je-li favicon 64x64 připraven, musíte provést stejnou úlohu s obrazem 16 × 16, 24 × 24 a 32 × 32 pixelů. Tolik velikostí, které potřebujete k správnému zobrazení ve všech prohlížečích a miniaplikacích:

• 64x64 - záložky prohlížeče Safari;
• 32x32 - displeje s vysokým rozlišením (sítnice);
• 24x24 - záložky Internet Explorer a MicroSoft Edge;
• 16x16 - Google Chrome a další prohlížeče.

Jak udělat favicon ve Photoshopu

Nejdříve musíte vytvořit několik pláten s výše uvedenými rozměry.

Pak je třeba na plátno přidat ikonu, písmeno nebo jiný obrázek.

Jak uložit favicon

Po vytvoření ikon různých velikostí uložte každý jako průhledný soubor PNG (24 bitů). Ve Photoshopu můžete použít funkci Uložit pro web, která je k dispozici v nabídce Soubor. Pak musíte sloučit všechny soubory PNG do jednoho souboru ICO. Soubory PNG a ICO můžete používat současně, ale často i Safari a Chrome preferují pouze formát ICO. Podle mého názoru je jednodušší vytvořit jeden soubor ICO. Formát ICO není příliš běžný, ale naštěstí existuje řada nástrojů, které vám mohou pomoci převést soubory do tohoto formátu. K tomuto účelu dávám přednost použití X-Icon Editor . Jedná se o bezplatnou online službu, která okamžitě převádí stažené obrázky do jednoho souboru ICO, po kterém si můžete stáhnout. To není nic složitého, jen postupujte podle pokynů na webu. Pokud se považujete za zoufalé osoby, můžete experimentovat s editorem pixelů této služby a nakreslit si favicon sami. (I když dávám přednost editování favicons v profesionálním editoru, například ve Photoshopu).

Nahráním obrázků PNG do editoru X-Icon Editor získáte na výstupu jeden soubor ICO.

Jak vložit stránku favicon

Takže již máte soubor ICO. Nyní ji musíte přidat na webové stránky. Přejmenujte soubor na favicon.ico a umístěte jej do kořenové složky webu (kde je uložen soubor index.html a další standardní soubory). Po úspěšném přidání si jej můžete prohlédnout na svých stránkách .com / favicon.ico. Téměř všechny prohlížeče hledají soubor favicon.ico v kořenové složce. Proto je důležité stáhnout favicon v této složce. Pro kompatibilitu s různými prohlížeči je lepší nepřidávat žádné prvky HTML ani odkazy, které by určovaly jeho umístění. Tento trik funguje pro všechny prohlížeče, až do IE6. Také, pokud máte stránky WordPress, pak v mnoha tématech můžete přidat favicon v nastavení témat. Tuto metodu lze také použít.

Jak nahradit favicon

Z nějakého nevysvětlitelného důvodu jej prohlížeče přidají do mezipaměti. Když tedy nahrajete nový soubor ICO, prohlížeč může i nadále zobrazovat váš starý favicon. Co dělat v tomto případě? Můžete přidat dočasný soubor HTML, který označuje umístění nového favicon. Také na konci adresy URL je třeba přidat krátký řetězec dotazů:

<link rel = "ikona zástupce" href = "vaše webové stránky .com / favicon.ico? v = 2 ″ />

Prohlížeč si tedy bude myslet, že se jedná o jedinečnou adresu URL, a proto bude nucen zobrazit novou ikonu. Po aktualizaci favicon lze tento HTML kód zcela odstranit. Pokud potřebujete provést změny ve favicon, použijte stejnou techniku, pokaždé, když zvýšíte číslo za „v“ v řetězci dotazu. Prohlížeč tak bude pokaždé považovat tuto adresu URL za jedinečnou a zobrazí svou novou verzi. A nezapomeňte odstranit HTML kód po úspěšné aktualizaci.

Jak vytvořit složitější favicons

V tomto článku jsem chtěl popsat univerzální a snadný způsob, jak vytvořit favicons, které budou fungovat prakticky na každé platformě. Ale ve web design a vývoj neexistuje žádný limit k dokonalosti. Pokud se chcete dozvědět, jak vytvářet složitější ikony, můžete službu zkusit použít favico.js . To vám umožní vytvářet dynamické obrazy s různými čísly. Díky této ikoně můžete vidět počet nepřečtených zpráv, i když odpovídající karta není aktivní. Pokud chcete vytvořit animované favicons online, můžete zkusit použít favicon generátor favicon.cc .

Více online generátorů najdete zde .

Chcete-li se podělit o své tipy na vytváření favikonu nebo si položit otázku, čekám na vás v komentářích!