Wat is tans die beste manier om 'n favicon te vertoon in alle blaaiers wat gunsteling ikone ondersteun kry?

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

Vra

Wat is tans die beste manier om 'n favicon te vertoon in alle blaaiers wat tans ondersteun? Kry

Let asseblief sluit in:

  1. Watter beeld-formate word ondersteun deur wat blaaiers.

  2. Watter lyne is nodig in watter plekke vir die verskillende blaaiers.

Was dit nuttig?

Oplossing

Ek gaan vir 'n gordel en kruisbande benader hier.

Ek skep 'n 32x32 ikoon in beide die .ico en .png formate genoem favicon.ico en favicon.png. Die naam ikoon maak nie regtig saak nie, tensy jy te doen het met 'n ouer blaaiers.

  1. Plaas favicon.ico by jou site wortel aan die ouer blaaiers (opsioneel en net relevant vir ouer blaaiers ondersteun.
  2. Plaas favicon.png in my beelde sub-gids (net om dinge netjies te hou).
  3. Voeg die volgende HTML binne die <head> element. 
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Let asseblief daarop dat:

  • Die MIME-tipe vir .ico lêers is geregistreer as image / vnd.microsoft.icon deur die IANA .
  • Internet Explorer sal die type kenmerk vir die kortpad ikoon verhouding ignoreer en dit is die enigste leser om hierdie verhouding te ondersteun, dit hoef nie te verskaf.

Reference

Ander wenke

Ek gebruik Ico formaat en sit die volgende twee lyne binne die <head> element: 

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Om ook te ondersteun touch ikone vir tablette en slimfone Ek verkies die benadering van HTML5Boilerplate

Meer inligting oor touch ikone kan gevind word in hierdie artikel .

Met die huidige status van die leser-ondersteuning wat jy hoef nie eens na die HTML tag vir die favicon in jou dokument voeg. Die blaaier sal outomaties soek 'n lys van lêers, sien hierdie voorbeeld vir iOS:

  

As geen ikone word in die HTML, sal IOS Safari soek die   webwerf se wortelgids vir ikone met die appel-touch-ikoon of   appel-touch-ikoon-vooraf saamgestelde voorvoegsel. Byvoorbeeld, as die gepaste   icon grootte vir die toestel is 57 × 57 pixels, iOS soek na lêername   in die volgende volgorde:

     
      
  1. appel-touch-ikoon-57x57-precomposed.png
    2.   
  2. appel-touch-ikoon-57x57.png
    3.   
  3. appel-touch-ikoon-precomposed.png
    4.   
  4. appel-touch-icon.png
    5.   

My advies is om nie 'n favicon in jou dokument, maar het 'n lys van lêers gereed in die wortel webwerf:

  • appel-touch-ikoon-114x114-precomposed.png
  • appel-touch-ikoon-144x144-precomposed.png
  • appel-touch-ikoon-57x57-precomposed.png
  • appel-touch-ikoon-72x72-precomposed.png
  • appel-touch-ikoon-precomposed.png
  • appel-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

As jy laai 'n sjabloon van html5boilerplate.com hierdie is almal ingesluit, jy moet net om dit te vervang met jou eie ikone.

IE6 kan dit nie hanteer PNGs korrek, wees gewaarsku.

Favicon moet 'n ico lêer om behoorlik te werk op alle blaaiers wees .

Moderne blaaier ondersteun ook PNG en GIF-beelde.

Ek het gevind dat in die algemeen die maklikste manier om te skep 'n is 'n vrylik beskikbaar web diens gebruik soos favicon.cc .

Daar is ook 'n plek waar jy kan kyk hoe die favicon van enige bladsy is gemaak

getfavicon.org

Daar kan jy 'n handleiding oor die maak van gunsteling ikone, beeld tipes en besluite te sien, dit is lekker!

Na 'n favicon.* in jou hoofdmap word outomaties bespeur deur die meeste blaaiers. Jy kan verseker dit opgespoor deur gebruik te maak van: 

 <link rel="icon" type="image/png" href="/path/image.png" />

Persoonlik gebruik ek png beelde, maar die meeste formate moet werk.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top