Favicon adalah gambar kecil yang keren di sebelah bilah alamat Anda di browser Anda. Inilah yang membedakan situs Anda di tab bookmark dan dapat digunakan untuk meningkatkan kesadaran merek. Jika Anda memiliki situs tetapi tidak pernah mempertimbangkan untuk membuat favicon, Anda harus memikirkan kembali keputusan Anda. Semakin banyak, pengembang perangkat lunak menggunakan favicon untuk berbagai aspek aplikasi mereka, seperti ikon layar beranda di tablet. Untungnya, merancang, membuat, dan menerapkan favicon adalah sesuatu yang hampir semua orang dapat lakukan jika mereka mengikuti langkah-langkah yang benar.
Langkah
Metode 1 dari 3: Mendesain Favicon Anda
Langkah 1. Buat favicon yang mewakili situs web Anda
Jenis situs web yang Anda miliki harus menentukan tampilan favicon Anda. Cobalah untuk merancang sesuatu yang akan melekat pada citra merek Anda dan yang akan dapat dikenali dan diingat oleh orang-orang. Favicon Anda akan menjadi hal pertama yang dilihat orang ketika mereka melihat tab di browser mereka dan juga akan muncul di bookmark orang.
- Misalnya, jika Anda memiliki situs web makanan, memilih favicon yang memiliki desain buah atau sayuran dapat membuatnya lebih berkesan.
- Jika situs web Anda untuk firma hukum atau perusahaan investasi, favicon tradisional dan ramping adalah yang terbaik.
- Jika situs web Anda ditujukan untuk orang yang lebih muda, cobalah membuat favicon yang menyenangkan dan penuh warna.
Langkah 2. Putuskan apakah Anda menginginkan latar belakang transparan
Jika Anda tidak menentukan latar belakang, maka itu akan diisi dengan warna putih, yang mungkin tidak sesuai dengan merek Anda. Latar belakang transparan akan mengambil warna browser orang tersebut dan terlihat lebih ramping dalam beberapa kasus. Dalam kasus lain, memiliki warna untuk latar belakang akan membuat huruf atau grafik latar depan menonjol. Putuskan apa yang terbaik untuk desain Anda dan ingatlah saat Anda membuatnya.
Favicon paling dasar adalah kotak 16x16 dan memiliki warna latar belakang
Langkah 3. Buat favicon yang mudah dibaca
Karena gambar favicon yang akan Anda gunakan berukuran kecil, penting bagi Anda untuk menyampaikan merek Anda tanpa membingungkan pengunjung. Favicon yang sulit dibaca meninggalkan kesan negatif dan dapat menimbulkan pertanyaan di benak pengunjung tentang kualitas karya yang dapat Anda berikan. Gambar dan logo yang terlalu rumit tidak akan terlihat bagus jika diperkecil menjadi 16x16 atau 32x32 piksel.
- Jika logo Anda yang ada terlalu rumit, maka Anda dapat menggunakan taktik untuk menyederhanakannya, sehingga dapat dikenali pada ukuran favicon. Gunakan inisial alih-alih menampilkan seluruh nama perusahaan, atau rancang ikon sederhana daripada menggunakan gambar.
- Jika Anda sudah memiliki logo sederhana, Anda dapat mengecilkan gambar dan menjadikannya sebagai favicon Anda. Anda mungkin perlu mengubahnya sebelum mengonversinya menjadi file ikon.
- Anda juga dapat menggunakan gambar objek yang menjelaskan keseluruhan tema situs Anda.
Langkah 4. Buat favicon yang estetis
Struktur favicon Anda disebut bentuknya. Favicons biasanya mengambil bentuk, seperti lingkaran atau persegi. Saat Anda mendesain favicon, biasanya lebih baik jika favicon dapat masuk ke dalam salah satu bentuk dasar ini karena bentuk bentuk bebas sering kali menjadi kacau atau membingungkan pada 16x16 piksel. Aspek penting lain dari desain Anda disebut kesatuan estetika. Kesatuan estetika mencakup detail dan ukuran berbagai komponen di favicon Anda dan bagaimana favicon Anda seimbang. Semakin seragam detailnya, semakin kohesif tampilan favicon Anda. Misalnya, menggunakan jenis atau ukuran font yang berbeda dalam favicon Anda tidak enak dipandang dan dapat membuat favicon Anda terlihat bingung atau berantakan.
- Contoh lain dari kesatuan estetika adalah mempertahankan sudut membulat di seluruh bentuk di favicon Anda.
- Contoh bagus dari ikon yang telah berubah bentuk adalah favicon Google. Itu telah berubah dari persegi menjadi lingkaran.
Langkah 5. Gunakan warna yang kohesif dengan merek Anda
Saat membuat favicon, Anda harus membuatnya dalam kedalaman warna 8 bit (256 warna) atau 24 bit (16,7 juta warna), karena ini akan berfungsi pada browser modern. Pastikan bahwa warna yang Anda pilih dapat ditemukan di tempat lain di situs web Anda atau dikaitkan dengan merek Anda. Favicon dengan warna yang tidak ada di situs web, logo, atau aplikasi Anda tidak akan mudah diingat, dan orang tidak akan dapat mengaitkan ikon tersebut dengan merek Anda.
- Beberapa penggunaan kreatif warna favicon termasuk GitHub yang berubah warna tergantung pada status sistem Anda dan Trello, yang berubah tergantung pada warna latar belakang Anda.
- Warna yang paling umum digunakan dalam favicon adalah merah dan biru.
Langkah 6. Pertimbangkan audiens Anda saat mendesain favicon
Selain mengidentifikasi merek Anda, favicon Anda perlu terlihat menarik bagi pengunjung Anda. Orang dengan selera, minat, dan norma masyarakat yang berbeda akan melihat ikonologi yang berbeda dari perspektif yang berbeda. Perbedaan budaya ada dalam masyarakat kita dan dapat membingungkan atau menolak audiens yang Anda coba tarik.
Misalnya, Mac Os X menggunakan perangko yang merupakan simbol universal untuk surat. Menggunakan kotak surat tidak akan seefektif karena kotak surat bervariasi di berbagai belahan dunia
Langkah 7. Dapatkan pendapat teman dan kolega
Meskipun tidak terlalu intensif secara grafis, favicon adalah bagian penting dari merek Anda. Misalnya, pikirkan situs web favorit Anda seperti Twitter, Gmail, Facebook, atau wikiHow, dan seberapa banyak Anda mengaitkan favicon dengan merek tersebut. Jika Anda tidak memiliki mata yang bagus untuk desain, atau Anda bingung dengan jenis desain apa yang harus Anda miliki untuk situs Anda, berkonsultasilah dengan teman yang memiliki minat pada desain atau yang bekerja dalam desain grafis.
- Tanyakan di jaringan teman Anda untuk melihat apakah ada yang bisa memberikan saran desain secara gratis.
- Perusahaan besar memiliki desainer grafis internal yang dapat membuat gambar favicon.
Metode 2 dari 3: Membuat Favicon Anda
Langkah 1. Gunakan perangkat lunak pengedit foto untuk membuat favicon Anda
Anda dapat menggunakan perangkat lunak pengedit foto seperti Adobe Photoshop atau Illustrator untuk membuat gambar untuk favicon Anda. Aplikasi perangkat lunak ini juga memungkinkan Anda untuk mengubah ukuran dan mengekspor gambar dalam format yang tepat. Beberapa perangkat lunak memungkinkan Anda membuat favicon dengan tangan.
- Ada juga program pengeditan khusus favicon yang dapat Anda temukan secara online.
- Gunakan mesin pencari dan ketik "editor favicon."
- Jadikan kanvas Anda berukuran 512x512 piksel karena angka ini terbagi menjadi ukuran favicon yang paling sesuai dan masih cukup besar untuk Anda edit secara efektif.
- Perangkat lunak pengedit foto populer lainnya termasuk GIMP, PhotoScape, dan Paint. NET.
- Saat menggunakan perangkat lunak ini, Anda tidak akan dapat mengedit file.ico secara langsung, tetapi Anda dapat menggunakan file.png,.jpg, atau-g.webp" />
Langkah 2. Ubah ukuran dan simpan favicon Anda
32x32 px adalah ukuran item desktop Windows sedangkan 16x16 px adalah ukuran favicon di tab browser Anda. Setelah Anda membuat favicon dalam format yang lebih besar, penting untuk mengurangi ukurannya sehingga Anda dapat melihat tampilannya di browser orang. Jika tidak dapat dibaca atau tidak menyenangkan secara estetika, mulailah dari awal desain asli Anda. Pikirkan tentang platform tempat situs web atau aplikasi Anda kemungkinan besar akan digunakan dan kemudian buat favicon untuk mencakup semua basis Anda.
- Penting untuk dicatat bahwa perangkat keras dan perangkat lunak yang berbeda menggunakan ukuran favicon yang berbeda.
- Beberapa ukuran favicon lainnya termasuk 57x57px untuk layar beranda iOS standar, 72x72px untuk iPad, 96x96px untuk Google TV, 128x128px untuk Toko Web Chrome dan 195x195px untuk Opera Speed Dial.
- Jika Anda ingin mencakup semua basis Anda, Anda dapat membuat versi favicon Anda di masing-masing ukuran ini.
- Simpan versi terpisah dari favicon Anda, sehingga Anda tidak kehilangan pekerjaan yang telah Anda lakukan.
Langkah 3. Gabungkan file Anda menggunakan konverter
Hal hebat tentang file.ico adalah Anda dapat menggabungkan lebih dari satu file untuk membuatnya. Ini berguna karena browser dan perangkat lunak yang berbeda akan menginginkan favicon dengan ukuran yang berbeda. Untuk memastikan favicon Anda terlihat bagus di semua platform yang berbeda, konversi file Anda menggunakan konverter online. Ketik "konverter ikon" ke mesin pencari favorit Anda untuk menemukan aplikasi online gratis untuk melakukan ini. Simpan file gabungan sebagai "favicon.ico."
- Anda juga dapat menggunakan program seperti GIMP yang memiliki fitur bawaan, atau mengunduh plugin bernama ICO FORMAT ke Adobe Photoshop.
- Buat folder baru sehingga Anda dapat menyimpan favicon baru atau pekerjaan yang sedang berlangsung.
- Ketik ".ico converter" atau "favicon generator" di mesin pencari untuk menemukan berbagai alat yang dapat Anda gunakan.
Metode 3 dari 3: Menerapkan Favicon Anda
Langkah 1. Unggah favicon Anda jika Anda menggunakan editor situs web
Banyak editor situs web hadir dengan formulir bawaan yang memungkinkan Anda mengunggah favicon ke situs web Anda secara otomatis. Jika Anda menggunakan editor situs web yang memiliki fitur ini, cari opsi yang bertuliskan "Unggah Favicon" atau "Tambahkan Favicon" di menu pengaturan situs web Anda. Pilih file favicon.ico Anda dan unggah ke situs Anda.
Jika Anda tidak dapat menemukan tempat untuk mengunggah favicon di editor situs web Anda, Anda harus melakukannya secara manual
Langkah 2. Unggah file ke direktori root situs Anda
Jika situs web Anda mendukung File Transfer Protocol atau FTP, maka Anda dapat menggunakan klien FTP Anda untuk mengunggah file favicon.icon baru Anda ke direktori root (indeks) Anda. Jika tidak, maka Anda harus membuka halaman host web Anda dan mengunggah gambar secara manual. Ingatlah untuk mengganti file favicon.ico yang ada dengan file baru Anda.
Langkah 3. Tambahkan file ke header Anda
Temukan tempat di mana Anda dapat mengakses file PHP dan CSS untuk situs Anda. Buka file header.php situs Anda dan edit. Di bawah jenis tag,"
-
. Ini akan menghubungkan situs Anda ke favicon Anda.
Karena Anda menggunakan PHP, itu berarti semua situs yang menggunakan file header Anda sekarang akan memiliki favicon yang sama
Buat Ikon Favicon Anda Sendiri Langkah 14 Langkah 4. Segarkan browser Anda
Setelah selesai mengunggah favicon, Anda dapat menyegarkan browser untuk melihat gambar baru Anda di sebelah bilah alamat. Untuk langsung membuka gambar favicon Anda yang diperbarui, ketik, "https://www.yourdomain.com/favicon.ico."
- Jika favicon Anda awalnya tidak muncul, Anda mungkin harus mengatur ulang cache browser Anda.
- Untuk mengosongkan cache, buka pengaturan browser Anda dan hapus File Internet Sementara, Cookie, dan Riwayat Anda.
