![Jak vyladit Faviconu?](https://karlstejn.toys/wp-content/uploads/2020/10/favicon_karlstejntoys_blue_web_340x340.png)
Jak vyladit Faviconu?
Jak vyladit Faviconu?
aneb když jeden *.ico soubor nestačí
![Favicony_01-ukazka Ukázka Favicon](https://karlstejn.toys/wp-content/uploads/2020/10/favicony_01-ukazka.png)
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
![favicon_KarlstejnToys_blue_web_340x340 Favicona firmy Karlštejn toys](https://karlstejn.toys/wp-content/uploads/2020/10/favicon_karlstejntoys_blue_web_340x340.png)
![favicon_WoodFormers-Toys_green_eshop_340x340 Favicona webu WoodFormers.toys](https://karlstejn.toys/wp-content/uploads/2020/10/favicon_karlstejntoys_green_eshop_340x340.png)
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”.
![Favicony_02-soubor Favicon - soubor](https://karlstejn.toys/wp-content/uploads/2020/10/favicony_02-soubor.png)
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.
![Favicony_03-umisetni Favicon - umístění](https://karlstejn.toys/wp-content/uploads/2020/10/favicony_03-umisetni.png)
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!
- umí zkontrolovat favionu na vašem webu – zadáte svoji stránku
- 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.