0Pricing
HTML Academy · Pelajaran

Favicon dan Ikon Apple Touch

Tambahkan ikon yang muncul di tab peramban dan layar utama.

Favicon dan Ikon Apple Touch adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Ikon Situs?

Ikon situs adalah ikon kecil yang muncul di:

  • Tab peramban
  • Daftar penanda halaman
  • Riwayat peramban
  • Hasil pencarian (terkadang)

Ikon ini membantu pengguna mengenali situs Anda sekilas di antara banyak tab yang terbuka.

Tautan Dasar Ikon Situs

Tambahkan ikon situs dengan elemen tautan di head:

<head>
  <!-- SVG favicon (modern, scales at any size) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Legacy ICO for Internet Explorer -->
  <link rel="shortcut icon" href="/favicon.ico">
</head>

Format Ikon Situs

Strategi format ikon situs yang disarankan:

  • SVG — vektor, dapat diskalakan dengan sempurna, ukuran berkas kecil (gunakan terlebih dahulu)
  • PNG 32x32 — cadangan untuk peramban yang tidak mendukung SVG
  • ICO — format lama yang berisi ukuran 16x16 dan 32x32

Penempatan Berkas ICO

Berkas favicon.ico di root domain akan diambil secara otomatis:

<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico  -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Atribut sizes

Atribut sizes menentukan dimensi ikon:

<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">

Ikon Sentuh Apple

Ikon Sentuh Apple muncul saat pengguna menambahkan situs Anda ke layar utama iOS:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->

Ikon Bertopeng untuk Android

PWA Android menggunakan ikon bertopeng yang memenuhi bentuk ikon:

<link rel="manifest" href="/manifest.json">

<!-- In manifest.json: -->
<!--
{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
-->

Ikon Situs Mode Gelap

Sediakan ikon situs SVG yang mendukung mode gelap:

<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: white; }
      .icon-mark { fill: black; }
    }
    .icon-bg { fill: #0070f3; }
    .icon-mark { fill: white; }
  </style>
  <circle class="icon-bg" cx="16" cy="16" r="16"/>
  <text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->

Manifes Aplikasi Web untuk Ikon PWA

Penyiapan ikon lengkap untuk Progressive Web Apps:

<link rel="manifest" href="/manifest.json">

<!-- manifest.json icons array: -->
<!--
"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->

Penyiapan Ikon Situs Lengkap

Konfigurasi ikon situs modern yang lengkap:

<head>
  <!-- SVG: scales to any size, supports dark mode -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
  <!-- Apple home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- PWA manifest (for Android home screen) -->
  <link rel="manifest" href="/manifest.json">
</head>

Pengujian Ikon Situs

Cara memverifikasi penyiapan ikon situs:

  • Lakukan muat ulang paksa (Ctrl+Shift+R / Cmd+Shift+R) untuk menghapus ikon situs yang tersimpan di tembolok
  • Gunakan alat Favicon Checker (realfavicongenerator.net)
  • Uji pada perangkat iOS nyata untuk Ikon Sentuh Apple
  • Periksa manifes PWA dengan Lighthouse → audit PWA

Pemeriksaan Singkat

Berapakah ukuran yang disarankan untuk gambar Ikon Sentuh Apple?

Rekap: Ikon Situs

Hal-hal penting tentang ikon situs:

  • Ikon situs SVG — modern, dapat diskalakan, mendukung mode gelap
  • PNG 32x32 — cadangan untuk peramban tanpa dukungan SVG
  • ICO di root — cadangan lama untuk IE
  • apple-touch-icon 180×180 — layar utama iOS
  • Manifes aplikasi web — ikon PWA Android (192px dan 512px)

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Favicon dan Ikon Apple Touch” gratis?

Ya — teks lengkap “Favicon dan Ikon Apple Touch” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Favicon dan Ikon Apple Touch”?

Tambahkan ikon yang muncul di tab peramban dan layar utama. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Favicon dan Ikon Apple Touch” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. title dan Perannya dalam SEO
  2. meta charset viewport author dan description
  3. URL Kanonis dan meta robots
  4. Favicon dan Ikon Apple Touch
← Kembali ke HTML Academy