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
Rkpremia.cz
15.1.2023
Top články
Nejnovější příspěvky
Proklik
21. 10. 2024
Procházeno – momentálně neindexováno
21. 10. 2024
Prohlížeč
21. 10. 2024
Prodejní kampaň
21. 10. 2024