Cara menambahkan ikon website untuk iPhone, iPad dan iPod Touch

Favicon.ico - Icon Situs Web di Browser

Sebelum meluncurkan sebuah situs web dan menambahkan file grafis, favicon, yang muncul di browser di bilah alamat. Dalam kebanyakan situasi, favicon adalah thumbnail logo grafis atau inisial situs web. Favicon ini ditambahkan untuk membantu pengguna mengidentifikasi alamat web di bookmark lebih cepat.

Stealth Settings favicon

Stealth Settings favicon di Safari

Favicon di Opera

Favicon di Opera

Sampai saat ini, file ini harus dalam bentuk "favicon.ico"Untuk diidentifikasi oleh browser web. Chrome, Internet Explorer, Opera, Safari, Firefox, dll.
Selama beberapa tahun, dengan memajukan bahasa web baru, HTML5 si CSS3, Favicons bisa menjadi png file atau . Jpg. Kondisi ini bahwa header dari situs, sebelum </ head>, Jadilah baris ini:

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

Ikon Situs Web untuk iOS - iPhone, iPad, dan iPod Touch

In iOS kita dapat menambahkan pintas halaman web pe Home ScreenBPK iPhone, iPad si iPod Touch.

Cara menambahkan shortcut situs di iPhone, iPad dan iPod Home Screen

Kami melakukan ini dengan membuka halaman web di iPhone (Safari, Chrome, browser internet dll), klik pada kotak dengan tanda panah (tanda untuk "berbagi" di iOS), lalu "Tambahkan ke Layar".

Jika website telah menetapkan favicon untuk browser Anda, tetapi tidak diatur situs ikon khusus perangkat iOS, Layar akan muncul ikon yang terdiri dari pratinjau gambar Halaman web.

Bagaimana menambahkan ikon web untuk iPhone, iPad dan Android.

Langkah pertama adalah untuk membuat gambar ikonYang muncul di Home Screenkomunitas iDevice BPK. Untuk icon web kompatibel pada semua perangkat dan melihat dengan jelas, kita harus membuat gambar untuk semua resolusi iPhone dan iPad.

Resolusi dan ukuran ikon standar untuk iPhone, iPad, iPod, dan Android

  • model klasik dari iPhone / iPod = 57 57 ×
  • iPad = 76 76 ×
  • iPhone / iPod Retina × = 120 120
  • iPad Retina × = 152 152
  • iPhone 6 / 6S Ditambah = 180 180 ×

Apple diperbarui secara berkala Ukuran icon direkomendasikanURL aplikasi si Halaman Web pe halaman ini.

Untuk perangkat Android, ikon dua dimensi:

  • Android klasik = 128 × 128
  • Android beresolusi tinggi (hi-res) = 192 × 192

ikon

Setelah kami membuat gambar, memanjat pada web server, sumber HTML situs web sebelum tag </ head>, tambahkan baris berikut:

<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" size = "192x192" /> <link href = "/ icon-normal.png" rel = "icon" sizes = "128x128" />

Untuk perangkat Apple, nama gambar .PNG dan "rel =" harus mengandung awalan "apple-". Untuk Android, nama file akan "icon hires.png"Dan"icon normal.png"Dengan rel =" icon ".

Tidak mutlak perlu membuat gambar untuk setiap resolusi secara individual. Anda dapat membuat gambar untuk resolusi tertinggi, dan perangkat dengan resolusi lebih rendah akan mengidentifikasi dan menetapkannya sebagai ikon.

iPhone Icon Situs Web

Ikon pintasan ke situs web akan terlihat mirip dengan salah satu aplikasi untuk iOS.

Cara menambahkan ikon website untuk iPhone, iPad dan iPod Touch

Tentang Penulis

Stealth

Bergairah tentang segala hal yang berarti gadget dan IT, saya menulis dengan senang hati di stealthsettings.com dari 2006 dan saya senang menemukan hal-hal baru dengan Anda tentang komputer dan macOS, sistem operasi Linux, Windows, iOS dan Android.

Tinggalkan Komentar