Cara Membuat Favicon Untuk Blog Dengan Adobe Photoshop
Membuat blog yang bagus tidak serta merta hanya fokus pada konten berkualitas saja. Selain tampilannya harus elegan dengan optimasi SEO yang terus ditingkatkan, kita juga harus mengisi detail kecil untuk membuat blog menjadi lebih sempurna.
Nah, pada kesempatan kali ini saya akan berbagi sebuah tutorial blogger untuk pemula, tentang bagaimana cara membuat favicon untuk blog atau website dengan menggunakan software Adobe Photoshop.
Namun sebelum itu, mari kita bahas dulu tentang favicon ini secara lebih lengkap.
Apa Itu Favicon?
Favicon merupakan singkatan dari "favorit icon". Nah, yang dimaksud dengan "favorit icon" pada suatu blog atau website adalah logo. Itu mengapa banyak blog dan website yang menjadikan logonya sebagai favicon.
Lihat screenshoot gambar favicon di bawah ini!
Saya membuat tanda panah yang mengarah pada tab Youtube di browser google chrome. Bisa Anda lihat disana ada logo masing-masing website pada tab browsernya.
Perhatikan tab pertama (paling kiri). Disana terdapat favicon blogger yang sama persis dengan logo blogger itu sendiri. Pada tab kedua terdapat favicon Google Analytics, pada tab ketiga terdapat favicon Youtube, lalu pada tab keempat dan kelima terdapat favicon Moz dan Google AdSense.
Jika melihat favicon yang dibuat website-website besar tersebut, maka bisa dipastikan bahwa favicon yang digunakan adalah logo. Oleh karena itu buatlah logo sebaik mungkin karena itu akan menjadi identitas blog atau website.
Favicon tidak hanya tampil pada tab browser saja, favicon juga akan ikut tampil pada halaman google.
Lihat screenshoot di bawah ini!
Logo blog dan website yang ditandai lingkaran merah adalah favicon. Namun apakah logo itu muncul dan diambil dari dalam blog atau websitenya saya kurang tau pasti.
Tapi dari pengalaman pribadi, logo blog ini berwarna putih. sedangkan saat itu saya menggunakan favicon berwarna hijau, dan logo tersebut tampil pada halaman google seperti gambar di atas.
Oleh karena itu saya asumsikan bahwa logo yang tampil pada halaman google adalah logo yang dibuat menjadi favicon.
Selain itu, tampilan favicon pada hasil pencarian mobile juga perlu diperhatikan. Karena jika kita salah membuat format atau ukuran yang tepat, maka hasilnya akan kurang maksimal.
Perhatikan screenshoot favicon pada hasil pencarian mobile di bawah ini!
Baca: Cara Kustom Permalink Blogger
Favicon blog ini muncul pada sisi bagian paling kiri dihasil pencarian mobile pada google. Saat itu favicon blog ini memang belum saya optimasi lagi, sehingga hasilnya kurang memuaskan karena sedikit blur.
Sebagai pembanding, silahkan lihat hasil pencarian profile kompasiana saya di bawah ini.
Favicon kompasiana terlihat jauh lebih baik jika dibandingkan dengan blog ini. Itulah mengapa saya terus mencoba membuat favicon yang sebaik mungkin agar tampilannya tetap teroptimasi dengan baik pada saat tampil dalam versi desktop maupun versi mobile.
Lalu bagaimana cara membuat favicon?
Berikut ini saya akan menjelaskan selengkap mungkin cara membuat favicon untuk blog dan website dengan menggunakan software Adobe Photoshop.
Cara Membuat Favicon di Adobe Photoshop
Berikut ini adalah langkah-langkah membuat favicon di Adobe Photoshop lengkap dengan gambar.
1. Siapkan Software Adobe Photoshop
Hal pertama yang harus disiapkan untuk membuat favicon adalah software Adobe Photoshop. Jika Anda belum punya softwarenya silahkan download terlebih dahulu di internet, banyak kok yang menyediakan software tersebut secara gratis.
Apabila Anda sudah memiliki software Adobe Photoshop, maka Anda tinggal masuk ke langkah selanjutnya.
2. Siapkan Logo
Saya asumsikan Anda sudah memiliki logo untuk blog atau website Anda. Maka selanjutnya silahkan buka logo tersebut di software Adobe Photoshop.
Caranya, pilih File, lalu pilih Open, lalu pilih logo yang sudah dibuat dalam format JPEG atau PNG.
Berikut ini saya asumsikan logo blog Anda seperti gambar di bawah ini.
3. Buat Project Baru
Setelah Anda membuka logo yang sudah disiapkan pada software Adobe Photoshop. Selanjutnya silahkan buat project baru dengan ukuran 16x16 pixel.
Caranya pilih File, lalu pilih New. Setelah itu silahkan setting seperti gambar di bawah ini, lalu klik OK.
Setelah itu akan tampil sebuah lembar kosong yang ukurannya sangat kecil seperti pada contoh gambar di bawah ini.
Selanjutnya, drag logo yang sudah disiapkan seperti pada poin nomor dua ke project favicon. Setelah itu sesuaikan ukuran logonya dengan cara memperkecilnya dengan move tool yang ditekan bersamaan dengan shortcut Shift + Alt.
Apabila sudah selesai, maka kurang lebih hasilnya akan seperti pada gambar di bawah ini.
4. Save Dengan Format PNG
Setelah selesai menyesuaikan logo yang akan dijadikan favicon, selanjutnya Anda tinggal simpan filenya dengan format PNG.
Sebenarnya Anda juga bisa menggunakan format JPEG. Hanya saja saya lebih merekomendasikan format PNG karena lebih bagus untuk gambar jenis vektor dan size file yang dihasilkan format ini tidak terlalu besar.
Baca: Format Gambar Paling Bagus Untuk Postingan Blog
Setelah Anda selesai menyimpan file favicon dengan format PNG. Selanjutnya Anda perlu mengubah format file tersebut menjadi .ico.
Cara Ubah Logo Menjadi Favicon
Pertama, silahkan pergi ke website di bawah ini!
https://www.favicon-generator.org/Setelah terbuka, maka Anda akan melihat halaman seperti di bawah ini.
Pilih Choose File, lalu pilih file favicon yang telah dibuat di Adobe Photoshop, lalu klik open, dan klik Create Favicon.
Selanjutnya Anda akan dibawa ke halaman download seperti di bawah ini. Anda tinggal klik download lalu tunggu proses download selesai.
Perhatikan:
Biasanya file hasil download tersebut berbentuk rar. Oleh karena itu sebaiknya Anda menginstal software rar terlebih dahulu.
Jika Anda sudah menginstal software Winrar maka Anda tinggal klik kanan lalu pilih Extract here. Maka semua file favicon akan terpisah dari file rar nya.
Lihat gambar di bawah ini!
Selanjutnya, Anda tinggal memasangkan favicon yang sudah tersedia kedalam blogger. Silahkan ikuti tutorialnya di bawah ini.
Cara Memasang Favicon di Blogger
Berikut ini adalah langkah-langkah yang harus dilakukan untuk memasang favicon di blog atau website.
- Buka Dashboard Blogger
- Pilih Setelan
- Pilih Favicon
Selanjutnya Anda akan masuk ke halaman Konfigurasi Ikon Favorit.
Klik Choose File, lalu pilih file "favicon.ico" pada file hasil extract, lalu klik Open, lalu klik Simpan.
Proses penggantian favicon bisa memakan waktu satu atau dua hari. Oleh karena itu Anda harus bersabar dan terus melihat apakah ada perubahan favicon pada tab browser atau tidak.
Tapi yang jelas favicon tetap akan muncul setelah diupload, namun untuk waktunya tidak menentu. Tapi dari pengalaman saya pribadi, biasanya dalam waktu dua atau tiga hari favicon yang diupload sudah muncul.
Kesimpulan
Pada dasarnya favicon adalah logo pada suatu blog atau website yang dibuat dengan ukuran kecil agar tampil pada tab browser, halaman google, dan hasil penelusuran versi mobile.
Berikut ini adalah ukuran favicon pada setiap platform browser dalam bentuk pixel:
- Google: 16x16, dianjurkan menggunakan ukuran 96x96
- Opera Coast: 228x228
- iPad Retina iOS 6: 144x144
- iPad Retina iOS 7: 152x152
- iPad Mini iOS 6: 72x72
- iPad Mini iOS 7: 76x76
- Selebihnya biasanya menyesuaikan secara otomatis.
Favicon merupakan hal kecil yang wajib di isi pada blog atau website karena bisa menambah nilai integritas blog atau website.
Membuat favicon tidaklah sulit, Anda bisa menggunakan beberapa web generator favicon seperti Faviconit, Favicon.pro, Anti Favicon, Faviconr, dan website generator lainnya.
Anda juga bisa membuat design logo untuk favicon dengan menggunakan Adobe Photoshop sesuai dengan tutorial yang saya tulis dalam artikel ini.
Semoga bermanfaat.
Posting Komentar