Kaip pridėti prie ikoniškos „iPhone“, „iPad“ ir „iPod Touch“ svetainės

Favicon.ico – Svetainės piktograma naršyklėje

Prieš paleidžiant svetainę, pridedamas grafinis failas, favicon, kuris bus rodomas naršyklėje, adreso juostoje. Daugeliu atvejų favicon yra grafinio logotipo miniatiūra arba atitinkamos svetainės inicialai. Ši piktograma pridėta siekiant padėti vartotojams greičiau atpažinti žiniatinklio adresą žymėse.

Stealth Settings Favicon
Stealth Settings Favicon Safari
Favicon operoje
Favicon operoje

Dar visai neseniai šis failas turėjo būti tokios formos “favicon.ico“, kurį turi atpažinti žiniatinklio naršyklė. Chrome, Internet Explorer, Opera, Safari, Firefox ir kt.
Jau keletą metų, tobulėjant naujoms žiniatinklio kalboms, Html9 ir CSS3, favicon taip pat gali būti vienas fisier .png arba .jpg. Sąlyga yra ta, kad svetainės antraštėje prieš </galva>, turi būti eilutė:

<nuoroda rel=”nuorodos piktogramą” href=”/images/favicon.ico” tipas =”vaizdas / x piktograma” />

Svetainės piktograma, skirta iOS – iPhone, iPad ir iPod Touch

Į „iOS“ galime pridėti tinklalapio nuorodos PE Pagrindinis ekranas-UliPhoneAr iPad ir iPod Touch.

Kaip pridėti svetainės nuorodą „iPhone“, „iPad“ ir „iPod“ pagrindiniame ekrane

Tai darome atidarę tinklalapį iPhone (Safari, Chrome ir kt. interneto naršyklėje), paspaudę kvadratą su rodykle (ženklas “dalintis” iOS), tada parinktį “Pridėti prie pagrindinio ekrano“.

Jei svetainėje naršyklei nustatytas favicon, bet jis nenustatytas konkrečią „iOS“ įrenginių piktogramą, ekrane pasirodys piktograma, kurią sudaro įsivaizduokite peržiūrą tinklalapio.

Kaip pridėti žiniatinklio piktogramas „iPhone“, „iPad“ ir „Android“.

Pirmasis žingsnis yra josukuriame piktogramos vaizdą, kuris bus rodomas Pagrindinis ekranasidėja. Kad žiniatinklio piktograma būtų suderinama visuose įrenginiuose ir būtų aiškiai matoma, turime sukurti vaizdą visoms iPhone ir iPad rezoliucijoms.

Standartinės raiškos ir dydžių piktogramos, skirtos iPhone, iPad, iPod ir Android

  • Klasikiniai iPhone / iPod modeliai = 57×57
  • iPad = 76×76
  • iPhone / iPod Retina = 120×120
  • iPad Retina = 152×152
  • „iPhone 6/6S Plus“ = 180×180

Obuolys reguliariai atnaujinti rekomenduojami piktogramų dydžiaiURL paraiškos ir tinklalapiai PE šį puslapį.

„Android“ įrenginiuose piktogramos yra dviejų dydžių:

  • Klasikinis „Android“ = 128 × 128
  • „Android“ su didele raiška (didelė raiška) = 192 × 192
piktogramos

Kai padarome vaizdus, ​​jie įkeliami į žiniatinklio serverį ir svetainės HTML šaltinį prieš uždarant </galva>, pridedamos šios eilutės:

<nuoroda href=”/apple-touch-icon.png” rel=”„Apple-touch“ piktograma” /> <nuoroda href=”/apple-touch-icon-76×76.png” rel=”„Apple-touch“ piktograma” dydžiai =”76×76″ /> <nuoroda href=”/apple-touch-icon-120×120.png” rel=”„Apple-touch“ piktograma” dydžiai =”120×120″ /> <nuoroda href=”/apple-touch-icon-152×152.png” rel=”„Apple-touch“ piktograma” dydžiai =”152×152″ /> <nuoroda href=”/apple-touch-icon-180×180.png” rel=”„Apple-touch“ piktograma” dydžiai =”180×180″ /> <nuoroda href=”/icon-hires.png” rel=”piktogramą” dydžiai =”192×192″ /> <nuoroda href=”/icon-normal.png” rel=”piktogramą” dydžiai =”128×128″ />

„Apple“ įrenginiuose vaizdo pavadinimas yra .PNG ir “rel=” turi būti priešdėlis “obuolys-“. „Android“ failų pavadinimai bus “icon-hires.png” ir “icon-normal.png” su rel=”piktogramą”.

Nebūtina kurti vaizdus kiekvienai raiškai atskirai. Galite sukurti didžiausios skiriamosios gebos vaizdą, o mažesnės raiškos įrenginiai jį atpažins ir nustatys kaip piktogramą.

iPhone-svetainės piktograma

Svetainės nuorodos piktograma atrodys panašiai kaip ir bet kurios kitos piktogramos programos, skirtos iOS.

Aistringai apie technologijas, su malonumu rašau „Stealthsetts.com“, pradedant nuo 2006 m. Turiu didelę patirtį operacinėse sistemose: „MacOS“, „Windows“ ir „Linux“, taip pat programavimo kalbose ir tinklaraščių platformose („WordPress“) ir internetinėse parduotuvėse („WooCommerce“, „Magento“, „Presashop“).

Home Jūsų jo vadovėlių šaltinis, naudingi patarimai ir naujienos. Kaip pridėti prie ikoniškos „iPhone“, „iPad“ ir „iPod Touch“ svetainės
Palikite komentarą