Favicon je malá ikona nebo kolekce ikon spojených s webovou stránkou, webem nebo webovou aplikací. Zobrazuje se na kartách prohlížeče a na panelu záložek.

K čemu se používá favicon?

Favicon se používá k tomu, aby uživatelé v rámci karet prohlížeče, záložek, zástupců a adresních řádků snadněji vizuálně identifikovali webové stránky, webové stránky a webové aplikace. Pro rozpoznání značky je důležité mít pro své webové stránky ikonu favicon, aby uživatelé mohli vaše stránky snadno identifikovat na kartách prohlížeče a v záložkách.

Jaké jsou alternativní názvy pro favicon?

Některé alternativní názvy pro ikonu favicon jsou:

• ikona prohlížeče,
• ikona oblíbených,
• ikona zástupce,
• ikona karty,
• ikona URL a
• ikona záložky.

Slovo favicon je zkratka pro „favorite icon“ a pochází z funkce „Oblíbené“ prohlížeče Internet Explorer, kterou většina moderních prohlížečů nazývá „záložky“.

Jaké jsou běžné formáty souborů favicon?

Nejběžnějšími formáty favicon jsou ICO, PNG a SVG, ale existují i další formáty pro konkrétní prohlížeče nebo zařízení.

ICO – favicon.ico

Formát souboru ICO byl vyvinut společností Microsoft a je původním formátem souboru favicon. Tento formát je jedinečný, protože umožňuje vytvářet více malých obrázků v rámci jednoho souboru. To je výhodné, protože malé ikony potřebné pro favicon ve formátu ICO (16×16, 32×32 a 48×48 pixelů) lze nezávisle škálovat a optimalizovat. Při malých rozměrech se nemůžete spoléhat na to, že prohlížeč automaticky změní velikost ikony optimálním způsobem. Formát ICO je podporován všemi prohlížeči a je to jediný formát, který podporují prohlížeče IE5 až IE10.

PNG – favicon.png

Formát PNG je příjemný formát, protože je to formát, na který je většina lidí zvyklá, a nevyžaduje žádné speciální nástroje k vytvoření. Díky tomu, že moderní obrazovky mají vysoké rozlišení, původní problém malých rozměrů ikon pro malá rozlišení již neexistuje. U prohlížečů, které podporují formát favikony PNG, bude často kvalita favikony zobrazené na kartě prohlížeče nebo na panelu záložek vyšší než u formátu ICO. Nevýhodou formátu PNG je, že není kompatibilní s prohlížeči IE5 až IE10.

SVG – favicon.svg

Formát SVG má oproti formátům PNG a ICO výhody, ale zatím nemá velkou podporu prohlížečů. Soubory SVG jsou velmi lehké a lze je plynule škálovat. To znamená, že kvalita obrázků je vynikající, aniž by to bylo na úkor doby načítání těžkých obrázků. Pouze prohlížeče Chrome, Firefox a Opera podporují favikony ve formátu SVG.

Jaké jsou běžné velikosti favicon?

Je důležité si uvědomit, že favicon musí být čtvercová.

Pro formát ICO jsou doporučené velikosti 16×16, 32×32 a 48×48 pixelů.

Pro formát PNG jsou doporučené velikosti 16×16 a 32×32, ale prohlížeče přijmou jakýkoli čtvercový obrázek PNG.

Mají favicony vliv na optimalizaci pro vyhledávače nebo SEO?

Přítomnost favicony může nepřímo ovlivnit SEO. Některé vyhledávače, například DuckDuckGo, zobrazují faviconu ve výsledcích vyhledávání. Poutavá favicon může pomoci zvýšit míru prokliku (CTR) v těchto vyhledávačích. Kromě toho je favicon nutností pro budování rozpoznatelnosti a důvěryhodnosti značky. Chybějící favicon může způsobit, že uživatelé ztratí důvěru ve webovou stránku a zvýší míru odchodu.

Budování značky s pomocí favicon

Pokud jde o vaše webové stránky, strategie budování značky je klíčová pro přeměnu návštěvníků na zákazníky. Žádný malý detail by neměl být opomenut. K tomu patří i potřeba vytvořit ikony favicon, s jejichž tvorbou vám pomůže bezplatný generátor favicon.

Protože je můžete použít také jako ikony aplikací na ploše, potřebujete alespoň několik různých velikostí, které lze zahrnout do souboru typu favicon ICO. Ve většině případů můžete jako ikonu favicon nastavit také soubor PNG.

Favicony jsou nezbytné, protože uživatelé neustále hledají informace na více webových stránkách najednou. Favicony pomáhají uživatelům rychleji identifikovat obsah a značku, což je pro uživatele lákavější.

