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.

ikonka Oskarmobilu

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

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.

ikonka OskarmobiluZář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í:

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.