Favicon.ico – Web-sivuston kuvake selaimessa
Ennen kuin verkkosivusto käynnistetään, siihen lisätään grafiikkatiedosto, favicon, joka näkyy selaimen osoitepalkissa. Useimmissa tilanteissa favicon on graafisen logon pikkukuva tai vastaavan verkkosivuston nimikirjaimet. Tämä favicon on lisätty auttamaan käyttäjiä tunnistamaan verkko-osoitteen nopeammin kirjanmerkeistä.
Viime aikoihin asti tämän tiedoston piti olla muotoa “favicon.ico“, jonka selain tunnistaa. Chrome, Internet Explorer, Opera, Safari, Firefox jne.
Useiden vuosien ajan uusien verkkokielten kehityksen myötä HTML9 ja CSS3, favicon voi myös olla yksi fisier .png tai .jpg. Edellytyksenä on, että verkkosivuston otsikossa ennen </pää>, rivin tulee olla läsnä:
<linkki rel=”pikakuvake” href=”/images/favicon.ico” tyyppi=”kuva/x-kuvake” ->
Verkkosivuston kuvake iOS:lle – iPhone, iPad ja iPod Touch
Sisä- iOS voimme lisätä verkkosivujen pikakuvakkeet PE -PE Kotinäyttö-iPhone- iPad ja iPod Touch.
Web-sivuston pikakuvakkeen lisääminen iPhonen, iPadin ja iPodin aloitusnäyttöön
Teemme tämän avaamalla verkkosivun iPhonessa (Safari, Chrome jne. Internet-selain), painamalla neliötä nuolella (merkki “jakaa” iOS), sitten vaihtoehto “Lisää aloitusnäyttöön“.
Jos verkkosivustolla on favicon asetettu selaimelle, mutta sitä ei ole asetettu iOS-laitteiden erityinen kuvake, näytölle tulee kuvake, joka koostuu kuvitella esikatselu web-sivulta.
Web-kuvakkeiden lisääminen iPhonelle, iPadille ja Androidille.
Ensimmäinen askel on hänenluomme kuvan kuvakkeelle, joka tulee näkyviin Kotinäyttöidea. Jotta verkkokuvake olisi yhteensopiva kaikilla laitteilla ja se näkyy selvästi, meidän on luotava kuva kaikille iPhonen ja iPadin resoluutioille.
iPhonen, iPadin, iPodin ja Androidin kuvakkeiden vakioresoluutio ja koot
- Klassiset iPhone-/iPod-mallit = 57×57
- iPad = 76×76
- iPhone / iPod Retina = 120×120
- iPad Retina = 152×152
- iPhone 6/6S Plus = 180×180
Omena päivittää säännöllisesti suositellut kuvakkeiden kootURL -osoitteet sovellukset ja verkkosivut PE -PE tämä sivu.
Android-laitteissa kuvakkeita on kahta kokoa:
- Klassinen Android = 128 × 128
- Android korkealla resoluutiolla (hi-res) = 192×192
Kun olemme tehneet kuvat, ne ladataan verkkopalvelimelle ja verkkosivuston HTML-lähdekoodiin ennen sulkemista </pää>, lisätään seuraavat rivit:
<linkki href=”/apple-touch-icon.png” rel=”omena-touch-kuvake” -> <linkki href=”/apple-touch-icon-76×76.png” rel=”omena-touch-kuvake” koot =”76×76″ -> <linkki href=”/apple-touch-icon-120×120.png” rel=”omena-touch-kuvake” koot =”120×120″ -> <linkki href=”/apple-touch-icon-152×152.png” rel=”omena-touch-kuvake” koot =”152×152″ -> <linkki href=”/apple-touch-icon-180×180.png” rel=”omena-touch-kuvake” koot =”180×180″ -> <linkki href=”/icon-hires.png” rel=”kuvake” koot =”192×192″ -> <linkki href=”/icon-normal.png” rel=”kuvake” koot =”128×128″ ->
Apple-laitteissa kuvan nimi on .PNG ja “rel=” tulee sisältää etuliite “omena-“. Androidille tiedostonimet ovat “icon-hires.png” ja “icon-normal.png” kanssa rel=”kuvake”.
Kuvia ei välttämättä tarvitse luoda jokaiselle resoluutiolle erikseen. Voit tehdä kuvan korkeimmalla resoluutiolla, ja pienemmän resoluution laitteet tunnistavat sen ja asettavat sen kuvakkeeksi.
Sivuston pikakuvakkeen kuvake näyttää samanlaiselta kuin minkä tahansa muun kuvakkeen sovelluksia iOS:lle.
