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, faviconDie worden weergegeven in de browser, de adresbalk. In de meeste situaties, de favicon is een miniatuur grafische logo of initialen respectievelijke websites. Dit favicon wordt toegevoegd om gebruikers te helpen een adres te identificeren sneller web bookmarks.

favicon Stealth Instellingen

Stealth Instellingen favicon in Safari

Favicon in Opera

Favicon in Opera

Tot voor kort was dit bestand van het formulier "favicon.ico"Te identificeren door de webbrowser. 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 Icon voor iOS - iPhone, iPad en iPod Touch

In iOS we kunnen toevoegen Snelkoppelingen naar webpagina's pe Screen huisCPCiPhone, 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 ismaak een pictogramDat op Screen huisCPC 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 standaardformaten van iconen voor de 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 ×

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

Voor de apparaten Android, pictogrammen zijn twee dimensies:

  • Android klassieke × = 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-icoon" maten = "76x76" /> <Link href = "/ apple-touch-icon-120x120.png" rel = "apple-touch-icoon" maten = "120x120" /> <Link href = "/ apple-touch-icon-152x152.png" rel = "apple-touch-icoon" maten = "152x152" /> <Link href = "/ apple-touch-icon-180x180.png" rel = "apple-touch-icoon" maten = "180x180" /> <link href = "/ icon-hires.png" rel = "icon" size = "192x192" /> <link href = "/ icon-normal.png" rel = "icon" sizes = "128x128" />

Voor de apparaten van Apple, en PNG afbeelding naam "rel =" moet het voorvoegsel bevatten "appel-". Voor Android, zal de bestandsnaam worden "icon hires.png"En"icon normal.png"Met de rel =" icoon ".

Er is absoluut noodzakelijk om beelden voor elke resolutie afzonderlijk te creëren. U kunt maken het plaatje voor een hoge resolutie en de apparaten met een lagere resolutie, zal identificeren en zal het pictogram in te stellen.

iPhone Icon Website

het pictogram van de snelkoppeling zal lijken op de website van elke 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 gadgets en IT betekent, schrijf ik met plezier stealthsettings.com van 2006 en ik ontdek graag nieuwe dingen over computers en besturingssystemen macOS, Linux, Windows, iOS en Android.

Laat een bericht achter

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.