Favicon adalah icon yang muncul di sebelah alamat website di address bar, ini merupakan hal yang penting untuk memberikan identitas yang unik terhadap situs anda dan pengunjung dapat dengan mudah mengenali halaman website milik anda. Biasanya banyak pemilik website yang lupa memasang favicon untuk situsnya, penyebabnya bisa repot atau tidak tahu cara membuatnya.
Membuat favicon.ico dengan manual
Membuat favicon statis ini tidak harus menggunakan aplikasi khusus atau berbayar, anda bisa menggunakan layanan online gratis favicon generator dari Favicon.cc.
Favicon statis
Saat membukanya anda akan disuguhi kanvas kosong untuk membuat kreasi favicon anda dan perhatikan di sebelah kanan terdapat palet warna (Color Picker) yang bisa digunakan untuk mendesain favicon anda. Transparent digunakan untuk membuat kotak yang dipilih menjadi tembus pandang (transparan), pick existing color untuk menggunakan warna yang sudah ada di kanvas, dan move untuk memindahkan lokasi warna dalam kotak yang terpilih.
Sekiranya kalau sudah selesai akan seperti gambar dibawah.
Favicon bergerak
Tahukah anda bahwa favicon bisa dianimasikan? Jadi gambarnya akan bergerak, ini bisa membuat halaman web anda semakin unik dan menonjol di mata pengunjung. Membuat favicon dengan animasi juga telah didukung oleh Favicon.cc, anda cukup klik “Use Animation” yang terletak di bagian bawah kanvas. Cara pembuatan favicon beranimasi ini sama persis dengan pembuatan favicon yang diam, cuma anda perlu menambahkan frame baru untuk setiap pergerakan gambar dan jeda pergantian antar gambar untuk membuat animasinya.
Clear Frame digunakan untuk membersihkan kanvas pada frame tersebut, Append New Frame untuk menambahkan kanvas frame kosong, Copy Previous Frame untuk menduplikat frame sebelumnya di kanvas frame yang baru, Delete Frame untuk menghapus frame sekarang, Loop Forever berarti anda animasi ini akan berulang – ulang tanpa henti – anda bisa mengatur sampai mana dan berapa kali animasi ini diulang, Animate Preview untuk memperlihatkan animasi pada fungsi preview favicon, Previous untuk ke frame sebelumnya dan Next untuk navigasi ke frame setelahnya.
Download favicon.ico
Kalau sudah yakin dengan hasil pembuatan favicon anda, silahkan geser halaman agak kebawah dan lihat pada bagian Preview. Anda bisa melihat hasil kerja anda bila ditampilkan pada browser.
Klik Download Favicon untuk mengunduh file favicon.ico hasil kreasi anda. Sedangkan Publish under an open license akan menerbitkan favicon yang anda buat supaya bisa digunakan orang lain dengan bebas.
Membuat favicon.ico dari gambar
Cara membuat favicon dari nol akan membuat anda yang merasa tidak mempunyai bakat desain kerepotan. Anda juga bisa membuat logo otomatis secara online. Nah.. kalau website anda telah memiliki logo, anda bisa memanfaatkan fungsi konversi gambar ke format favicon. Import gambar ini mendukung format gambar jpg, jpeg, gif, png, bmp, ico, dan cur – ukuran maksimal filenya adalah sebesar 5 MB.
Keep dimensions berfungsi hasil favicon-nya menggunakan ukuran yang sama dengan sumber, sedangkan Shrink to square icon akan mengubah dimensinya menjadi kotak. Pilihlah yang sesuai dengan rasio dan ukuran gambar logo website anda. Klik Upload untuk mengunggah file gambar anda. Anda akan dialihkan ke halaman editing favicon seperti pada saat membuat favicon diatas, disini anda bisa melakukan editing sebelum mendownloadnya.
Lainnya
Favicon.cc memiliki fitur lain yang berhubungan dalam desain favicon, saya akan membahasnya secara singkat disini.
Melihat favicon hasil karya terbaru orang lain
Pada menu navigasi klik saja Latest Favicons.
Disini anda bisa melihat favicon yang merupakan hasil kerja orang lain, favicon yang muncul disini berarti orang tersebut memilih “Publish under an open license” di bagian Preview.
Melihat favicon dengan rating paling bagus
Kualitas favicon buatan orang memang bervariasi, untung ada sistem ratingnya sehingga anda bisa memilah – milah favicon yang ada. Klik saja Top Rated Favicons.
Kedua menu diatas akan menampilkan favicon – favicon hasil kreasi orang lain dengan kriteria berbeda yang bebas untuk didistribusikan, anda bisa menggunakannya pada website anda sendiri. Anda bisa langsung mendownloadnya atau bisa melakukan penyesuaian dengan klik Edit Copy of Icon.