Favicon

Favicon (forkortelse for engelsk  FAVorite ICON - "ikon for favoritter") - ikon for et websted eller en webside . Vises af browseren i en fane før sidenavnet, og som et billede ved siden af ​​fanen [1] [2] , samt i adresselinjen i nogle browsere.

Historie

I marts 1999 udgav Microsoft Internet Explorer 5 , som var den første til at understøtte ikoner til webstedet [3] . Oprindeligt var dette ikon en fil navngivet favicon.icomed et 16x16 pixel billede i ICO -format , placeret i rodmappen på webstedet. Ikonet bruges af Internet Explorer i listen over favoritter og ved siden af ​​URL'en i adresselinjen, hvis siden er bogmærket [4] [5] [6] [3] . En bivirkning var, at antallet af besøgende, der bogmærkede en side, kunne estimeres ud fra antallet af gange, ikonfilen blev tilgået. Denne teknik er blevet forældet, da alle moderne browsere understøtter ikonet uden faner [5] .

Meget senere dukkede op i 32x32-format, men ældre browsere reducerer det stadig til 16x16 [7] .

Browser support

Følgende tabel illustrerer de store webbrowsere, der understøtter forskellige funktioner. Tallene angiver den oprindelige version af browseren, som den angivne funktion understøttes med.

Understøttede webstedsikonformater

Denne tabel viser det formatunderstøttelse , som webstedets favicon kan laves i.

Browser ICO PNG gif Animeret GIF JPEG APNG SVG
Google Chrome Ja 4.0 4.0 Ikke 4.0 Ikke Ikke
Internet Explorer 5,0 [8] 11,0 [9] 11,0 [10] Nej [8] Ja [9] Nej [8] Nej [8]
Firefox 1,0 [11] 1,0 [11] 1,0 [11] Ja Ja 3.0 Ja [9]
Opera 7,0 [12] 7,0 [12] 7,0 [12] 7,0 [12] 7,0 [12] 9.5 Nej [9]
safari Ja 4.0 4.0 Ikke 4.0 Ikke Ikke

Brug

Korrespondancetabel, hvilken browser bruger favicon hvor. Opera-browseren giver dig også mulighed for at ændre favicon for Quick Access Toolbar siden Opera 10 [13] .

Browser Adresse bar Tip i adresselinjen Bogmærkelinje Bogmærker Faner skrivebordsikon
kant Ikke Ja Ja Ja Ja Ja
Firefox 1.0–12.0: Ja [14]
> v13: Nej [15]
Ja Ja Ja [14] Ja [14] Ja [14]
Google Chrome Nej [14] Ikke Ja [14] Ja [14] 1,0 [14] Nej [14]
Internet Explorer 7,0 [14] Ikke 5,0 [14] 5,0 [14] 7,0 [14] 5,0 [14]
Opera 7.0–12.17: Ja
> v14: Nej [14]
Ikke 7,0 [14] 7,0 [14] 7,0 [14] 7,0 [14]
safari Ja [14] Ja Nej [14] Ja [14] 1.0–8.0: Ja
9.0–11.0: Nej
> 12.0: Valgfrit [16]
Nej [14]


Moderne funktioner

Mange moderne browsere kræver ikke en eksplicit henvisning til favicon.icoi sidekoden. I mangel af en sådan indikation forsøger browseren at indlæse favicon.icofra roden af ​​webstedet. Det er dog muligt eksplicit at angive ikonets position i ( X ) HTML -kode (inde i elementet <head>), hvilket gør det muligt, hvis det ikke er til stede /favicon.ico, at bruge et andet ikon for hver side.

For eksplicit at angive placeringen favicon.icoskal du indtaste følgende linje i sidekoden på dit websted inde i hovedsektionen :

< link rel = "icon" type = "image/vnd.microsoft.icon" href = "/favicon.ico" />

