Ztracené logo v záhlaví webu? Průvodce, jak na Favicon krok za krokem

Je frustrující, když se vaše logo neobjeví v záhlaví webu. Poradíme vám, proč se to děje a jak to snadno opravit, aby váš web vypadal profesionálně.

Proč k tomu dochází?

Představte si malou ikonku, která se zobrazuje vedle názvu vašeho webu v záložce prohlížeče, v historii, oblíbených položkách nebo třeba na ploše telefonu. Právě té se říká Favicon (zkratka z "favorite icon") a je to klíčový prvek vizuální identity vašeho webu. Pokud se i váš web bez loga v záhlaví zobrazuje a místo něj vidíte jen generickou ikonu zeměkoule, je to signál, že Favicon buď není správně nastavený, nebo chybí úplně.

Proč se to děje? Příčin může být několik:

1. Favicon nebyl nikdy nahrán nebo nastaven: Toto je nejčastější důvod. Mnoho majitelů malých firem při spouštění webu na tuto drobnost zapomene, nebo o její existenci vůbec neví.
2. Nesprávný formát nebo velikost: Přestože moderní prohlížeče podporují různé formáty (PNG, SVG), tradičním formátem pro Favicon je soubor .ico. Pokud je obrázek v nevhodném formátu nebo nemá čtvercový poměr stran a doporučené rozměry, nemusí se zobrazit správně.
3. Špatné umístění souboru: Favicon se obvykle očekává v kořenovém adresáři webu, nebo musí být na něj explicitně odkázáno v kódu stránky. Pokud soubor leží někde jinde, prohlížeč ho nenajde.
4. Chybějící odkaz v HTML kódu: I když máte soubor Favicon správně nahraný, prohlížeč potřebuje vědět, kde ho najít. To se zajišťuje speciálním kódem v sekci <head> vaší HTML stránky.
5. Problémy s cache: Někdy je Favicon správně nastavený, ale prohlížeč si stále pamatuje starou verzi bez ikony. Může jít o cache prohlížeče, serveru nebo sítě CDN.

Ať už je příčina jakákoli, vězte, že absence Faviconu může působit neprofesionálně a snižovat důvěryhodnost vaší značky. Naštěstí je to problém, který se dá poměrně snadno vyřešit.

Jak to opravit krok za krokem

Pojďme se podívat, jak nastavit Favicon a zajistit, aby se vaše logo hrdě zobrazovalo v každé záložce prohlížeče.

Krok 1: Příprava loga (obrázku Faviconu)

Než začnete s nahráváním, potřebujete vhodný obrázek.

• Velikost: Nejdůležitější je, aby byl obrázek čtvercový. Tradiční velikosti jsou 16x16 pixelů, 32x32 pixelů nebo 48x48 pixelů. Pro moderní zařízení (např. dotykové ikony pro mobilní telefony) se doporučuje i 192x192 nebo 512x512 pixelů. My doporučujeme začít s vyšším rozlišením (např. 512x512 px) a nechat systém nebo nástroje, ať z něj vygenerují menší verze.
• Formát: Nejlepší je PNG s průhledným pozadím, aby Favicon splynul s barvou záhlaví prohlížeče. Můžete použít i formát .ico, který je speciálně určen pro ikony. Online nástroje umí převést PNG na ICO, nebo z jednoho obrázku vygenerovat sadu různých velikostí Faviconů.
• Design: Ujistěte se, že logo vypadá dobře i ve velmi malém provedení. Jednoduchost je klíčová. Důležitá je správná velikost favicon obrázku.

Krok 2: Jak nastavit Favicon na WordPressu (nejčastější řešení)

Pro většinu malých firem je WordPress nejpoužívanější platformou, a zde je nastavení Faviconu velmi jednoduché:

1. Přihlaste se do administrace WordPressu.
2. Přejděte na Vzhled > Přizpůsobit (Customizer).
3. V menu Customizeru najděte položku Identita webu (Site Identity).
4. Zde byste měli vidět možnost Ikona webu (Site Icon) nebo Favicon. Klikněte na "Vybrat obrázek" a nahrajte připravený soubor. WordPress se postará o vygenerování potřebných velikostí a formátů.
5. Po nahrání obrázku si můžete prohlédnout, jak bude Favicon vypadat, a pak klikněte na Zveřejnit (Publish).

