Favicon - Favicon
En favicon ( / f æ v . Ɪ ˌ k ɒ n / ; kort för favorit ikon ), även känd som en genväg , webbplats ikon , fliken ikon , URL ikon , eller bokmärkesikon , är en fil innehållande en eller flera små ikoner , associerade med en viss webbplats eller webbsida . En webbdesigner kan skapa en sådan ikon och ladda upp den till en webbplats (eller webbsida) på flera sätt, och grafiska webbläsare kommer sedan att använda den. Webbläsare som tillhandahåller stöd för favicon visar vanligtvis en sidas favicon i webbläsarens adressfält (ibland även i historiken) och bredvid sidans namn i en lista med bokmärken . Webbläsare som stöder ett flikad dokumentgränssnitt visar vanligtvis en sidas favicon bredvid sidans titel på fliken, och platsspecifika webbläsare använder favicon som en skrivbordsikon .
Historia
I mars 1999, Microsoft släppte Internet Explorer 5 , som stödde favicons för första gången. Ursprungligen var favicon en fil som heter favicon.icoplacerad i rotkatalogen på en webbplats. Den användes i Internet Explorer : s favoriter (bokmärken) och bredvid URL: en i adressfältet om sidan var bokmärkt. En bieffekt var att antalet besökare som hade bokmärkt sidan kunde uppskattas med begäran från favicon. Denna bieffekt fungerar inte längre, eftersom alla moderna webbläsare laddar favicon -filen för att visas i webbadressfältet, oavsett om webbplatsen är bokmärkt.
Standardisering
Favicon standardiserades av World Wide Web Consortium (W3C) i HTML 4.01 -rekommendationen, som släpptes i december 1999 och senare i XHTML 1.0 -rekommendationen, som släpptes i januari 2000. Standardimplementeringen använder ett länkelement med ett relattribut i <head>avsnittet i dokumentet för att ange filformat och filnamn och plats. Till skillnad från tidigare system kan filen vara i en webbplats katalog och har en bild filformat.
År 2003 .icoregistrerades formatet av en tredje part hos Internet Assigned Numbers Authority (IANA) under MIME -typen image/vnd.microsoft.icon . Men när .icoformatet används för att visas som bilder (t.ex. inte som favicon) kan Internet Explorer inte visa filer som serveras med denna standardiserade MIME -typ. En lösning för Internet Explorer är att associera .icomed den icke-standardiserade image/x-iconMIME-typen i webbservrar.
RFC 5988 etablerade ett IANA -länkrelationsregister och rel="icon"registrerades 2010 baserat på HTML5 -specifikationen. Den populära <link rel="shortcut icon" type="image/png" href="image/favicon.png">teoretiskt identifierar två relationer, shortcutoch icon, men shortcutär inte registrerad och är överflödig. 2011 angav HTML -levnadsstandarden att av historiska skäl shortcutär tillåtet omedelbart före icon; har dock shortcutingen mening i detta sammanhang.
Arv
Internet Explorer 5–10 stöder endast ICO -filformat . Netscape 7 och Internet Explorer version 5 och 6 visar favikonet endast när sidan är bokmärkt, och inte bara när sidorna besöks som i senare webbläsare.
Webbläsarimplementering
Följande tabeller illustrerar stöd för olika funktioner med stora webbläsare. Om inget anges anger versionsnumren startversionsnumret för en funktion som stöds.
Stöd för filformat
Följande tabell illustrerar stödet för bildfilformat för favicon.
| Webbläsare | bildfilformat | ||||||
|---|---|---|---|---|---|---|---|
| ICO | PNG | GIF | animerade GIF -filer | JPEG | APNG | SVG | |
| Kant | Ja | Ja | Ja | Nej | Ja | Okänd | Ja |
| Firefox | 1.0 | 1.0 | 1.0 | Ja | Ja | 3.0 | 41,0 |
| Google Chrome | Ja | Ja | 4.0 | Nej | 4.0 | Nej | 80 |
| Internet Explorer | 5.0 | 11,0 | 11,0 | Nej | Nej | Nej | Nej |
| Opera | 7,0 | 7,0 | 7,0 | 7,0 | 7,0 | 9.5 | 44,0 |
| Safari | Ja | 4.0 | 4.0 | Nej | 4.0 | Nej | Icke-standard (12,0) |
Dessutom kan sådana ikonfiler vara 16 × 16, 32 × 32, 48 × 48 eller 64 × 64 pixlar i storlek och 8-bitars, 24-bitars eller 32-bitars färgdjup . Den ICO filformat artikeln förklarar detaljerna för ikoner med mer än 256 färger i olika Microsoft Windows- plattformar.
Användning av favicon
Denna tabell illustrerar de olika områden i webbläsaren där favicons kan visas.
| Webbläsare | Adressfält | Adressfältets nedrullningsbara lista | Länkfält | Bokmärken | Flikar | Dra till skrivbordet |
|---|---|---|---|---|---|---|
| Kant | Nej | Ja | Ja | Ja | Ja | Ja |
| Firefox | 1.0–12.0: Ja > v13: Nej |
Ja | Ja | Ja | Ja | Ja |
| Google Chrome | Nej | Nej | Ja | Ja | 1.0 | Nej |
| Internet Explorer | 7,0 | Nej | 5.0 | 5.0 | 7,0 | 5.0 |
| Opera | 7.0–12.17: Ja > v14: Nej |
Nej | 7,0 | 7,0 | 7,0 | 7,0 |
| Safari | Ja | Ja | Nej | Ja | 1.0–8.0: Ja 9.0–11.0: Nej > 12.0: Valfritt |
Nej |
Opera Software lade till möjligheten att ändra favikonet i kortnummer i Opera 10 .
Hur man använder
Denna tabell illustrerar de olika sätt som favicon kan identifieras av webbläsaren. Standardimplementeringen använder ett länkelement med ett relattribut i <head>avsnittet i dokumentet för att ange filens format, namn och plats.
| Kant | Firefox | Google Chrome | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|---|
<link rel="shortcut icon"
href="https://example.com/myicon.ico">
|
Ja | Ja | Ja | Ja | Ja | Ja |
<link rel="icon"
type="image/vnd.microsoft.icon"
href="https://example.com/image.ico">
|
Ja | Ja | Ja | Ja (från IE 9) | Ja | Ja |
<link rel="icon" type="image/x-icon"
href="https://example.com/image.ico">
|
Ja | Ja | Ja | Ja (från IE 9) | Ja | Ja |
<link rel="icon"
href="https://example.com/image.ico">
|
Ja | Ja | Ja | Ja (från IE 11) | Ja | Ja |
<link rel="icon" type="image/gif"
href="https://example.com/image.gif">
|
Ja | Ja | Ja | Ja (från IE 11) | Ja | Ja |
<link rel="icon" type="image/png"
href="https://example.com/image.png">
|
Ja | Ja | Ja | Ja (från IE 11) | Ja | Ja |
<link rel="icon" type="image/svg+xml"
href="https://example.com/image.svg">
|
Ja | Ja | Ja | Ja | Ja | Nej |
<link rel="mask-icon"
href="https://example.com/image.svg" color="red">
|
Nej | Nej | Nej | Nej | Nej | Ja |
favicon.ico finns i webbplatsens rot
|
Ja | Frivillig | Ja | Ja | Frivillig | Ja |
| företräde: föredrar root- eller (X) HTML -länkad version | länkade | länkade | länkade | länkade | ? | ? |
Om det finns länkar för både PNG- och ICO-favicons, väljer PNG-favicon-kompatibla webbläsare vilket format och storlek som ska användas enligt följande. Firefox och Safari använder favicon som kommer sist. Chrome för Mac använder vilken favikon som är ICO -formaterad, annars 32 × 32 favicon. Chrome för Windows använder favikonet som kommer först om det är 16 × 16, annars ICO. Om inget av de ovannämnda alternativen är tillgängligt kommer båda Chromes att använda vilken favicon som kommer först, precis motsatsen till Firefox och Safari. I själva verket kommer Chrome för Mac att ignorera 16 × 16 favicon och använda 32 × 32-versionen, bara för att skala ner det till 16 × 16 på enheter som inte är näthinnor. Opera kommer att välja bland alla tillgängliga ikoner helt slumpmässigt.
Endast SeaMonkey hämtar inte favicon.icofiler i webbplatsens rot som standard.
HTML5 -rekommendation för ikoner i flera storlekar
Den nuvarande HTML5 -specifikationen rekommenderar att du anger flera storlekar för ikonerna, med hjälp av attributen i en tagg. Flera ikonformat, inklusive behållarformat som Microsoft .ico och Macintosh .icns -filer, samt skalbar vektorgrafik kan tillhandahållas genom att inkludera ikonens innehållstyp i formatet i taggen.
rel="icon" sizes="space-separated list of icon dimensions"<link>type="file content-type"<link>
Från och med iOS 5 ignorerar Apples mobila enheter HTML5 -rekommendationen och använder istället den proprietära apple-touch-iconmetoden som beskrivs ovan. Den Google Chrome webbläsare kommer dock att välja den närmaste matchningen storlek från de som anges i HTML-rubriker för att skapa 128 × 128 pixlar programikoner , när användaren väljer Skapa programgenvägar ... från menyn "Verktyg".
Startskärmsikoner på mobila enheter
På Apple iPhones och iPads samt Android -mobila enheter kan användare fästa webbsidor som genvägsikoner på sin startskärm . Dessa genvägsikoner liknar vanliga appar och webbutvecklare kan tillhandahålla dedikerade ikoner för dem.
Apple -enheter
För Apple -enheter med iOS -operativsystemet version 1.1.3 eller senare kan användare fästa en webbplats på startskärmen med knappen Lägg till på startskärmen i delningsarket i Safari.
Detta fungerar för alla webbplatser. Men för att iOS ska visa genvägen med en ikon måste webbplatsen tillhandahålla en <link rel="apple-touch-icon" ...>i <head>avsnittet med dokument som serveras av webbplatsen. Om den anpassade ikonen inte tillhandahålls kommer en miniatyrbild av webbsidan att placeras på startskärmen istället.
Appikonstorleken på de olika enhetsklasserna skiljer sig åt. Rekommenderade storlekar för ikonerna är 152x152 för iPads (fram till iPad 2 , släpptes 2011), 167x167 för iPads med Retina -skärmar ( iPad 3 och senare) och 180x180 för iPhones. Om det inte finns någon ikon i matchande storlek väljer iOS den största ikonen med rel="apple-touch-icon"och skalar den automatiskt.
- Exempelkod
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
Ikonfilen som refereras av apple-touch-iconändras för att lägga till rundade hörn. På iOS -versionerna före iOS 7 skulle en droppskugga och reflekterande glans läggas till, och en apple-touch-icon-precomposedikon kan tillhandahållas för att instruera enheter att inte applicera reflekterande glans på bilden.
Ingen HTML krävs av webbläsare eller mobila enheter för att hämta dessa ikoner heller. Webbplatsens rot är standardplatsen för filen apple-touch-icon.png(i prioritetsordning).
Android -enheter
På Android -enheter kan användare använda funktionen Lägg till på startskärmen i Chrome -verktygsmenyn för att fästa en webbsida på startskärmen.
Detta fungerar också för alla webbplatser, men om inget favikon tillhandahålls används en generisk ikon. Eftersom ikonerna för Android -appen är 48 x 48 poäng, bör webbplatsen innehålla favicons i multiplar av 48 x 48 pixlar. För moderna högupplösta enheter rekommenderar Google att du tillhandahåller ikoner i 192x192 pixlar.
- Exempelkod
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
Android stöder också Web Manifest -filer, vilket gör det möjligt att integrera webbplatser djupare med systemet. Ett webbmanifest är en JSON -fil som anger metadata för en progressiv webbapp. Det tillåter utvecklaren att inte bara tillhandahålla ikonerna utan också ett kort namn för visning på startskärmen samt temafärger. Att tillhandahålla en webbmanifestfil är dock inte nödvändig för att funktionen Lägg till på startskärmen ska fungera.
Animerade favicons
Olika webbläsare som Chrome, Firefox och Opera stöder animering av favicons. En felrapport har varit öppen för Firefox sedan 2001 och begär ett sätt att inaktivera den här funktionen.
Begränsningar och kritik
På grund av behovet av att alltid leta efter det på en fast plats kan favikon leda till artificiellt långsam sidladdningstid och onödiga 404 poster i serverloggen om det inte finns.
W3C standardiserade inte rel-attributet, så det finns andra sökord som genvägsikon som också accepteras av användaragenten .
Favicons manipuleras ofta som en del av nätfiske eller avlyssningsattacker mot HTTPS -webbsidor. Många webbläsare visar favikoner nära områden i webbläsarens gränssnitt, till exempel adressfältet, som används för att förmedla om anslutningen till en webbplats använder ett säkert protokoll som TLS . Genom att ändra favikonet till en bekant hänglåsbild kan en angripare försöka lura användaren att tro att de är säkert anslutna till rätt webbplats. Automatiserade man-in-the-middle attackverktyg som SSLStrip använder detta trick. För att eliminera detta visar vissa webbläsare, till exempel Firefox eller Google Chrome, favikonet på fliken samtidigt som det visar säkerhetsstatus för det protokoll som används för att komma åt webbplatsen bredvid URL: en.
Eftersom favicons vanligtvis finns i roten till webbplatskatalogen på servern kan de med viss tillförlitlighet användas för att avslöja om en webbklient är inloggad på en viss tjänst. Detta fungerar genom att använda omdirigerings-efter-inloggningsfunktionen på många webbplatser, genom att söka efter favicon i en URL för omdirigering efter inloggning och testa serversvaret för att avgöra om användaren får den begärda resursen (vilket betyder att de är inloggad), eller istället omdirigeras till inloggningssidan (vilket innebär att de inte är inloggade på tjänsten).
År 2021 demonstrerades en metod för webbläsarspårning med hjälp av favicons av forskare vid University of Illinois.
