Proč se logo vašeho webu nezobrazuje v záložce prohlížeče?

Trápí vás, že u webu chybí logo v záložce prohlížeče? Nezoufejte! Ukážeme si, jak snadno nastavit faviconu a zlepšit dojem z vaší značky.

Proč k tomu dochází?

Představte si, že máte otevřených deset záložek v prohlížeči. Na osmi z nich vidíte malá, ale rozpoznatelná loga – ikony, které vám okamžitě prozradí, jaký web se v dané záložce skrývá. Na dvou zbývajících ale vidíte jen generickou ikonu zeměkoule nebo prázdný čtvereček. Který web si zapamatujete snáze? Který vypadá profesionálněji? Ten, který má ikonu. A přesně o té ikonce se teď bavíme. Jmenuje se favicona (z anglického "favorite icon").

Favicona je sice malinký, ale neuvěřitelně důležitý prvek. Je to vizitka vašeho webu v záložkách prohlížeče, v historii, mezi záložkami a na domovských obrazovkách mobilních zařízení. Její absence nebo špatné zobrazení může působit neprofesionálně a snižovat důvěryhodnost vaší značky. Uživateli komplikuje orientaci a váš web se snáze "ztratí v davu". Pokud se vám tedy logo webu v záložce chybí, je na čase zjistit proč.

Nejčastější příčiny, proč se vaše favicona nezobrazuje, jsou poměrně jednoduché a dají se snadno vyřešit:

1. Favicona chybí nebo je špatně umístěna: Nejobvyklejší důvod. Soubor s ikonou nebyl vůbec nahrán na server, nebo je umístěn v adresáři, kde ho prohlížeč nehledá.
2. Nesprávný formát nebo velikost: Tradiční formát pro favicony je .ico, ale moderní prohlížeče podporují i .png nebo dokonce .svg. Důležité je také dodržet správné rozměry. Pokud je ikona příliš velká, malá nebo má špatný poměr stran, nemusí se zobrazit správně.
3. Chyba v HTML kódu: Prohlížeč potřebuje vědět, kde faviconu najít. K tomu slouží speciální kód v <head> sekci vašeho webu. Pokud tento kód chybí, je chybný, nebo odkazuje na špatné umístění souboru, ikona se nezobrazí.
4. Problémy s kešováním: Váš prohlížeč si mohl uložit starou verzi webu bez favicony. Také serverový nebo CMS kešovací systém může bránit zobrazení nově nahrané ikony.
5. Specifika redakčního systému (CMS): Každý CMS (WordPress, Shoptet, Webflow atd.) má svůj vlastní způsob, jak s faviconou pracovat. Pokud jste ji nastavovali mimo doporučený postup daného systému, může dojít k problémům.

Nezoufejte, proč se nezobrazuje ikona webu v prohlížeči, není záhadou, ale často jen drobnou technickou překážkou, kterou si sami můžete vyřešit.

Jak to opravit krok za krokem

Pojďme se podívat, jak nastavit faviconu a zajistit, aby vaše značka zářila v každé záložce prohlížeče.

1. Vytvořte si perfektní faviconu

   • Formát: I když tradiční je .ico, doporučujeme moderní a univerzální formát .png s průhledným pozadím. Pro maximální kompatibilitu můžete použít i oba. .SVG je skvělá volba pro moderní prohlížeče, jelikož se jedná o vektorový formát, který se perfektně škáluje.
   • Velikost: Ideální velikost favicony pro web je taková, která se dobře zobrazí na různých zařízeních. Pro samotnou záložku stačí 16x16 px nebo 32x32 px. Ale pro širší kompatibilitu (např. Apple Touch Icon pro iOS domovské obrazovky) je dobré mít ikony i ve větších rozměrech, například 180x180 px. Vždy dbejte na čtvercový poměr stran.
   • Design: Mějte na paměti, že se jedná o velmi malou ikonu. Volte jednoduchý, minimalistický design, který je okamžitě rozpoznatelný i v miniaturním provedení. Často se používá jen počáteční písmeno loga nebo zjednodušená grafická značka.

2. Pojmenujte soubor správně Pokud nebudete ikonu odkazovat explicitně v HTML, prohlížeč automaticky hledá soubor favicon.ico (pro ICO formát) nebo favicon.png (pro PNG) v kořenovém adresáři vašeho webu. Doporučujeme používat logické názvy, například favicon.png, favicon.ico nebo apple-touch-icon.png pro specifické účely.

