Ett bra sätt att få folk att komma ihåg just din sida bland alla bokmärken är att ha en egen unik ikon för hemsidan. Här är min metod för att lägga till den. Rätt eller fel kan man diskutera, det finns nåra moduler för det här men jag hittade ingen som föll mig riktigt i smaken och det är en så pass liten ändring så det går snabbare att strunta i modulen.
Skapa favicon.ico
Vi börjar med att skapa en favicon.ico som är den som de flesta webbläsare söker efter som standard. Antingen kan du skapa en enkel genom att måla den på den här sidan http://www.favicon.cc/ men jag tycker att det blir snyggare om man konverterar en bild med hjälp av http://tools.dynamicdrive.com/favicon/. Ladda sedan upp den filen till webbrooten på din Drupal server, se till att den heter favicon.ico. Förutom att vi får en snygg bild associerad till våran hemsida så slipper vi många 404 felkoder i loggarna. Bara det en stor fördel.
Skapa favicon.png
De flesta av dagens webbläsare kan använda en vanlig bild i storleken 16x16 pixlar som ikon. Så samma bild som du använde här ovan skapar du nu en kopia av som du skalar ner till 16x16 pixlar.
Döp filen till favicon16x16.png och lägg även den i webbrooten.
Skapa en ikon till Apple IOS
Apple IOS enheter söker efter en fil som börjar med apple-touch-icon därför behöver vi även lägga till den filen. Så vi tar bilden som vi använde för att skapa favicon.ico och skalar ner den till 129x129 pixlar. Varför den konstiga storleken? Efter lite sökning på nätet så hittade jag det här blogginlägget där han rekommenderar den storleken eftersom att det är samma som Apple använder. En annan metod är att skapa olika storlekar så att de olika enheterna kan hämta rätt storlek men jag har istället en större bild som enheten sedan skalar ner.
Döp den nya filen till apple-touc-icon.png och lägg även den i webbrooten på din Dupal server.
Skapa en ikon till Windows 8 enheter
Även windows 8 enheter använder en annan ikon i det nya interfacet. Så vi tar samma bild igen och skapar en bild som är 144x144 pixlar. Vi sparar den som en 32-bitars PNG bild, helst ska den ha en transparent bakgrund för att smälta in bäst bland övriga ikoner. Jag struntade i och hoppas att det fungerar ändå, har tyvärr ingen enhet som jag kan testa på.
Den här filen döper jag till win8.png och lägger även den i webbrooten.
Lägg till meta tag i <head> på webbsidan
Som ett sista steg så behöver vi lägga till lite kod på hemsidan för att webbläsarna säkert skall hitta bilderna. Min metod är kanske inte rekommenderad då jag ändrar direkt i temat för att få in koden men det var enklast just nu. Så öppna html.tpl.php i din themes katalog (skapa först en kopia ifall det blir fel). Om den filen inte finns i ditt tema så kan du kopiera den från Drupal kärnan och lägga den bland de andra template filerna i temat. den filen ligger under modules/system. Ändra aldrig i filerna som ligger i kärnan då du då får stora problem vid uppgraderingar.
Lägg till nedanstående kod någonstans mellan <head> och </head>
<!-- WINDOWS 8 (IE10) -->
<meta name="msapplication-TileColor" content="#ff0000"/>
<meta name="msapplication-TileImage" content="touch-icon.png"/>
<!-- Apple Touch icons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon16x16.png">
Vad gör då meta taggarna?
<meta name="msapplication-TileColor" content="#ff0000"/>
Bakgrundsfärgen på knappen i windows 8 blir röd. Ändra FF0000 till den färgen du vill ha.
<meta name="msapplication-TileImage" content="win8-icon.png"/>
Talar om för Windows 8 samt Internet Explorer 10 var bilden ligger.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Talar om för IOS enheter var deras bild ligger.
<link rel="shortcut icon" href="favicon16x16.png">
Alla andra webbläsare ska använda den generella bilden och om de inte kan hantera png bilder så kommer de att ladda ner favicon.ico.