Pokud vaše téma nemá tuto možnost v Customizeru, některé starší nebo specifické šablony mohou mít nastavení Faviconu v rámci vlastních nastavení šablony (např. Vzhled > Nastavení šablony / Theme Options).

Krok 3: Jak nastavit Favicon bez WordPressu (nebo ručně)

Pokud nepoužíváte WordPress nebo potřebujete složitější nastavení, budete muset zasáhnout do souborů webu:

1. Nahrajte soubor Faviconu: Použijte FTP klienta (např. FileZilla) nebo správce souborů ve vašem webhostingu. Nahrajte připravený soubor Faviconu (např. favicon.ico nebo favicon.png) do kořenového adresáře vašeho webu. To je ten adresář, kde se nachází soubor index.html nebo index.php.

2. Přidejte kód do HTML hlavičky: Otevřete soubor header.php (pokud máte WordPress) nebo hlavní HTML soubor (index.html) a mezi tagy <head> a </head> vložte následující řádky. Nahraďte favicon.png názvem vašeho souboru:

   <link rel="icon" href="/favicon.png" type="image/png">
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
   

   Doporučuje se používat oba řádky pro maximální kompatibilitu. Pokud máte jen PNG, stačí první řádek s typem image/png. Pokud jste použili nástroj pro generování Faviconu, můžete mít i další řádky pro Apple Touch ikony atd.

Krok 4: Pročištění cache

Často se stává, že ikona webu se nezobrazuje ihned po nastavení, a to kvůli cache.

1. Vyprázdněte cache prohlížeče: Zkuste tvrdé obnovení stránky (Ctrl+F5 na Windows, Cmd+Shift+R na Macu). Pokud to nepomůže, vyprázdněte cache prohlížeče v jeho nastavení (historie > vyčistit data prohlížení > obrázky a soubory v mezipaměti).
2. Vyprázdněte cache webu/serveru: Pokud používáte WordPress, vyprázdněte cache pomocí vašeho cacheovacího pluginu (např. WP Super Cache, WP Rocket). Pokud váš webhosting nabízí serverovou cache, vyprázdněte ji i tam.
3. Vyprázdněte cache CDN: Pokud používáte službu CDN (např. Cloudflare), nezapomeňte vyprázdnit i její cache.

Po těchto krocích by se vaše logo mělo konečně objevit v záhlaví prohlížeče!

Kdy je lepší svěřit to odborníkovi?

I když se nastavení Faviconu zdá být jednoduché, někdy se situace může zkomplikovat. Pokud jste prošli všechny kroky a Favicon se stále nezobrazuje, nebo se na technické záležitosti necítíte, je ten správný čas obrátit se na profesionála.

Ne každý má čas a chuť se probírat FTP klienty, editovat kód nebo ladit problémy s cache. A to je v pořádku. Odborník vám nejenže rychle a správně nastaví Favicon, ale také zajistí, že je optimalizovaný pro všechna zařízení a prohlížeče. Zároveň se můžete poradit o dalších aspektech vaší online prezentace, jako je celkový design, rychlost načítání nebo SEO. Profesionál vám ušetří čas, nervy a zajistí, že váš web bude vypadat skutečně profesionálně.

Závěr

Malý Favicon má velký vliv na to, jak váš web vnímají návštěvníci. Je to důležitý detail, který podtrhuje profesionalitu a důvěryhodnost vaší značky. Nezapomeňte na něj a dopřejte svému webu plnohodnotnou identitu. Pokud se na to necítíte sami, nebo potřebujete pomoct s celkovou webovou prezentací, Vítek Hošek (jasnyweb.cz) je tu pro vás. Rádi vám pomůžeme zajistit, aby váš web vypadal profesionálně od A do Z a přitahoval nové zákazníky.

Máte dotaz k vlastnímu webu? Napište mi a ozvu se vám.