Zde je 15 bezplatných online nástrojů pro generování ikon favicon a také další podrobnosti o tom, jak ikony favicon vytvořit a jak je nainstalovat.

Osvědčené postupy pro soubor Favicon ICO

Když chcete vytvořit ikony favicon, je prvním krokem dozvědět se o nich více, včetně jejich požadavků a osvědčených postupů.

Termín „favicon“ je portmanteau pro „oblíbenou ikonu“. Jednalo se o ikony, které se podobně jako dnes zobrazovaly s názvem webové stránky v horní části prohlížeče.

Až na to, že se původně zobrazovaly, když si uživatel přidal webovou stránku do složky „oblíbené“. Moderní prohlížeče tuto složku označují jako záložky.

Ikona favicon musí mít určitou velikost. Jinak je prohlížeče a zařízení nebudou používat.

Minimální velikosti, které potřebujete, jsou následující:

• 16 × 16 pixelů pro prohlížeče
• 32×32 pixelů pro hlavní panely stolních počítačů
• 96×96 pixelů pro ikony favicon desktopových aplikací
• 180×180 pixelů pro zařízení se systémy iOS a Android.

Mějte na paměti, že si můžete vybrat mezi 16×16 px a 32×32 px. Pokud si neděláte příliš velké starosti se značkou, měla by vám stačit jedna z těchto velikostí obrázku.

Při vytváření ikony favicon je dobré dodržovat také tyto osvědčené postupy:

• Měly by být jednoduché a ne příliš stylizované, aby byly dobře viditelné v malých velikostech.
• Vyberte jednu nebo dvě barvy pro barevné schéma. V krajním případě ne více než tři barvy.
• Ikony Favicon by měly být v 8bitových nebo 24bitových barvách.
• Design ikon favicon by neměl obsahovat mnoho čar nebo písmen.
• Ikony sice mohou mít průhledné pozadí, ale je důležité si uvědomit, že zařízení Apple to neumožňují.
• Ikony favicon by měly odpovídat vaší stávající značce a logu.

15 nejlepších bezplatných generátorů favikon

Pokud si chcete vytvořit vlastní ikony favicon, které jsou jednodušší, nebo chcete jen nahrát obrázek a nechat ho vhodně zvětšit a převést do souboru obrázku ICO, zde je několik bezplatných generátorů favicon.

Nejsou řazeny v žádném konkrétním pořadí, protože všechny představují skvělé možnosti, kde můžete vytvořit ikonu favicon na několik kliknutí. Po vytvoření favicony pomocí některé z těchto online možností je můžete zdarma stáhnout a používat.

Favicon.io

Pomocí tohoto bezplatného generátoru favicon můžete vytvořit ikony favicon z textu, obrázku nebo emoji. U možnosti založené na textu si můžete vybrat barvu a tvar pozadí, rodinu a velikost písma a také barvu písma. Generátor favicon používá písma Google, která mají k dispozici více než 800 písem.

Případně můžete zvolit nahrání souboru, který generátor favikony převede do vhodné velikosti. Nebo si můžete stáhnout ikonu favicon emoji z obrovského seznamu možností.

Vygenerovaná ikona favicon bude fungovat pro všechny prohlížeče a více platforem.

Favicon-Generator.org

Tento bezplatný generátor favicon vám dává možnost nahrát soubor s obrázkem a vybrat si mezi standardní velikostí 16 × 16 px pro webové prohlížeče nebo větší velikostí vhodnou pro systémy Android, Microsoft a iOS.

Máte možnost zachovat aktuální rozměry obrázku namísto změny jeho velikosti na čtverec. Jen mějte na paměti, že ponechání této možnosti zaškrtnuté nebo nezaškrtnuté může zkreslit konečný výsledek favikony.

Proto se raději ujistěte, že je váš obrázek již poměrně blízko čtverci.

Real Favicon Generator

Tento generátor favikon je poměrně unikátní, protože jako jeden z mála na seznamu obsahuje sekci náhledu simulátoru prohlížeče, takže si můžete prohlédnout, jak bude vaše ikona favicon vypadat, jakmile bude zmenšena a převedena.

Můžete také získat velikosti pro všechny prohlížeče, platformy a většinu technologií.

Tento generátor favicon má však pouze možnost vybrat obrázek pro převod na ikonu favicony.

Favicon.cc

Pomocí tohoto generátoru favicon můžete buď nahrát obrázek pro vytvoření favicony, nebo si můžete vytvořit vlastní ikonu favicony nakreslením myší.

