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

Favicon.ico - Website Icon in Browser

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

heimelijkheid Settings Favicon

heimelijkheid Settings Favicon in Safari

Favicon in Opera

Favicon in Opera

Tot voor kort was dit bestand van het formulier "favicon.ico“, pentru a fi identificat de web browser. Chrome, Internet Explorer, Opera, Safari, Firefox, etc.
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 </ head>, Be deze lijn:

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

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

We doen dit door het openen van een website op uw iPhone (Safari, Chrome, Internet-browser enz.), Klikt u op het plein met de pijl (het teken voor "share" in iOS), dan is de optie 'Zet 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.

Resoluties en standaard pictogramformaten voor iPhone, iPad, iPod en Android

  • Klassieke modellen van de iPhone / iPod = 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:

  • Klassiek Android = 128 × 128
  • Android hoge resolutie (hi-res) = 192 × 192

pictogrammen

Nadat we de beelden gemaakt, klimmen op de webserver, de HTML-bron van de website vóór de afsluitende </ head>, voeg de volgende regels:

<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, de naam van de .PNG-afbeelding en "rel =" moeten het voorvoegsel "apple-" bevatten. Voor Android is de bestandsnaam 'icon hires.png"En"icon normal.png"Met de rel =" icoon ".

Het is niet absoluut noodzakelijk om afbeeldingen voor elke resolutie afzonderlijk te maken. U kunt een foto maken voor de hoogste resolutie en apparaten met een lagere resolutie identificeren het en stellen het in als een pictogram.

iPhone Icon Website

Het snelkoppelingspictogram voor de website lijkt op een ander 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 betekent, schrijf ik graag op stealthsettings.com van 2006 en ontdek ik graag nieuwe dingen over computers en macOS, Linux-besturingssystemen, Windows, iOS en Android.

Laat een bericht achter