Jak vyladit Faviconu?

Favicona firmy Karlštejn toys

autor: JIM ;o)

Ahoj, tohle vše je můj názor, díky že mi ho neberete. Jirka

25. 10. 2020

Jak vyladit Faviconu?

aneb když jeden *.ico soubor nestačí

Ukázka Favicon

Co je Favicona?

Favicona je obrázek, grafický prvek malých rozměrů. Nejčastěji se s ním setkáte v záložkách otevřených webů, kdy název stránek doplní tato grafika.

Favicona by měla být vaším miniaturním zjednodušeným logem, právě s ohledem na to, že nejčastěji je vidět s rozměry pouhých 16 až 32 px . Měla by ctít vaše barvy a může být třeba nějakou částí vašeho loga.

Zejména nástupem smartphonů ale došlo k rozšíření její funkčnosti, kdy při vhodném nastavení je tato vaše grafika použita i jako ikona pro ev. zástupce na ploše zařízení či je použita v uložených záložkách webového prohlížeče. K tomu se použije již více souborů s příslušnými většími rozměry.

Favicona našich webů

střídáme v nich 3 různé barvy na různém rozložení stále ve stejném tvaru grafiky

Favicona firmy Karlštejn toys
Favicona webu WoodFormers.toys

Nejčastější použití – absolutní základ

Webový hosting či redakční systém vašeho webu obsahuje možnost vložení grafiky pro Faviconu, někde v administraci. Vložením grafického prvku se pak tato ikonka začne zobrazovat na ošku vašeho webu.

Manuální vložení

aneb kontrola

V tomto základě je uložen mezi soubory, které tvoří váš web, vložen do rootu soubor z výše nahraného grafického formátu: favicon.ico. Jedná se o takřka libovolný grafický formát typu *.bmp, *.jpg, *.gif, *.png, …, který je ve výsledku jen přejmenován na tento “standard”.

Favicon - soubor

Výsledný soubor “favicon.ico” je tedy umístěn v rootu (kořenové složce) vašeho webu.

Pozn.: Obrázek mám ze souborové struktury pro WordPress.

Favicon - umístění

Rozšířené možnosti

aneb co mě baví

Když jsem lovil informace o faviconě, narazil jsem na její rozšířené možnosti. Narazil jsem na web, kde je právě posáno, jak vytěžit z favicony více a hlavně vám s tím na klikačku pomůže!

  1. umí zkontrolovat favionu na vašem webu – zadáte svoji stránku
  2. umí vytvořit více verzí pro různá prostředí, browsery a OS
    • je nutno trocha klikání, každá varianta si vyžaduje své…

Tím webem je: www.realfavicongenerator.net

Jediné, co dělám, že si celý jím vygenerovaný obsah, včetně dodaného CCS kódu upravím a nevkládám tu celou sadu připravených souborů do rootu, jako je favicon.ico, ale do vlastního adresáře, např.: ..\”favicons”\*.*; což lehce změním i v CCS, který vložím do hlavičky webu, nebo když nezapomenu, nastavím tuto cestu v konfiguraci na generátoru – je to poslední konfigurační box – tab “Path” v sekci “Favicon Generator Options”.

Ano, a pokud takovéto nastavení provedete, nemůžete většinou použít první volbu v rámci “jednoduchého” použití, zmíněného v úvodu článku.

Se může taky hodit…

0 komentáøù

Pøidat komentáø

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Share This