Pictogrammen toevoegen aan een website iPhone, iPad en iPod Touch

Favicon.ico - Websitepictogram in browser

Voordat het startsein gegeven voor een website en voeg een grafisch bestand, favicon, om in de browser te verschijnen, in de adresbalk. In de meeste situaties is de favicon een miniatuur van het grafische logo of de initialen van de betreffende website. Dit favicon is toegevoegd om gebruikers te helpen snel een webadres in bladwijzers te identificeren.

Stealth Settings Favicon
Stealth Settings Favicon erin Safari
Favicon in Opera
Favicon in Opera

Tot voor kort moest dit bestand in vorm zijn. "favicon.ico", te identificeren door de webbrowser. Chrome, Internet Explorer, Opera, Safari, Firefox, enz.
Sinds een aantal jaren, met het bevorderen van nieuwe web talen, HTML5 si CSS3, Favicons kan een .png bestand of .jpg. Voorwaarde is dat de kop van de site, voordat, Be deze lijn:

Websitepictogram voor iOS - iPhone, iPad en iPod Touch

In iOS we kunnen toevoegen Snelkoppelingen naar webpagina's pe Home ScreenCPC iPhone, iPad si iPod Touch.

Een snelkoppeling naar een website toevoegen op iPhone, iPad en iPod-startscherm

Dit doen we door een webpagina te openen op iPhone (Safari, Chrome, etc internetbrowser), klik op het vierkantje met de pijl (het teken voor "delen" in iOS), dan de optie "Add naar startscherm'.

Als de website favicon heeft ingesteld voor uw browser, maar niet ingesteld iOS-apparaat specifiek pictogram plaatsen, Op het scherm verschijnt een pictogram dat bestaat uit een voorvertoning webpagina.

Webpictogrammen toevoegen voor iPhone, iPad en Android.

De eerste stap is maak een pictogramDat op Home ScreenCPC iDevice gemeenschap. Voor web-pictogram is compatibel op alle apparaten en om duidelijk te zien, moeten we beeld te creëren voor alle resoluties van iPhone en iPad.

Resoluties en standaardpictogramformaten voor iPhone, iPad, iPod en Android

  • Modeklassieke lelie van iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod-netvlies = 120 × 120
  • iPad Retina = 152 × 152
  • iPhone 6 / 6S Plus = 180 × 180

Apple regelmatig geactualiseerd Aanbevolen grootte van het pictogramURL's toepassingen si webpagina's pe deze pagina.

Voor de apparaten Android, pictogrammen zijn twee dimensies:

  • Android-klassieker = 128 × 128
  • Android met hoge resolutie (hi-res) = 192 × 192
pictogrammen

Nadat we de afbeeldingen hebben gemaakt, worden deze geüpload op de webserver en in de HTML-bron van de website voordat ze worden gesloten worden de volgende regels toegevoegd:

<link href=”/apple-touch-icon.png ”rel =”apple-touch-icoon ”/> <link href=”/apple-touch-icon-76 × 76.png "rel ="apple-touch-icon ”maten =” 76 × 76 ″ /> <link href=”/apple-touch-icon-120 × 120.png "rel ="apple-touch-icon ”maten =” 120 × 120 ″ /> <link href=”/apple-touch-icon-152 × 152.png "rel ="apple-touch-icon ”maten =” 152 × 152 ″ /> <link href=”/apple-touch-icon-180 × 180.png "rel ="apple-touch-icon ”maten =” 180 × 180 ″ />

Voor apparaten Apple, .PNG-afbeeldingsnaam en "rel =" moeten het voorvoegsel "bevatten"apple- ". Voor Android zijn de bestandsnamen "icon hires.png"En"icon normal.png”Met rel =” icoon ”.

Het is niet absoluut noodzakelijk om voor elke resolutie afbeeldingen te maken. U kunt een afbeelding maken voor de hoogste resolutie, en de apparaten met een lagere resolutie zullen deze identificeren en als pictogram instellen.

iPhone-Website-pictogram

Het snelkoppelingspictogram naar de website ziet er als een ander uit applicaties voor iOS.

Gepassioneerd door technologie, schrijf ik met plezier op StealthSettings.com sinds 2006. Ik heb ruime ervaring met besturingssystemen: macOS, Windows en Linux, evenals met programmeertalen en blogplatformen (WordPress) en voor online winkels (WooCommerce, Magento, PrestaShop).

Hoe werkt het? » iHowTo » iHowTo - iOS » Pictogrammen toevoegen aan een website iPhone, iPad en iPod Touch
Laat een bericht achter