Pomocí nástroje pro výběr barev si můžete vybrat barvy, které chcete použít, a také přepínat průhlednost ikony favicon.

K dispozici je také možnost vytvořit ikony favicon s animací. K dispozici jsou také nastavení, jako je uvedení animace do smyčky, úpravy a odstranění snímků.

Tento generátor favicon má také režim náhledu, takže si můžete prohlédnout, jak vaše favicona vypadá, až bude hotová.

FaviconGenerator.com

Jedná se o jednoduchý bezplatný generátor favicon, do kterého můžete nahrát obrázek a poté zvolit jeho velikost. Je to velmi základní, ale dobrá volba, když chcete rychle vytvořit ikonu favicon, aniž byste se museli zabývat nastavením a možnostmi.

Pomocí tohoto generátoru můžete také vytvořit favicony Retina, které fungují s dotykovými zařízeními Apple. Vyžaduje to trochu práce navíc, ale všechny pokyny jsou podrobně popsány na jejich webové stránce.

Favicomatic

Favic-o-Matic generuje favicony, a to jak ICO, tak PNG (také průhledné).

Pomocí tohoto bezplatného generátoru favicon můžete nahrát obrázek a poté si vybrat, zda chcete stáhnout soubor ICO o velikosti 16 × 16 a 32 × 32 pixelů, nebo zda chcete zahrnout různé velikosti, které jsou kompatibilní se všemi zařízeními.

K dispozici jsou také pokročilá nastavení, jako je možnost upravit barvu pozadí a některé pokročilé možnosti kompatibility.

Generátor favikon Ionos

Generátor favikon Ionos umožňuje nakreslit ikonu favicony, použít iniciály nebo nahrát obrázek, který chcete použít k vytvoření favicony.

Výsledkem je favicon, která funguje ve všech prohlížečích a zařízeních. Má také pěknou oblast náhledu, kde si můžete rychle prohlédnout, jak bude vaše favicon vypadat naživo.

Dynamic Drive – editor favicon

Dynamic Drive je další snadno použitelný a jednoduchý nástroj pro generování favicon. Můžete do něj nahrávat soubory ve formátech JPG, GIF, PNG a BMP. Také můžete přidat průhledné pozadí pro soubory GIF a PNG.

Navíc mají další možnost generovat ikony 32×32 na ploše a 48×28 na XP.

Aplikace Dynamic Drive nejlépe funguje společně s jejich editorem favicon.

Logaster

Aplikace Logaster vám nabízí možnost vytvořit faviconu zadáním názvu vaší firmy a kliknutím na tlačítko „Vytvořit logo“. Poté vygeneruje výběr šablon loga, ze kterých si můžete vybrat a přizpůsobit je podle svých potřeb. Chcete-li si logo stáhnout, musíte se u nich nejprve zaregistrovat.

Kromě toho má Logaster mnoho placených balíčků, které vám poskytnou více možností při vytváření favicony.

Genfavicon

Tento bezplatný generátor favicon je jedinečný, protože když nahrajete obrázek, máte možnost jej oříznout, aby se z něj stala favicona.

K dispozici je také okno náhledu, ve kterém můžete vidět, jak bude vaše nová ikona favicon vypadat naživo v prohlížeči uživatele.

Máte možnost volit mezi možnostmi velikosti: 16 × 16, 32 × 32, 48 × 48, 64 × 64 a 128 × 128 pixelů.

FavIcon.pro

Zde je další rychlá možnost, pokud jde o bezplatný generátor favicon. Když nahrajete obrázek pro vytvoření favicony, můžete si vybrat velikost obrázku, který chcete použít: 16×16, 32×32, 48×48, 64×64 a 128×128 pixelů.

FavIcon umožňuje převádět soubory typu JPG, GIF, PNG na ICO a můžete jej použít ke konverzi ikon aplikací, ikon na ploše a favikon na svých webových stránkách.

Faviconr

Faviconr je další jednoduchou a rychlou možností bezplatného generátoru favicon.

Nahrajte soubor JPG, PNG nebo GIF a vyberte, zda chcete průhledné pozadí (průhledné favikony můžete vytvořit pouze v případě, že váš zdrojový soubor je také průhledný soubor PNG nebo GIF). Klikněte na tlačítko, uložte soubor a je hotovo.

X-Icon Editor

X-Icon Editor je ideální, pokud chcete vytvořit favicon od nuly. Jeho editor se podobá nástroji Malování, protože má možnost psaní, štětec, gumu a další.

V případě, že již máte ikonu, můžete ji importovat do X-Icon a oříznout ji na dostupné rozměry. Před stažením favicony si ji můžete prohlédnout.

Antifavicon

