Hoe maak je een website iconen voor iPhone, iPad en iPod Touch toe te voegen

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.

heimelijkheid Settings Favicon

heimelijkheid Settings Favicon in Safari

Favicon in Opera

Favicon in Opera

Tot voor kort moest dit bestand in vorm zijn. "favicon.ico", Te herkennen aan 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:

Website-pictogram voor iOS - iPhone, iPad en iPod Touch

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

Hoe maak je een website snelkoppeling toe te voegen op de iPhone, iPad en iPod startscherm

Dit doen we door een webpagina te openen op de iPhone (Safari, Chrome, etc. internetbrowser), te klikken op het vierkantje met de pijl (het teken voor "delen" in iOS), vervolgens de optieZet in beginscherm'.

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.

Hoe kan ik web iconen toe te voegen voor de 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 iPhone en iPad resoluties.

Standaard pictogramresoluties en formaten voor iPhone, iPad, iPod en Android

  • Klassieke iPhone / iPod-modellen = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 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-icon" /> <link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="/icon-hires.png" rel="icon" sizes="192x192" /> <link href="/icon-normal.png" rel="icon" sizes="128x128" />

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 Icon Website

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

Hoe maak je een website iconen voor iPhone, iPad en iPod Touch toe te voegen

Over de auteur

heimelijkheid

Gepassioneerd door alles wat gadget en IT is, schrijf ik met plezier op stealthsettings.com sinds 2006 en ik vind het leuk om met jullie nieuwe dingen te ontdekken over computers en besturingssystemen macOS, Linux, Windows, iOS en Android.

Laat een bericht achter