Ikona stránky
nazývaná též favicon.ico
Možná jste si někdy všimli, že máte v prohlížeči před adresou stránky nebo na oušku karty nějaký obrázek.
Jak zařídit, aby se ta ikona zobrazovala i čtenářům vaší stránky?
favicon.ico
Ikona je obrázek a má přesné jméno -- favicon.ico . Jak pravděpodobně víte, ico je přípona formátu ikony. Raději ji vždy píšu malými písmeny.
Slovo "favicon" je zřejmě zkratkou anglického "favorite icon". Prapůvodní využití této ikony bylo totiž jako ilustrační obrázek při uložení stránky do oblíbených.
Umístění ikony
Pokud se ikona bude jmenovat favicon.ico a bude v kořeni webu, prohlížeče ji naleznou automaticky.
Jestliže chcete (nebo musíte) mít ikonu jinde, snadno na ni lze odkázat pomocí tagu <link>. Zápis je tento:
<link rel="shortcut icon" href="ikony/web.ico" type="image/x-icon">
V příkladu určuje atribut href umístění ikony, v tomto případě v adresáři ikony. Pak se může i libovolně jmenovat.
Dnes je praxe umisťovat takových linků do hlavičky webů mnoho různých pro různá zařízení, což považuju za plýtvání daty a nedělám to. Když se ta zařízení snaží, nakonec si favicon.ico najdou. Popisuju to níže u mobilů.
Jak vytvořit ikonu
Nejlepší je netvořit ji, ale někde zkopírovat. Pokud vám toto minimalistické řešení nestačí, musíte ji vytvořit. Možné způsoby
- budete na tvorbu a úpravu ikon potřebovat nějaký grafický program (například windowsovské Malování). Pokud program nepodporuje přímo formát *.ico, uložte obrázek do souboru *.bmp (16 x 16 bodů) a pak ho prostě přejmenujte na favicon.ico. Není to úplně nejlepší postup, protože nedovolí nastavit průhledné pozadí a ikona taky nemusí ve všech prohlížečích fungovat.
- do formátu ico umí ukládat i Gimp, grafický program. Dělá se to příkazem Soubor > Exportovat. Vybere se druh souboru "Ikona Microsoft Windows ico"
- Jecas doporučuje online generátor http://realfavicongenerator.net/
- Nebo zkuste on-line nástroj na konverzi ikony z obrázku http://icoconvert.com/
- Ikony od Marina Kasmana je program, který umí do formátu ikony uložit kus aktuální obrazovky
GIMP podrobněji
Já poslední dobou nejraději dělám ikony v GIMPu. Gimp je bezplatný grafický program, jeden z nejlepších na bitmapovou grafiku. Klasicky ho najdete na internetech pod jménem GIMP, stáhnete, nainstalujete. Já ho mám v angličtině.
Když třeba tvořím ikonu 32x32, vytvořím nový obrázek (File > New). Image Size dávám 32x32. V Advanced Options nastavím výplň na průhlednou (Fill width: Transparency).
Najdu si mezi nástroji nástroj Tužka (Pencil Tool) a Brush nastavím na 1 pixel. Pod nástroji zvolím barvu. Pak už jde kreslit. Pokud chci mazat, zvolím si Pencil Mode na Erase.
Jsem-li spokojen, uložím si to a pak vyexportuji příkazem File > Export. Vlevo dole je Select File Type. Doroluji k M a vyberu Microsoft Windows icon s příponou ico. Napíšu název souboru (třeba favicon.ico nebo favicon32x32.ico) a mělo by se to uložit. Pak lze ikonu rovnou hodit na web.
Vlastnosti ikony
Ikona může mít rozměry 32 x 32 nebo 16 x 16, ba i jiné. Pro případ oblíbené webové ikony vřele doporučuji rozměr 16 x 16, protože se větší stejně ve většině případů zobrazovat nebude.
Od doby, co existují chytré telefony, může být ikona také větší.
Multiformat ICO
Vilém Málek radí následující:
Vyplatí se ikonu vytvořit jako tzv. multiformát ICO (a nikoli PNG, který to neumí) Mela by obsahovat jednu verzi ikony ve velikosti 16x16 pixelů a v 16 barvách (ta se použije v prohlížeči) a také verzi ve velikosti 32x32 bodu ve 256 barvách (použije se při uložení ikony na pracovní plochu a také tehdy, když má uživatel nastaven monitor na vysoké rozlišení a zapnuty tzv. "velké" ikony).
Podoba ikony
Pokud někomu přijde rozměr 16 x 16 nebo 32 x 32 pixelů jako výborný tvůrčí prostor, tak mě tedy ne. Opravdu nemá smysl tvořit nějaké umělecké dílo. Zvolte něco jednoduchého.
Zářným příkladem může být
někdejší červeno-bílá ikonka Oskara.
Stejně jediným účelem ikonky je zaujmout čtenářovo oko mezi jinými ikonkami, které mají na oušku záložky.
Ikony pro mobily
Zatímco desktopové počítače používají favicony pro vykreslení na ouškách záložek nebo před adresou, mobilní prohlížeče podle mých zkušeností příliš favicony nezobrazují. To jim ale nebrání v jejich stahování na pozadí. V serverovém logu vidím, že si mobilní prohlížeč pro faviconu sáhne, ale nikde ji nezobrazí.
Například Safari na iPhone faviconu zobrazí jenom při přepínání záložek.
Důležitější jsou pro mobily jejich proprietální ikony, které si také zkoušejí stahovat. Používají je ale pouze v situaci, kdy si uživatel chce stránku přidat do oblíbených nebo na plochu. Tyto proprietální ikony mají asi dvanáct různých rozměrů, protože se výrobci prohlížečů a operačních systémů nejsou schopni dohodnout, jak velká má taková ikona být.
V případě Safari pro iPhony a iPady se prohlížeč snaží z rootu webu sáhnout si ikony pojmenované takto a v tomto pořadí:
- apple-touch-icon-120x120-precomposed.png
- apple-touch-icon-120x120.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
přičemž ta oblast 120x120 se liší podle toho, jaký je to přesně iPhone nebo iPad. Může to být 144x144, 180x180 apod. Předem ale nevím, jakou velikost bude Safari chtít. Což je jedna zrada. Z toho plyne, že bych tam správně měl mít asi 12 rozměrů ikon. Druhá zrada je to, že v naprosté většině případů prohlížeč tu ikonu vůbec nijak nepoužije.
Dementi, fakt.
Poznámka k precomposed: jestli jsem to pochopil správně, liší se ikona s -precomposed tím, že má předem uříznuté zaoblené růžky.
V praxi to tedy řeším tak, že žádné apple-touch-icon-* na webu nemám. Když si náhodou někdo mou stránku dá na plochu, tak se jako ikona vytvoří malý screenshot. To sice není ideální, ale přijde mi to lepší než mít v rootu webu bordel z nějakých ikon nebo v každé HTML hlavičce dvacet zbytečných řádků.
Reklama
