Membuat Favicons Dengan SVG Pada Website / Blog

Daftar isi [Tampil]


Membuat Favicons Dengan SVG - Apa kalian udah pernah mencoba menggunakan Favicons Menggunakan SVG, kalau biasanya Favicons ini menggunakan gambar yang berbasis PNG ternyata SVG juga bisa digunakan untuk Favicons. Dalam template tentu kalian pernah meliahat kode favicon.ico ini tujuan nya memberikan konfirmasi kepeda browser kalau Favicons tersebut menggunakan gambar PNG.

Untuk menerapkan pada blog untuk menambah Favicons SVG bisa langsung gunakan kode di bawah ini :

<link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="alternate icon" href="/favicon.ico"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01">

Untuk kalian ingin membuat tampilan SVG Favicons menjadi bagus kalian bisa langsung aja ke https://realfavicongenerator.net/

Kenapa Harus SVG

SVG ini sendiri adalah file yang berukuran kecil yang dibandingkan sebuah gambar yang memiliki format PNG. Selain itu banyak sekali keunggulan yang didapat apabila kalian menggunakan SVG sebagai Favicons dalam website kalian. 

Setelah mengetahui alasan kenapa menggunakan SVG sekarang saatnya melihat keunggulan menggunakan SVG pada Favicons, simak ulasan berikut ini. 


Keuntungan Menggunakan SVG Untuk Favicons

Ada beberapa keunggulan yang perlu kalian tau apabila kalian menggunakan SVG pada Favicons ini apa aja itu ini dia keunggulan nya :


1. Perfoma

SVG sendiri merupakan file yang sangat kecil jadi bisa membuat blog atau website kalian menjadi lebih cepat dibanding gambar PNG yang menggunakan file .ico, tentu ini sangat penting karena setiap byte dalam suatu kecepatan pada Website sangatlah penting.


2. Bisa Disematkan CSS

Kalian yang mengerti mengenai CSS bahwa SVG ini tentu bisa kalian sematkan, dengan ini kalian bisa membuat kreasi yang lebih menarik menggunakan SVG Favicons pada website kalian.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> path { fill: #272019; } </style><!-- etc. --> </svg>

Kalian bisa lihat pada kode diatas bahwa SVG tersebut bisa kalian kreatifkan hanya dengan menggunakan kode CSS saja. 


3. Mendukung Mode Gelap

Dengan menggunakan SVG Favicons ini icons yang dipakai bisa berubah warna menjadi terang apabila mode gelap tersebut aktif, banyak sekarang browser yang menggunakan fitur mode gelap dalam aplikasi nya. Kalian bisa lihat dengan kode ini untuk penerapan nya 

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: #000000; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/> </svg>

Ini Favicons akan berubah menjadi putih saat mode gelap aktif. Contoh diatas ini adalah SVG Bintang yang dimana akan terang pada saat browser mode gelap.


Kekurangan SVG Favicons

Kekurangan dari SVG Favicons ini belum ada browser yang support hal ini, apabila pada browser tersebut tidak support favicons.svg maka icon pada blog tersebut akan menjadi blank alias tidak ada.

Itulah ulasannya apa ada yang ditanyakan langsung aja tulis dikolom komentar dibawah ini. 

Sudar