Antifavicon je open-source nástroj a trochu se liší od všech ostatních zde uvedených generátorů, protože ke generování favicon používá text místo obrázků.

Jak funguje?

Stačí zadat text na kartě „Text k vykreslení“ a upravit barvy, pozadí a text podle svých potřeb. Před uložením favicony si můžete prohlédnout náhled na kartě „Vaše vygenerovaná favicona“.

I když je Antifavicon poměrně omezený, je stále dobrou volbou pro lidi, kteří chtějí mít jednoduchou faviconu během několika minut.

FavICO

FavICO je jednou z posledních základních možností bezplatného generátoru favicon. Nahrajte obrázek, který chcete použít k vytvoření favicony. Poté si vyberte velikost 16 × 16 nebo 32 × 32 pixelů a stiskněte tlačítko create. A to je vše.

Jak vložit favicon na váš web

Jakmile použijete některý z bezplatných generátorů ikon favicon k vytvoření ikony favicon, můžete ji nainstalovat a zobrazit na svých webových stránkách.

Instalace ikony oblíbené stránky pro běžné weby nebo weby, které nejsou součástí WordPressu

Nejprve nahrajte ikonu favicon do kořenového adresáře svého serveru.

Poté začněte v tagu <head> souboru index.html a použijte níže uvedený oficiální kód od W3C:

<head profile=“https://www.w3.org/2005/10/profile“>
<link rel=“icon“
type=“image/png“
href=“https://example.com/myicon.png“>

Jen nezapomeňte změnit „https://example.com/myicon.png“ na skutečný odkaz na vaši ikonu favicon.

Také změňte „image/png“ tak, aby odrážel typ obrázkového souboru, který používáte pro favicon.

Zde jsou uvedeny typy obrázků, kterými lze nahradit „image/png“ a které jsou kompatibilní při vytváření favikony:

• Obrázkový soubor PNG – image/png
• Soubor obrázku GIF – image/gif
• Soubor obrázku ICO – image/x-icon
• Soubor obrázku SVG – image/svg+xml

Nezapomeňte soubor uložit.

Ve většině případů výše uvedené bezplatné generátory favicon vygenerují také potřebný kód, který je specifický pro vámi zvolené nastavení, například animace nebo kompatibilitu. Pokud tedy tento kód nefunguje, můžete se obrátit na generátor favicon, který jste použili k vytvoření favicony pro své webové stránky.

Automatická instalace ikony favicon ve WordPressu

Pro weby WordPress můžete vytvořit ikonu favicon, aniž byste museli použít některý z výše uvedených bezplatných generátorů favicon.

Můžete použít libovolný obrázek, pokud je široký alespoň 512 px.

Chcete-li ji automaticky nainstalovat, přihlaste se na svůj web WordPress a v panelu správce přejděte do nabídky Vzhled > Přizpůsobit.

Po načtení nástroje Přizpůsobení klikněte v nabídce vlevo na položku Identita webu. Poté v části Ikona webu klikněte na možnost Vybrat obrázek.

Ikony favicon můžete ve WordPressu vytvářet automaticky.

Ve vyskakovacím okně klikněte na kartu Nahrát soubory a poté na Vybrat soubory.

Vyberte požadovaný obrázek z počítače.

Klikněte na tlačítko Vybrat, v případě potřeby obrázek ořízněte a klikněte na tlačítko Oříznout obrázek. Nebo můžete obrázek ponechat tak, jak je, a kliknout na tlačítko Přeskočit oříznutí.

Poté uložte změny kliknutím na tlačítko Publikovat v nástroji Přizpůsobení.

Ruční instalace oblíbené ikony pro weby WordPress

Chcete-li ručně nainstalovat favicon, což je soubor ICO pro WordPress, nahrajte nejprve favicon do kořenového adresáře svých webových stránek a také do kořenového adresáře aktuálního motivu.

Ujistěte se, že se soubor jmenuje „favicon.ico“, jinak se ikona favicon nezobrazí.

To by mělo stačit, ale některé starší prohlížeče si favicony nemusí všimnout, takže je tu ještě další krok, který můžete udělat pro zajištění kompatibility.

Najděte soubor header.php prostřednictvím SFTP nebo ovládacího panelu poskytovatele hostingu.

Otevřete jej a vyhledejte řádek kódu, který je podobný níže uvedenému příkladu:

…
<link rel=“ikona zástupce“ … /favicon.ico“ />
…

Poté jej nahraďte níže uvedeným kódem nebo jej přidejte, pokud tam není:

…
<link rel=“ikona zástupce“ href=“<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico“ />
…

Uložte soubor a máte hotovo.