FYSIKUMS WEBB- OCH MEDIAKURSER

Adressikoner visas i favorit- och adressilistan

Du har kanske sett adressikoner (ibland kallade webbsideikoner eller favoritikoner, eng. favicon, shortcut icon eller page icon) på dina surfturer ute på webben. En adressikon är en liten 16x16 pixel stor bild som visas jämte en webbplats namn när du lägger webbplatsen i din favorit- eller bokmärkeslista. Webbplatsens ikon kan också visas jämte webbplatsadressen i din webbläsares adressfält samt i webbsideflikar (eng. tabs) för program som stöder sådana, t.ex Firefox.

Adressikoner är något så ovanligt som en av Microsoft introducerad, ickestandardiserad teknik som faktiskt är riktigt trevlig och användbar, och som dessutom tagits upp av andra webbläsartillverkare så att den inte bara fungerar i Internet Explorer (version 5 eller senare; det funkar inte i någon av Internet Explorers Mac-versioner) utan även i bl.a Firefox/Mozilla/Netscape, Konqueror och Safari. I själva verket funkar originellt nog denna Microsoftidé bättre i de andra webbläsarna än i Microsofts egna webbläsare Internet Explorer! Mycket ska man få vara med om...

Så här kan det t.ex se ut i Internet Explorer (bilden är Microsofts egen reklambild; alla favoritwebbplatserna är följaktligen Microsofts egna):

I webbläsaren Mozilla (här i Mac-versionen), Firefox, Opera m.fl. visas inga ikoner i bokmärkeslistan, men däremot ligger ikoner i adressfält och webbsideflikar:

Kärt barn har förfärligt många namn...

Något om namnet på denna teknik. Microsoft, som tog fram tekniken, kallar bilderna shortcut icons. En "shortcut eller "genväg" är en företeelse i Windows, en snabblänk till en fil eller katalog som ligger någon annan stans. Vanliga filgenvägar brukar man ju placera t.ex på skrivbordet eller i genvägslisten längst ner på Windows-skärmen. Namnet "shortcut icon" kommer sig av att länkar i Internet Explorers favoritlista rent fysiskt lagras i precis samma filformat windows icon som genvägar i Windows filsystem. I Windows 2000/XP hittar du de filer som visas som adressikoner i Internet Explorer på sökvägen

C:\Documents and Settings\username\Favorites

där username är ditt inloggningsnamn i Windows. Favoritlänkens ikon är helt enkelt samma som ikonen för de genvägsfiler som ligger på denna sökväg. [Jag förstår ärligt talat inte varför Microsoft har valt att använda en obskyr teknisk term "shortcut icon" för en offentlig webbteknik som adressikoner. Ingen untom Windows-programmerare kan ju rinligen bry sig något om hur Internet Explorer fungerar bakom kulisserna. Tyvärr får vi finna oss i Microsofts val av namn, åtminstone så länge vi diskuterar hur tekniken fungerar i Internet Explorer.]

Filnamnet för adressikoner enligt Microsofts föreskrifter ska vara "favicon.ico" (mer om detta nedan), så på nätet ser man många referenser till tekniken under det konkreta och beskrivande namnet favicons (där fav förstås kommer från Favorites, namnet på Internet Explorers bokmärkeslista).

Mozilla, organisationen som står bakom bl.a webbläsarna Firefox och Mozilla, har vidareutvecklat tekniken (mer om även detta nedan) under namnet page icons, ett namn som ju anknyter mer till hur fenomentet används än till teknikaliteter.

På svenska föreslår Svenska dtatermgruppen att man använder termen adressikoner eller adressymboler, se www.nada.kth.se/dataterm/rek.html#a187. Detta namn anknyter naturligt till att adressikoner visas i början av webbläsares adressfält, men missar helt att ikonerna också visas i favoritlistor och på flikar.

Att hitta ett bra namn för en ny företeelse är sannerligen inte enkelt...

Adressiokoner är en robust teknik

Ett vanligt problem med webbsideutveckling är att HTML-, stilmalls- eller javascriptkod kan tolkas olika i olika webbläsare, och att det för somliga företeelser (framförallt ostandardiserad fusk-HTML) finns webbläsare som inte kan eller vill visa företeelsen alls. Man pratar i webbsammanhang därför om "robusta" tekniker. Webbsidor som innehåller en företeelse skapad med en "robust" teknik fungerar utan problem även i webbläsare som inte gillar tekniken. Stilmallar, om de används rätt, ska t.ex vara en sådan robust teknik: webbsidor designade för moderna webbläsare är läsliga (men kanske fula) även i äldre webbläsare som inte klarar av att tolka stilmallar.

