Jak vyladit Faviconu?

Jak vyladit Faviconu?

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.

Divi – test Tvůrce motivů – obsah

Divi – test Tvůrce motivů – obsah

Jiří Modr
Petra Modrová

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

%

Váš titul jde sem

%

Váš titul jde sem

Jméno jde sem tady

Jméno jde sem tady

Pozice

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.