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" />

Gravatar – poprvé na české scéně

Tento příspěvek byl původně publikován ve Čtvrtek 13.01.2005, 22:14 pod titulkem „A je to“ na původní verzi těchto stránek. Vzhledem k množství těch z vás, kteří jej tu hledají jsem se rozhodl jej obnovit ze zálohy původního blogu a umístit na tyto stránky. Jelikož stejná situace panuje u některých dalších textů, je pravděpodobné, že je potká stejný osud.

A je to!

Ne, nebudu psát o oblíbeném večerníčku.. Budu psát o implementaci vychytávky, která mně i vám usnadní (alespoň doufám) orientaci v komentářích tím, že vám umožní vkládat vlastní avatar., Na tuto záležitost jsem před několika dny narazil na blogu Michaela Heilemanna (binarybonsai.com). Připadalo mi, že komentáře v jeho blogu měly tak nějak hmatatelnější autory, než na co jsem zvyklý na českých blogech (nebo blozích??). Zapátral jsem proto, jakým způsobem to funguje a dostal se až ke zdroji. Tím je služba Gravatar. Funguje jednoduše; registrací na zmíněném webu bude vaší e-mailové adrese přiřazen jedinečný kód a k němu přiřazen i obrázek 80×80pixelů (stačí jej nahrát na server Gravataru). Když potom na blogu zapíšete do formuláře svůj email uvedený v registraci na Gravataru, skript ho automaticky převede na kód a vloží odpovídající avatar. Na stránkách služby je k dispozici plugin pro ty z vás, kteří používají MovableType, WordPress, TextPattern, Nucleus atd. Pokud nepoužíváte žádný z těchto masově rozšířených blogovacích nástojů, je tam i zdroják v PHP, PERL, ColdFusion a Javě. Pak už stačí jen vložit kód do šablony blogu. Pokud Gravatar na svůj blog chcete, ale nejste zběhlí v PHP a plugin pro váš blogovací systém neexistuje, budete muset najít nějakou dobrou, trpělivou osůbku, která se vyzná a pomůže. Já tímto chci poděkovat René Kopčemu, za trpělivost, úspěšné zprovoznění
Gravataru a na mé přání napsání skriptu a zprovoznění zpětných odkazů. Díky René!

Doufám, že se tahle vychytávka ujme, a uvidím ji i na webech jiných českých blogerů…

Fotopozdrav z Iráku

Čtu kotrmelce každý den a neustále mě tam něco překvapuje. Samozřejmě vím jak je trapný vykrádat cizí blogy a sajty, ale berte to prosím ne jako krádež, ale třeba jako malou reklamu na KOTRMELCE.cz. Jde o tento http://www.ryano.net/iraq/ Pozdrav si pochopitelně můžete nadefinovat sami. To že z pochopitelných důvodů nefunguje česká diakritika snad ani rozmazávat nebudu. So, klikejte!

[převzato bez laskavého dovolení Patawy — www.kotrmelce.cz]

Maturitní témata

Smolím je už dlouho, je fakt, že za 5 dní je asi nestihnu dopsat, natož se je naučit. Ale když si uvědomím, že dnes mám na stole 30x rychlejší počítač se 160x větší pamětí a 333x větším diskem než před 5 lety a nové programy se na tom dokážou belhat úplně stejně jako tehdy ty tehdejší, je to na pováženou. A když si představím, že jedna operace dnes procesoru trvá cca 0.000000001 sec, že během mrknutí oka dokáže 80.000.000krát přesunout čísla mezi registry, sečíst a odečíst je, během toho současně pětatřicetkrát překreslit všech 995.328 bodů na obrazovce a ještě si 130.000x ověřit, jestli jsem náhodu mezitím nestiskl klávesu nebo nepohnul s myší — tak se prostě musím zeptat: co ten Word doprdele už celou minutu dělá?

Přestáfka

Hlásím se z další přestáfky… učení mě ubíjí stále efektivněji. Další půllitr kafe v žaludku už dnes asi neunesu. Vždycky jsem si myslel, že psát si sešit je záležitost pro šprta. Teď lituju, že jsem nebyl šprt, poněvadž v hromadách papíru co se mi válí na posteli by se ani génius nevyznal… Bohužel, na reorganizaci je příliš pozdě. Huš co, uvidíme jak to dopadne. A. dnes zase odjela. Dodala mi optimismu a prolítla se mnou gramatiku. To bylo myslím nejefektivnější opakování za poslední týden… škoda že to tak nejde pořád. Ale co, když se nezadaří, vždycky můžu pohrozit tím, že si to maturitní vysvědčení prostě koupím :o)))