Favicon aneb ikony v adresním řádku

příklad použití favicon
příklad použití favicon

Určitě už jste si jich u některých webů všimli. Drobnůstky, které pomohou web ozvláštnit, personalizovat a hlavně mohou zvýšit pravděpodobnost, že si jej návštěvník zapamatuje. Ovšem i v případě, že si uživatelé váš web pamatují, není od věci jim paměť pravidelně osvěžovat ikonkou v oblíbených / záložkách / bookmarcích..

Pokusím se v tomto příspěvku odpovědět na nejčastější dotazy, které mi ohledně favicon posíláte. Shrnu to co o nich vím – od jejich tvorby, až po zobrazení na webu.

favicon-bkmks

Druhy ikonek a jejich interpretace různými prohlížeči

Možná se divíte co má to „druhy ikonek“ znamenat. Ikona je ikona – soubor konkrétního formátu(eng) s příponou .ico. To je sice pravda, nicméně použití ikony jako favicon specifikuje její parametry trochu konkrétněji a zároveň poněkud nabourá to co jsem uvedl výše.

Základní parametry favicon

  1. základní rozměr 16×16 obrazových bodů
  2. formát souboru .ico případně .gif nebo .png
  3. Doporučuje se barevná hloubka maximálně 256 barev (kvůli kompatibilitě se staršími prohlížeči a rozdílnými OS ).
  4. Dál je vhodné kromě základního rozměru 16×16 dopracovat i rozměry 32×32 a 48×48 obrazových bodů – to pro případ, že by si někdo vaši ikonku chtěl třeba umístit na plochu jako přímý odkaz na váš web.

Záhadné (ne)zobrazování v různých prohlížečích

Internet Explorer favicon zobrazí pouze pokud si konkrétní stránku přidáte do oblíbených. Je to docela škoda, ale na druhou stranu to přichystá uživateli často milé překvapení. Dalším omezením je možnost použít pouze statickou ikonku .ico.

Opera zobrazuje favicon bez problémů. Opět však bezproblémového výsledku dosáhneme pouze pomocí statické ikonky. Opera uživatele nenutí přidat stránku do oblíbených.

Mozilla Firefox Umožňuje použití obou druhů ikonky bez problémů a bez nutnosti přidat web do oblíbených. Navíc podporuje i formát .png.

Za zmínku stojí ještě Konqueror – Konečně zúročím svoje neslavné zkušenosti s linuxem. Tak tedy Konqueror zobrazuje statické ikonky bez problémů a bez nutnosti přidat si web do oblíbených. S animovanou ikonkou nemám v tomto prohlížeči zkušenost.

Tvoříme vlastní ikonku

Pro tvorbu statických ikon existuje mnoho programů, mezi freeware programy patří třeba Gimp, IrfanView nebo Xnview. Mě se však nejlépe osvědčila trial verze programu Microangelo Creation. Umí skvělé efekty a za těch 21 dní než trial verze expiruje stihne člověk nadělat mraky ikonek. Jeho hlavním pozitivem z mého hlediska však je to, že má stejné GUI jako Adobe Photoshop.

Pokud se vám tento postup zdá složitý, na webu existuje mnoho služeb, které vám udělají ikonku z libovolného obrázku. Za všechny uvedu třeba Favicon from Pics. Jako všude, i tady platí – kdo hledá, najde.

Animované ikony nejsou nic jiného, než běžný animovaný .gif o velikosti 16×16 obrazových bodů. Pro jejich tvorbu existuje mnoho freeware programů. Stačí se porozhlédnout.

Příklady zápisu kódu pro přiřazení ikony k dané stránce:

Následující kód vložte mezi tagy <head> a <head/>. Ikonku je nejlepší uložit do rootu webu a pojmenovat favicon.ico – to je důležité.

Statická ikonka(*.ico)

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Statická ikonka(*.png)

<link href="favicon.png" rel="icon" type="image/png" />

Animovaná ikonka(*.gif)

<link rel="icon" href="favicon.gif" type="image/gif" />

Ačkoli lze jednotlivé zápisy kombinovat (zkoušel jsem zápisy pro formát ico a gif a fungovalo to), nemusí to pracovat korektně a v některých případech to může způsobit, že se ikonka nezobrazí vůbec.

A co na závěr?

Před definitivním vypuštěním ikonky ještě můžete otestovat její validitu. Budete tak mít jistotu, že bude korektně zobrazena. Nezbývá než popřát hodně štěstí a především trpělivosti při vyplňování těch 256 pixelů a čekat, až mi nahlásíte zařazení právě té vaší ikonky v některé z galerií..

Dodatek ze současnosti (2015)

favicon-ios

Od doby, kdy jsem článek publikoval uplynulo už víc než 8 let, což je v IT jako návrat do pravěku. Proto se – přesto, že většina napsaného stále platí – raději poohlédněte po aktuálnějším zdroji.

Jinak pro příznivce produktů s nakousnutým jablíčkem ještě doplňím zápis a vlastnosti pro favicon v zařízeních Apple:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon.gif" type="assets/ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon.gif" type="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon.gif" type="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="favicon.gif" type="assets/ico/apple-touch-icon-57-precomposed.png" />

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>