Menambahkan Favicon di NuxtJS

March 17, 2021 2 min read
Menambahkan favicon di situs web sebagai identitas situs & branding.

Favicon berfungsi sebagai identitas situs, atau branding, untuk website kita. Favicon yang menarik dan mudah diingat, akan memperkuat branding website.

Saat melihat favicon, secara refleks kita akan teringat website apa yang sedang kita buka, meskipun belum melihat konten web, atau judul halamannya.

Sebagai salah satu komponen branding yang penting, favicon menjadi identitas website dan mempermudah pengunjung mengingat atau mencari situs web kita di mesin pencari maupun history browser.

Tipe Favicon

Favicon bisa dalam format gambar apa pun, tetapi disarankan file dalam format ".ico" atau ".png". Untuk ukuran favicon, file yang direkomendasikan adalah 16 x 16 atau 32 x 32. Semakin besar dimensinya akan semakin tajam.

Memasang Favicon di NuxtJS

Jika kamu sudah pernah membaca Menambahkan Meta Tag SEO di NuxtJS, seharusnya kamu sudah berhasil menambahkan favicon ke situs web.

Caranya sama, dengan menambahkan tag link rel di bagian head di nuxt.config.js.

export default {
  head: {
    ...
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
    ...
  }
}

Atau jika file memiliki format png maka gunakan type image/png.

export default {
  head: {
    ...
    link: [{ rel: 'icon', type: 'image/png', href: 'favicon.png' }]
    ...
  }
}

Setelah selesai, jalankan yarn dev atau npm run dev dan lihat hasilnya di browser.


Terima kasih sudah membaca artikel "Menambahkan Favicon di NuxtJS"
Bagikan
Silahkan Login untuk berkomentar.