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ů…

Legend JAZZ & Teac 350

MP3 přehrávač má dnes už kde kdo. Jejich ceny rapidně klesají a funkcí stále přibývá. Můj první MP3 přehrávač byla (a je) Lyra (PDP2222) od Thomsonu.Thomson Lyra PDP2222 Na svou dobu zázrak techniky – 32MB flash paměť, slot na MMC karty (max 128MB), equalizér, růžné módy přehrávání… Bohužel, ceny karet se dlouho držely práliš vysoko a klesly až po pro Lyru tragickém pádu, po němž už karty nečetla. A s flashkou o 32MB se toho příliš dělat nedá.

Nějaký čas jsem hledal co nejlevnější přehrávač, který by měl být vybaven slušnou pamětí (alespoň 256MB), malý, s podsvíceným displayem a propojitelný klasickým USB kabelem (mini USB → USB).

Legend JAZZ

Natrefil jsem na přehrávač Legend JAZZ (650,–Kč s DPH). Designově zdařilý kousek, poháněný AAA baterií (stejně jako Lyra), s equalizérem, podsvětleným displayem.. jen paměť neměl sám o sobě žádnou – byl na SD karty. Vzhledem k tomu, že máme doma kvůli foťákům karet dost, byl jsem rozhodnutý. Za málo peněz, hodně muziky. Výdrž má skvělou, display je čitelný i na prudkém slunci a jako bonus, funguje při propojení s PC jako čtečka SD karet. Výborná kombinace s foťákem a notebookem na cesty.

legend-jazz

Časem mi však některé drobnosti na přehrávači chyběly. Nezobrazuje názvy skladeb, je tedy potřeba znát jejich pořadí. Neumí mód náhodný výběr skladby, neumí opakované přehrávání.. Rozhodl jsem se tedy, poohlédnout se po něčem výkonějším, s podporou ID3 tagů, s různými možnostmi přehrávání a s pamětí kolem 1GB. Zařízení také musí podporovat MASS STORAGE (tím pádem jsou Thomson a většina iRIVERů mimo hru).

Během pár dní brouzdání a pátrání jsem narazil na přehrávač který splňoval všechna má kritéria a ještě spoustu dalších, na něž jsem ani nepomyslel. Je jím Teac 350 (2500,– Kč s DPH).

Teac 350

Na fotografiích zveřejněných na internetu vypadá poměrně velký, proto byla pro mě jeho skutečná velikost obrovským překvapením. Je jen o něco málo větší než krabička od sirek. Disponuje pamětí o velikosti 1GB, barevným OEL displayem, rádiem, diktafonem, přehrává video, zobrazuje obrázky (výrobce i recenze tvrdí že použe .BMP, ve skutečnosti mu ani .JPG nedělá potíže). Ovládání je řešeno celkem originálně – dotykovým displayem. teac350Přehrávač mám cca týden a zatím jsem přišel pouze na dvě věci které mi vadí. Jsou to malinkatá tlačítka pod displayem a celkem špatná viditelnost displaye na přímém slunci. Nic víc, nic míň. Výrobce udává výdrž baterie 8 hodin, to se může zdát celkem málo. Je třeba si ale uvědomit, že 8 hodin v kuse snad ani nelze vydržet poslouchat a také to, že při každém připojení k PC se přehrávač nabíjí přes USB. Za celou dobu jsem tedy neměl problém s vybitou baterií (a to jej – k nelibosti přítelkyně – téměř neodkládám).

Na základě zkušeností, které jsem dosud získal jsem si vytvořil několik základních faktorů pro výběr MP3 přehrávače:

  1. určení (např poslech při sportu /FLASH/ x poslech na cesty /FLASH/ nebo /HDD/)
  2. kapacita (v návaznosti na první faktor – FLASH do 5GB, HDD nad 5 GB)
  3. výdrž (zahrnuje i druh akumulátoru)
  4. mass storage nebo portable device (klasický vyjímatelný disk nebo synchronizace přes nějaký program)
  5. Display (druh disp., ID3 tagy, viditelnost za různých světelných podmínek, velikost..)
  6. funkce (vyplatí se nějaké navíc, např na cesty)

A tak (jak praví klasik) končí naše komédie.. . Doufám, že se vám tento příběh jedné evoluce líbil a bude vám užitečný.

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)))