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, faviconYang muncul dalam browser, address bar. Dalam kebanyakan situasi, favicon adalah logo grafis miniatur atau inisial masing-masing situs. favicon ini ditambahkan untuk membantu pengguna mengidentifikasi alamat lebih cepat bookmark web.

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" />

Website Icon untuk iOS - iPhone, iPad dan iPod Touch

In iOS kita dapat menambahkan pintas halaman web pe Home ScreenBPKiPhone, 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 untukmembuat 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 standar ikon 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 ×

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

Untuk perangkat Android, ikon dua dimensi:

  • Android × klasik = 128 128
  • resolusi tinggi android (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, dan PNG nama image "rel =" harus berisi awalan "apple-". Untuk Android, nama file akan "icon hires.png"Dan"icon normal.png"Dengan rel =" icon ".

Ada benar-benar diperlukan untuk membuat gambar untuk setiap resolusi secara terpisah. Anda dapat membuat gambar untuk resolusi tinggi dan perangkat dengan resolusi lebih rendah, akan mengidentifikasi dan akan mengatur ikon.

iPhone Icon Situs Web

ikon shortcut akan terlihat seperti situs apapun aplikasi untuk iOS.

Cara menambahkan ikon website untuk iPhone, iPad dan iPod Touch

Tentang Penulis

Stealth

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

Tinggalkan Komentar

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.