Trots att det är Microsoft som står bakom idén med adressikoner är denna teknik faktiskt robust, på ett trivialt sätt: om du går till en webbplats med adressikoner med en webbläsare som kan visa ikonerna så syns de i favoritlista och adressfält, men om du besöker webbplatsen med en äldre webbläsare som inte kan hantera denna teknik märker du ingen skillnad: i stället för adressikon visas bara webbläsarens standardikoner.

Detta förutsätter naturligtvis att man inte lägger någon betydelse i adressikonen, en betydelse som gör att man måste kunna se ikonen för att fatta vad som händer. T.ex om du dumt nog skulle lägga olika ikoner på olika sidor, och hänvisa till ikonerna för att besökarna ska veta t.ex om en tjänst som presenteras på en sida är gratis eller avgiftsbelagd. All betydelsebärande information ska ligga nere i själva webbsidan!

Se alltså på adressikoner enbart som en liten dekorativ lustifiering av din webbplats, onödig men kul, inget annat.

Två typer av bilder kan fungera som favortitikon

En adressikon består av en bild som är 16x16 pixel stor. Jag ska i ett avsnitt längre fram ge tips på hur du skapar en sådan ikonbild, men först några tråkiga nyheter som krånglar till arbetet lite.

Jag antydde tidigare att det finns skillnader i hur adressikoner hanteras i å ena sidan webbläsaren Internet Explorer och å andra sidan en del andra webbläsare, bl.a Firefox/Mozilla/Netscape, Konqueror och Safari. En av dessa skillnader ligger i vilket grafikformat den bilden som ska utgöra adressikon måste sparas i. AlltsŒ:

[Windows Vista lär ha stöd för adressikoner i PNG-format; när detta skrivs (vintern 2007) har jag inte hunnit kontrollera denna uppgift.]

Filformatet Windows Icon är det som används av operativsystemet Windows för ikoner på filer, mappar och genvägar. En Windows Icon-fil har filnamnstillägget .ico och är egentligen inte en bild utan typiskt en samling bilder hopbuntade till en fil. I samlingen inår olika bilder för de olika upplösningar eller färgdjup som kan förekomma i Windows. En adressikonsfil behöver i och för sig bara innehålla en enda bild, själva den 16x16 pixel stora ikonen, men filformatet är som sagt mer flexibelt än så.

Som tabellen ovan antyder måste din ikon vara sparad som en Windows Icon-fil om tricket ska fungera för besökare på din webbplats som använder Internet Explorer för Windows. Anledningen att Microsoft valt detta i andra sammanhang mycket ovanliga filformat är (som jag nämnde tidigare) att länkar i favoritlistan rent fysiskt sparas som genvägsfiler i Windows filsystem, och adressikonen är helt enkelt ikonen för dessa genvägsfiler. Enkelt för Microsoft - men krångligt för alla oss andra.

För de andra webbläsarna kan adressikoner lika gärna vara sparade i något av de mer vanliga filformaten GIF, JPEG och PNG, som ju är de filformat bilder inbäddade i webbsidor ska ha. För webbutvecklare vore det onekligen enklare om man slapp lära sig hantera ett helt nytt filformat för något så oviktigt som adressikoner. Dessutom har det kanske mest populära bildredigeringsprogrammet bland webbutvecklare, Photoshop, ingen aning om vad en Windows icon-fil är, vilket ju ytterligare komplicerar livet.

Eftersom det är väsentligen mycket enklare att skapa filer i GIF, JPEG eller PNG än Windows Icon-filer kan vi bara hoppas på att Internet Explorer kommer att mogna efterhand och acceptera alla dessa format i en framtida version av programmet (problemet finns för Internet Explorer t.o.m. version 7, för Windows t.o.m. Windows XP; det är alltså möjligt att Windows Vista fungerar bättre).

Två sätt att lägga in en adressikon för en webbsida

Det finns ytterligare ett område där det råder viss förvirring mellan olika webbläsare som kan visa adressikoner, nämligen i sättet att aktivera adressikoner för en webbplats. Enligt den något knapphändiga informationen hos Microsoft var tanken ursprungligen att det ska finnas två sätt att aktivera adressikoner.

Metod 1:
En enda bildfil som automatiskt används för samtliga sidor i en webbplats

Den första metoden kräver strikt standardisering för att kunna fungera med alla webbläsare, utan extra instruktioner i form av inbäddad HTML-kod i webbsidor:

1. bildfilen med favoritikonen måste ha ett standardiserat namn, nämligen favicon.ico

2. bildfilen måste placeras på rotnivån i en webbplats, d.v.s direkt jämte startsidefilen index.htm (eller index.asp el. dyl.)

