Favicons
Pavel Hamřík
Favicon?
- malá ikonka v rohu okna, záložky, na stavovém řádku etc.
- bitmapový formát původně vyvinutý Microsoftem pro ikony a kursory Windows
- později pro IE5 bookmarky (odtud fav-icon)
- dnes už existuje standardizovaný MIME type pro favicon image/vnd.microsoft.icon
Rozměry
- 16 × 16 pixelů
- 32 × 32 pixelů
- i větší
- suverénně nejrozšířenejší a vzhledem ke způsobu použití i smysluplný je ten první
- multiikony – jeden soubor obsahuje více velikostí ikon
- některé weby upřednostňují větší ikonu, kterou si prohlížeč zmenší
Návrh a tvorba
- 16 × 16 pixelů není zrovna mnoho
- motiv by měl být jednoduchý, zapamatovatelný, charakterizující etc.
- ikona by dále měla být výrazná a originální
- zároveň je dobré dbát na optimální vykrytí plochy, udělat ikonu "velkou"
- a musí to být rozeznatelné a čitelné; využití pixel-artu
Význam
- dnes už má faviconu drtivá většina webů
- díky tabbed-browsingu je to výrazná identita
- pro mnoho webů je to svazující ukazatel jdoucí napříč různými podstranami, aplikacemi a vedlejšími projekty
- takový logotyp v malém
- zapamatovatelnost, rozlišitelnost např. v bookmarku
Průhlednost
- pouze jeden bit průhlednosti (pixel je buď úplně průhledný nebo zcela neprůhledný)
- přesto se s ní dají dělat drobné triky
- například "sražené" rožky
- pomalu se objevuje podpora pro vícebitovou průhlednost; mimo standard
Podpora v prohlížečích
- IE6 jen pokud je stránka v záložkách
- ICO formát funguje dobře prakticky ve všech alespoň trochu soudobých prohlížečích: IE7+, Safari, Opera, Firefox, Chrome
- PNG a GIF v soudobých prohlížečích
- Firefox (nebo ev. jiný klon Mozilly) navíc jako zřejmě jediný podporuje animaci favicony v GIF
Vkládání I
HTML
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico"><link rel="icon" type="image/gif" href="http://example.com/image.gif"><link rel="icon" type="image/png" href="http://example.com/image.png">
Vkládání II
XHTML
- S mezerou lomítkem na konci (nepárový tag)
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
Vkládání III
Praktické řešení
- shortcut i icon v rel atributu
- typ image/x-icon (pro formát ico)
<link rel="shortcut icon" href="http://new.prolezacky.cz/favicon.ico" type="image/x-icon" />- předností je, že funguje víceméně všude
- velmi rozšířený způsob
Vkládání IV
Nepraktické řešení
- prohlížeč v souladu s původním návrhem Microsoftu hledá faviconu na http://example.com/favicon.ico
- zobrazení není jisté
- globálně rezervovat adresu pro jeden účel je v rozporu s myšlenkou webu – jakýsi cybersquatting
Vkládání V
Apache
A další ukázky…
