Favicon
- Proweby.cz
- 5. 7. 2024
- Slovník webových, online marketingových a IT pojmů, F.
Co je Favicon
Favicon, což je zkratka pro „favorite icon“ (oblíbená ikona), je malá ikona, která představuje webovou stránku nebo webovou aplikaci v záložkách webového prohlížeče, v historii prohlížeče, na liště záložek, ve výsledcích vyhledávání a v dalších místech v rámci uživatelského rozhraní prohlížeče. Typicky má rozměry 16×16 nebo 32×32 pixelů a je uložen ve formátu ICO, PNG, GIF nebo SVG.
Význam favikony
Identifikace a branding
Favikona pomáhá uživatelům rychle a snadno rozpoznat vaši webovou stránku mezi mnoha dalšími záložkami a uloženými stránkami. Je důležitou součástí vizuální identity a brandingu vaší webové stránky nebo aplikace.
Profesionální vzhled
Použití favikony přispívá k profesionálnímu vzhledu webové stránky. Uživatelé očekávají, že moderní a dobře navržené weby budou mít vlastní favikonu.
Uživatelská zkušenost
Favikona zlepšuje uživatelskou zkušenost tím, že usnadňuje navigaci a správu otevřených záložek a uložených stránek. Díky favikoně mohou uživatelé rychle identifikovat a vrátit se na vaši stránku.
Jak vytvořit favikonu
Při navrhování favikony je důležité mít na paměti několik klíčových bodů:
- Jednoduchost: Favikona by měla být jednoduchá a snadno rozpoznatelná i při malých rozměrech.
- Čitelnost: Vyhněte se použití složitých detailů nebo textu, který by mohl být nečitelný v malém formátu.
- Konzistence: Favikona by měla být konzistentní s vaší vizuální identitou a značkou, používejte stejné barvy a motivy jako na vašem webu.
Nástroje pro tvorbu favikony
Existuje mnoho nástrojů, které vám mohou pomoci vytvořit favikonu:
- Adobe Photoshop: Populární grafický editor, který nabízí pokročilé nástroje pro tvorbu a úpravu obrázků.
- GIMP: Bezplatný open-source grafický editor s funkcemi podobnými Adobe Photoshopu.
- Favicon Generator: Online nástroje, jako jsou favicon.io nebo realfavicongenerator.net, které vám umožní snadno vytvořit favikonu z obrázků nebo textu.
Jak přidat favikonu na webovou stránku
Krok 1: Vytvoření souboru favikony
Vytvořte soubor favikony ve formátu ICO, PNG, GIF nebo SVG. Ujistěte se, že má správné rozměry (16×16, 32×32 nebo větší pro vysoké rozlišení).
Krok 2: Nahrání souboru favikony na server
Nahrajte soubor favikony do kořenového adresáře vaší webové stránky nebo do složky s obrázky.
Krok 3: Přidání HTML kódu do hlavičky stránky
Přidejte následující HTML kód do sekce <head> vaší webové stránky:
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon">
Pokud používáte jiný formát souboru, například PNG nebo SVG, použijte odpovídající type atribut:
<link rel="icon" href="/path/to/favicon.png" type="image/png">
<link rel="icon" href="/path/to/favicon.svg" type="image/svg+xml">
Krok 4: Testování favikony
Otevřete svou webovou stránku v různých prohlížečích a zkontrolujte, zda se favikona správně zobrazuje. Pokud nevidíte favikonu okamžitě, zkuste vymazat cache prohlížeče a načíst stránku znovu.
Optimalizace favikony pro různá zařízení
Pro zajištění, že se favikona správně zobrazuje na všech zařízeních a v různých kontextech, můžete použít několik různých verzí favikony s různými rozměry:
- Standardní favikona: 16×16 nebo 32×32 pixelů pro běžné prohlížeče.
- Favikona pro vysoké rozlišení (Retina): 64×64 pixelů nebo větší.
- Apple Touch Icon: Pro zobrazení favikony na zařízeních Apple (iPhone, iPad):
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
- Android a další zařízení: Pro zobrazení favikony na zařízeních s operačním systémem Android a dalších:
<link rel="icon" sizes="192x192" href="/path/to/android-chrome-192x192.png">
<link rel="icon" sizes="512x512" href="/path/to/android-chrome-512x512.png">
Závěr
Favikona je důležitým prvkem vizuální identity a uživatelské zkušenosti vaší webové stránky. Dobře navržená favikona pomáhá uživatelům rychle rozpoznat vaši stránku a zlepšuje profesionální vzhled vašeho webu. Správné nastavení favikony a optimalizace pro různá zařízení zajišťuje, že se vaše favikona bude správně zobrazovat ve všech kontextech.
Nejnovější reference
Cacik.cz
8.4.2023
Bytyjahodnice.cz
21.6.2023
Kralovicedomy.cz
27.12.2023
Akkrajcikova.cz
29.5.2023