Då ska automatiskt alla sidor som laddas ner från denna webbplats kunna utnyttja adressikonen. Detta trick fungerar inte i somliga webbläsare, särskilt Firefox/Mozilla/Netscape. Notera också att man med denna metod måste spara sin adressikonfil i filformatet Windows Icon, medan GIF t.ex dessvärre inte kan användas.

Metod 2:
Varje webbsida innehåller särskild HTML-kod som pekar på en viss bildfil

En fördel med att ha specifik adressikonkod i varje enskild webbsida på webbplatsen är att varje webbsida kan ha en annan adressikon än andra sidor. Så kan man t.ex anpassa valet av adressikon för olika avdelsningar som alla ligger på samma server.

En annan fördel är att man kan placera adressikonfilen varsomhelst i katalogstrukturen i webbrotkatalogen, och är inte längre begränsad till huvudnivån.

Denna metod är den enda som funkar med webbläsarna Firefox/Mozilla/Netscape. Vill du vara lite bredare än att bara serva användare av Internet Explorer är du tvungen till att välja detta sätt att hantera adressikoner.

Metoden bygger på att du i varje webbsidefil på din webbplats lägger in en referens till adressikonfilen med HTML-elementet <link>, samma element som även används för att referera till en extern stilmallsfil. Nackdelen med metoden är följaktligen att denna extra HTML-kod måste läggas in i var och en av dina webbsidor.

Metoden är onekligen mer arbetskrävande, och du får själv bedöma om den extra mödan uppvägs av fördelarna.

Låt mig få sammanfatta situationen:

Vad besökaren måste göra för att få se adressikoner på din webbplats

Så långt det du som webbsideskapare måste göra för att se till att adressikoner i princip ska kunna ses för dina webbsidor. Men hur ser det ut ute i verkligheten, på en besökares dator? Ja också där finns skillnader mellan Internet Explorer och dess kollegor.

Adressikonerna verkar dyka upp i adressfältet hos webbläsare som Firefox/Mozilla/Netscape så fort en besökare laddat ner en ikonförsedd sida, medan det i Internet Explorer krävs att sidan först läggs till favoritlistan innan ikonen även visas i adressfältet (åtminstone gällde det t.o.m. version 6 av Internet Explorer).

Å andra sidan fungerar inte adressikonerna i favorit- eller bokmärkeslistan i Mozilla/Netscape, även om det är tal om att detta kan komma att rättas till i senare versioner (jag har testat version 1.7 av Mozilla). I Mozillagruppens mest moderna webbläsare Firefox (version 1.0 och senare) har problemet dock åtgärdats, och nyinlagda bokmärken visas med (ev.) adressikon. Ytterligare ett skäl till att använda Firefox.

Det finns en tredje plats där adressikonerna kan visas, nämligen i de webbsideflikar (eng. tabs) som de mest moderna webbläsarna har. Flikar infördes först med version 7 av Internet Explorer, och de visar adressikoner. I Firefox flikar syns adressikoner, men inte i Safaris.

Ja det är ingen hejd på förvirringen... Så här verkar situationen se ut:

För att jävlas riktigt extra verkar Internet Explorer inte vilja visa adressikoner om man testar tekniken lokalt från sin hårddisk, vilket ju är det vanliga sättet att testa webbsidor man jobbar med innan de slutligen publiceras. Man måste alltså först publicera sidorna (och förstås själva adressikonfilen) för att kontrollera om det funkar.

Är adressikoner en säkerhetsrisk?

En liten anmärkning till. Adressikonernas uppfinnare Microsoft har kritiserats för att ha designat tekniken på ett så klantigt sätt att den introducerar en säkerhetsrisk (som om det vore förvånande när Microsoft är inblandade). En serveradministratör kan nämligen i sina serverloggar se vilka besökare som efterfrågar favoritiokonfilen, och som man därför kan sluta sig till har lagt in en webbsida i sin favortilista. Eftersom man på detta indirekta sätt kan se vilka länkar som finns i besökarens favoritlista, har kritikerna sagt, kan man kartlägga personliga preferenser hos webbanvändare, vilket (åtminstone i Amerika) ses som ett intrång i privatsfären. Nu är detta väl knappast en himlaskriande säkerhetsrisk, och dessutom har andra webbläsare räddat Microsoft ur knipan genom att alltid ladda ner adressikonen, oberoende av bokmärkningen. Vi kan alltså skapa adressikoner för våra webbplatser utan att vara oroliga för säkerheten.

Skapa egna adressikoner

Med detta sagt som introduktion tänkte jag nu gå igenom dels hur du skapar egna adressikoner med ett grafikprogram (jag ska demonstrera hur du arbetar med editorn Photoshop), dels hur du anpassar dina webbsidor för att de ska visa adressikonen (antingen manuellt i HTML-kod eller i den grafiska webbeditorn Dreamweaver).