3. Nahrajte soubor na web a propojte jej Způsob nahrání závisí na tom, jaký redakční systém (CMS) používáte:

   • Pro WordPress (nejjednodušší): Většina moderních šablon WordPress umožňuje jak nastavit faviconu na WordPressu přímo v nastavení:
     • Přihlaste se do administrace WordPressu.
     • Přejděte na Vzhled -> Přizpůsobit.
     • Vyhledejte sekci Identita webu (nebo Nastavení záhlaví/Logo & Ikona webu).
     • Zde najdete možnost Ikona webu nebo Favicona. Klikněte na Vybrat ikonu, nahrajte svůj PNG soubor (ideálně s rozměry 512x512 px, WordPress si ho sám optimalizuje) a uložte změny.
   • Pro jiné CMS (Shoptet, Webflow atd.): Podobná nastavení najdete v jejich administraci, obvykle v sekcích týkajících se obecného nastavení webu, designu nebo identity značky.
   • Ručně (pro zkušenější):
     • Nahrajte soubor favicon.png (nebo favicon.ico) do kořenového adresáře vašeho webu (tam, kde je soubor index.html nebo index.php). Můžete jej také umístit do složky img nebo assets, pokud je to pro vás přehlednější.
     • Poté v <head> sekci vašeho HTML kódu (obvykle v souboru header.php u WordPressu nebo index.html u statických webů) přidejte následující řádky:

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

       Ujistěte se, že href cesty (/favicon.png, /favicon.ico, /apple-touch-icon.png) správně odkazují na umístění vašich souborů na serveru. Lomítko na začátku (/) značí kořenový adresář webu.

4. Vymažte cache Po provedení změn je klíčové vyčistit keš:

   • Keš prohlížeče: Stiskněte Ctrl + F5 (Windows) nebo Cmd + R (Mac) pro tvrdé obnovení stránky. Případně vymažte historii prohlížení včetně cookies a dat webů.
   • Keš serveru/CMS: Pokud používáte kešovací plugin (např. WP Super Cache, LiteSpeed Cache) nebo váš hosting poskytuje serverové kešování, nezapomeňte ji také vyčistit.

5. Otestujte zobrazení Otevřete svůj web v jiném prohlížeči, nebo v režimu inkognito. Můžete také použít online nástroje pro kontrolu favicony, které vám ukáží, jak se ikona zobrazuje na různých platformách.

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

I když se nastavení favicony zdá jako drobný úkol, někdy se může proměnit v překvapivě frustrující boj. Možná se vám nedaří problém vyřešit ani po dodržení všech kroků, nebo se zkrátka nechcete ztrácet čas s technickými detaily, když se můžete věnovat svému podnikání.

Zde jsou situace, kdy je lepší neváhat a svěřit práci odborníkovi:

• Nemáte čas ani chuť: Pokud jsou technické detaily mimo vaši komfortní zónu nebo se prostě nechcete zabývat laděním kódu či hledáním správných nastavení, profesionál to vyřeší za vás rychle a efektivně.
• Problém přetrvává: Zkusili jste vše, ale favicona se stále neukazuje? Může jít o komplexnější problém s konfigurací serveru, CMS, nebo konfliktem mezi různými pluginy či skripty.
• Potřebujete profesionální design: Pokud chcete, aby vaše favicona nejen fungovala, ale také dokonale reprezentovala vaši značku a vynikla, designér vám pomůže s tvorbou optimalizované ikony.
• Máte složitější web: Web s mnoha podsložkami, custom šablonou nebo specifickým nastavením může vyžadovat odbornější přístup k umístění a odkázání favicony.
• Chcete si být jisti: Nechcete nic nechat náhodě a chcete mít jistotu, že je vše nastaveno správně pro všechny prohlížeče a zařízení, včetně optimalizace pro SEO a rychlost načítání.

Odborník zajistí nejen správné zobrazení favicony, ale také to, že bude technicky správně implementována a bude přispívat k celkovému profesionálnímu dojmu z vašeho webu.

Favicona je sice drobný, ale nesmírně důležitý detail, který dotváří profesionální dojem z vašeho webu. Pokud se vám nedaří problém vyřešit, nebo si chcete být jisti, že je vše nastaveno správně a vaše značka září, neváhejte se obrátit na Vítka Hoška z jasnyweb.cz. Rád vám s nastavením favicony, ale i s celkovým designem a optimalizací webu pomůže.