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.
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.
Untuk lebih jelasnya lihat video tutroial Cara membuat favicon dengan photoshop dan cara memasangny ake blog dibawah ini :
2 comments:
Makasih gan infonya
Sama - sama Gan.
Post a Comment