hvor

  • relkan også indeholde "genvejsikon" (i dette tilfælde vil Microsoft Internet Explorer reagere på strengen "genvejsikon" og browsere, der overholder standarderne - til ordet "ikon")
  • hrefindeholder en absolut eller relativ URI til filen (i Mozilla Firefox 3.0, for eksempel, understøttes de samme URI'er som med tagget img).
  • Filformatet kan være pngeller gif, 16x16 eller 32x32 i størrelse og med 8-bit eller 24-bit farvedybde (i Mozilla Firefox, for eksempel, kan det ikke kun være dette, men også som tagget img).

I dette tilfælde skal attributten typeindeholde MIME-typen for formatet (f.eks. image/pngfor PNG ).

I 2003 blev ICO -formatet registreret af Simon Butcher hos Internet Assigned Numbers Authority ( IANA ). For dette format er standard MIME -typen image/vnd.microsoft.icon.

Hvis ICO -formatet bruges til Internet Explorer , skal dens MIME-type være image/vnd.microsoft.icon. Typen image/x-iconblev forældet i 2003 efter typestandardisering for ICO. Den korrekte type image/vnd.microsoft.iconunderstøttes af alle browsere . Det er vigtigt at huske, at ikonet ikke vil blive vist i browseren, hvis dets indholdstype, der returneres af webserveren, ikke matcher den, der er angivet i sidens html-kode.

Du kan angive flere billeder i forskellige formater - for eksempel en streng med rel="shortcut icon"og ikon i ICO-format til Internet Explorer, og en streng med rel="icon"og ikon i GIF- eller PNG-format til andre browsere.

Mobilsideikon

Apple -enheder, der starter med iOS 1.1.3 og nogle Android-enheder [17] understøtter specielle store ikoner, der kan bruges som webapplikationsikoner [18] [19] . Webstedet kan give et sådant ikon ved at angive <head> <link rel="apple-touch-icon" ...>[20] i titlen . Den anbefalede ikonstørrelse er 60×60 pixels til iPhone og 120×120 pixels til iPhone med Retina -skærm [19] [21] [22] . For iPad er den anbefalede ikonstørrelse 76×76 pixels, og for iPad med Retina-skærm (startende fra tredje generation af iPad) - 152×152 pixels [23] . For Android-tablets med Chrome-browser er det foretrukne ikon PNG-format og størrelse 192x192 [24] .

Billedet, omtalt som apple-touch-icon, overlejres med en skygge, refleksion, og også billedet får afrundede kanter [19] . apple-touch-icon-precomposedDer anvendes ingen effekter på billedet [19] [20] .

Med afrundede kanter tilføjet af iOS

<link rel="apple-touch-icon" href="somepath/image.png" />

ingen refleksioner

<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

Webstedets rodmappe er standardplaceringen for søgning efter ikoner apple-touch-icon-precomposed.pngog apple-touch-icon.png. [19] [20]

Noter

  1. Lane, Dave Opretter et favicon med flere opløsninger inklusive gennemsigtighed med GIMP . Egressive.com (9. august 2008). Hentet 25. februar 2011. Arkiveret fra originalen 25. december 2010.
  2. Hvad er der med Googles nye miniikon? , BBC (20. januar 2009). Arkiveret fra originalen den 30. december 2017. Hentet 26. oktober 2021.  "Den kvadratiske 16x16 pixel er størrelsen på det pågældende favicon, hvis ikke omfanget."
  3. 1 2 Sådan tilføjes et genvejsikon til en webside (link ikke tilgængeligt) . Microsoft Developer Network . Microsoft. Hentet 15. marts 2010. Arkiveret fra originalen 8. februar 2012. 
  4. McGrew, Darin Web Authoring FAQ - 8.11. Hvordan kan jeg få et brugerdefineret ikon, når folk bogmærker mit websted? (utilgængeligt link) . Webdesigngruppe (26. april 2007). Hentet 23. februar 2011. Arkiveret fra originalen 8. februar 2012. 
  5. 1 2 Heng, Christopher Hvad er Favicon.ico? Tilpas dit websteds bogmærker (downlink) . thesitewizard.com (7. september 2008). Hentet 23. februar 2011. Arkiveret fra originalen 8. februar 2012. 
  6. Oprettelse af favicons med Adobe Photoshop og GoLive (downlink) . Adobe GoLive . Hentet 25. februar 2011. Arkiveret fra originalen 7. december 2003. 
  7. Hvad er et favicon, og hvorfor er det så vigtigt for branding? . Hentet 8. december 2018. Arkiveret fra originalen 9. december 2018.
  8. 1 2 3 4 Davis, Jeff hvorfor vises faviconet for mit websted ikke i IE7? (utilgængeligt link) . jeff's WebLog hos Microsoft Developer Network . Microsoft (1. marts 2007). Hentet 27. februar 2011. Arkiveret fra originalen 8. februar 2012. 
  9. 1 2 3 4 Hvad er Favicon, og hvordan man installerer det (downlink) . Sielu (18. marts 2019). Hentet 18. marts 2019. Arkiveret fra originalen 29. september 2020. 
  10. Sjov med favoritter . Microsoft (7. september 2013). Hentet 3. november 2013. Arkiveret fra originalen 26. januar 2016.
  11. 1 2 3 David. Mozilla 0.9.6 Release Notes (utilgængeligt link) . Mozilla (19. juli 2003). Hentet 23. februar 2011. Arkiveret fra originalen 8. februar 2012. 
  12. 1 2 3 4 5 Opera 7 til Windows Changelog (downlink) . Opera-software (28. januar 2003). Hentet 28. februar 2011. Arkiveret fra originalen 8. februar 2012. 
  13. Opera 10.0 beta 2 til Windows ændringslog . Opera-software (16. juli 2009). Hentet 27. februar 2011. Arkiveret fra originalen 27. juli 2017.
  14. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Francis, Lewis Diagram over moderne browserunderstøttelse til favicon . informationgift.com (11. december 2007). Hentet 23. februar 2011. Arkiveret fra originalen 10. oktober 2019.
  15. Firefox anser favoritter for risikable, forviser dem fra adresselinjen . Engadget. Hentet 10. september 2012. Arkiveret fra originalen 19. september 2018.
  16. Sådan aktiverer du favicons i Safari, så du kan identificere websteder i faner grafisk . iDownloadBlog (14. juni 2018). Hentet 14. oktober 2020. Arkiveret fra originalen 23. oktober 2020.
  17. Mathias Bynens. Alt, hvad du altid har ønsket at vide om berøringsikoner (2. marts 2011). Hentet 15. november 2011. Arkiveret fra originalen 2. december 2019.
  18. Retningslinjer for iPhone Human Interface til webapplikationer: Metrics, Layout Guidelines og Tips . Apple Inc. Hentet 27. maj 2010. Arkiveret fra originalen 18. august 2010.
  19. 1 2 3 4 5 Safari Web Content Guide: Angivelse af et websideikon for webklip . Apple Inc. (15. november 2010). Hentet 25. februar 2011. Arkiveret fra originalen 10. september 2016.
  20. 1 2 3 McLellan, Drew Sådan indstilles et Apple Touch-ikon til ethvert websted . Allinthehead.com (17. januar 2008). Hentet 11. marts 2011. Arkiveret fra originalen 4. april 2019.
  21. Retningslinjer for iOS Human Interface: Retningslinjer for oprettelse af brugerdefinerede ikoner og billeder, Tabel 8-1 . Apple Inc. Hentet 16. juli 2011. Arkiveret fra originalen 10. september 2016.
  22. Apple-touch-ikon . Apple Inc. Hentet 25. februar 2011. Arkiveret fra originalen 20. november 2018.
  23. iPad Apple Touch-ikon . Hentet 12. februar 2012. Arkiveret fra originalen 8. september 2010.
  24. Android Chrome og dens favicon . Hentet 9. september 2014. Arkiveret fra originalen 16. november 2018.