Salah satu elemen yang penting dalam sebuah desain web adalah favicon.
Singkatan dari "ikon favorit" adalah gambar kecil yang Anda lihat dalam
tab browser, alamat bar, dan mungkin tempat-tempat lain tergantung pada
browser dan sistem operasi. Favicons bisa sulit untuk diciptakan baik
secara teknis dan estetis karena format file yang tidak biasa dan ukuran
gambar kecil. Membutuhkan dukungan lintas browser yang bisa rumit
juga.
Gambar tampilan Favicon dalam sebuah browser Smartphone
Gambar tampilan Favicon dalam sebuah browser PC
Membuat Desain Favicon
Langkah pertama untuk menciptakan favicon adalah desain. Sebuah favicon
yang baik harus menangkap esensi dari situs Anda dalam ukuran kecil akan
tetapi mencakup seluruh brand Anda. Favicon juga bisa mewakili tanda
logo untuk sebuah perusahaan (bukan logo penuh dengan teks dan merek
dagang).
Beberapa web yang cukup kita kenal seperti Facebook, Google, Wikipedia,
Wordpress menggunakan tipe favicon berupa teks yang mewakili merek
mereka. Misalnya, Wikipedia menggunakan huruf "W" dan Facebook
menggunakan "F" google dengan "G". Untuk tutorial kali ini Kita akan
memuat Favicon yang dipasang diweb Saya sendiri dengan menggunakan
aplikasi Photoshop.
Pada umunya ukuran favicon dalam sebuah web adalah
- 64 × 64 - Safari dan Windows
- 24 × 24 - Pinned situs di IE9
- 32 × 32 - Tinggi DPI atau "retina", untuk desain web yang biasanya akan menggunakan ukuran ini
- 16 × 16 - Paling sering digunakan ukuran berdasarkan browser seperti IE, Safari, Chrome, dan lainnya
Membuat Favicon di blogspot lebih mudah bila dibandingkan dengan
wordpress, kenapa demikian karena blogspot memiliki fasilitas
menyesuaikan gambar atau mengecilkan gambar secara otomatis sesuai
dengan ukuran desain favicon itu sendiri. Jadi Anda dapat membuat ukuran
menggunakan dimensi 100 x 100 namun demikian ada syarat yaitu ukuran
gambar tidak lebih dari 100 KB.
Masuk ke photoshop pilih file, new buat layer ukuran 64 x 64 Pixels sebanyak 3 buah, Selanjutnya pilih Horizontal type tool
atau yang bergambar T, Selanjutnya ketik huruf K ke salah satu layer,
dengan cara yang sama ketik huruf T ke salah satu layer yang masih
kosong.
Geser atau drag huruf K dan T ke layer yang masih kosong sehingga huruf
K dan T menjadi satu. Setelah itu delet background layer sehingga layer
polos tanpa background. Proses ini untuk menghilangkan efek gambar
putih saat favicon ini muncul dibrowser. Prose pembuatan layer sudah
jadi save gambar dalam bentuk PNG.
Memasukkan Favicon ke Dalam Blogspot
Masuk ke dasboard blogspot Anda, pilih menu layout, Cari menu pada pojok kiri atas yang bertuliskan Favicon lalu klik edit, Klik menu browse pilih file gambar tempat Anda menyimpan gambar favicon yang telah Anda buat sebelumnya. Setelah Anda upload klik save.
Dalam memasukkan gambar favicon ini terkadang memang langsung jadi,
kadang butuh waktu 1 hari, kadang 2 hari kadang lebih. Intinya Anda
harus bersabar pastikan jika gambar sudah terupload jangan dirubah-rubah
tunggu saja hingga gambar tersebut berubah dengan sendirinya.
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Membuat Dan Memasang Favicon ke Blog"
Post a Comment