Cara membuat favicon untuk situs: tips dan layanan yang berguna

1. Cara membuat favicon
2. Cara membuat favicon di Photoshop
3. Bagaimana cara menyimpan favicon
4. Cara memasukkan situs favicon
5. Bagaimana cara mengganti favicon
6. Cara membuat favicon yang lebih kompleks

Sulit untuk menebak apa itu favicon ketika Anda pertama kali mendengar kata ini. Ini adalah ikon miniatur yang ditampilkan pada tab peramban, pada baris alamat dan area lainnya, tergantung pada sistem operasi yang Anda gunakan dan peramban Internet. Ini dapat dengan aman disebut sebagai salah satu elemen paling kompleks dan berubah-ubah dalam desain situs web.

Membuat favicon yang baik cukup sulit, karena ikonnya kecil, itu harus jelas dan menampilkan sesuatu yang berhubungan dengan situs Anda. Membuat favicon yang kompatibel dengan semua browser populer juga bisa menjadi tugas yang menakutkan. Dalam artikel ini kita akan membahas semua aspek rumit dari penciptaannya. Jika Anda juga membutuhkan logo, maka kami punya sebuah artikel bagaimana cara melakukannya.

Cara membuat favicon

Mari kita mulai dengan desain favicon. Desain yang baik, meskipun padat, harus mencerminkan esensi situs Anda dan menjadi bagian organik dari identitas perusahaan. Biasanya, ikon adalah tanda grafis (ikon) perusahaan dan bukan keseluruhan logo (ikon, teks, dan slogan).

Sebagai favicon, situs web ini menggunakan ikon mereka (atau gambar yang dekat dengan mereka).

Teks dalam favicon tidak boleh digunakan, karena teks ini tidak dapat dibaca karena ukuran gambar yang kecil. Satu-satunya pengecualian untuk aturan ini adalah karakter teks terkenal di dunia yang secara otomatis dikaitkan dengan merek tertentu. Sebagai contoh, Wikipedia sumber daya online meninggalkan huruf besar huruf "W", dan Facebook - huruf "F".

Pada favicons ini ada huruf yang sangat terkait dengan merek tertentu. Misalnya, Facebook menggunakan tanda grafiknya. Perhatikan juga bahwa piksel terlihat pada gambar Disney. Ini karena tangkapan layar diambil pada tampilan Retina, yang kompatibel dengan ikon 16 × 16, sedangkan situs web menggunakan ikon 32 × 32.

Karena favicons adalah gambar kecil, setiap pixel memainkan peran penting. Kadang-kadang setelah mengurangi logo, masing-masing piksel menjadi terlihat, sehingga gambar menjadi "kabur". Untuk mendapatkan kejelasan, Anda perlu mengedit ikon di tingkat piksel.

Untuk menghindari ini, Anda perlu mengubah ukuran logo menggunakan editor khusus seperti Photoshop atau GIMP. Pertama, Anda perlu mengurangi ukuran gambar menjadi 64x64 piksel (ini adalah favicon ukuran terbesar). Maka Anda perlu mengedit setiap piksel menggunakan alat Pensil sampai gambar jelas. Ini adalah proses yang melelahkan, tetapi hasilnya sepadan. Ketika favicon 64x64 siap, Anda harus melakukan pekerjaan yang sama dengan gambar 16 × 16, 24 × 24 dan 32 × 32 piksel. Begitu banyak ukuran yang perlu Anda tampilkan dengan benar di semua browser dan gadget:

• 64x64 - Bookmark browser Safari;
• 32x32 - tampilan resolusi tinggi (Retina);
• 24x24 - bookmark Internet Explorer dan MicroSoft Edge;
• 16x16 - Google Chrome dan browser lainnya.

Cara membuat favicon di Photoshop

Pertama, Anda perlu membuat beberapa kanvas dengan dimensi di atas.

Maka Anda perlu menambahkan ikon, huruf atau gambar lain ke kanvas.

Bagaimana cara menyimpan favicon

Setelah membuat ikon dengan ukuran berbeda, simpan masing-masing sebagai file PNG transparan (24 bit). Di Photoshop, Anda dapat menggunakan fitur Simpan untuk Web yang tersedia di menu File. Maka Anda harus menggabungkan semua file PNG menjadi satu file ICO. Anda dapat menggunakan file PNG dan file ICO secara bersamaan, tetapi seringkali bahkan Safari dan Chrome hanya memilih format ICO. Menurut pendapat saya, lebih mudah untuk membuat satu file ICO. Format ICO tidak terlalu umum, tetapi untungnya ada sejumlah alat yang dapat membantu Anda mengonversi file Anda ke format ini. Untuk tujuan ini, saya lebih suka menggunakan Editor X-Icon . Ini adalah layanan online gratis yang secara instan mengubah gambar yang diunduh menjadi satu file ICO, setelah itu Anda dapat mengunduhnya. Ini tidak rumit, cukup ikuti instruksi di situs. Jika Anda menganggap diri Anda orang yang putus asa, Anda dapat bereksperimen dengan editor piksel layanan ini dan menggambar favicon sendiri. (Meskipun saya lebih suka mengedit favicons di editor yang lebih profesional, misalnya, di Photoshop).

Dengan mengunggah gambar PNG Anda ke X-Icon Editor, Anda akan mendapatkan satu file ICO di output.

Cara memasukkan situs favicon

Jadi, Anda sudah memiliki file ICO. Sekarang Anda perlu menambahkannya ke situs web. Ubah nama file menjadi favicon.ico dan letakkan di folder root situs web Anda (tempat file index.html dan file standar lainnya disimpan). Setelah penambahan yang berhasil, Anda dapat melihatnya di situs web Anda com / favicon.ico. Hampir semua browser mencari file favicon.ico di folder root. Karena itu, penting Anda mengunduh favicon di folder ini. Untuk kompatibilitas dengan browser yang berbeda, lebih baik tidak menambahkan elemen HTML atau tautan yang menunjukkan lokasinya. Trik ini berfungsi untuk semua browser, hingga IE6. Juga, jika Anda memiliki situs WordPress, maka dalam banyak tema Anda dapat menambahkan favicon di pengaturan tema. Metode ini juga bisa digunakan.

Bagaimana cara mengganti favicon

Untuk beberapa alasan yang tidak bisa dijelaskan, browser menambahkannya ke cache. Karena itu, ketika Anda mengunggah file ICO baru, browser dapat terus menunjukkan favicon lama Anda. Apa yang harus dilakukan dalam kasus ini? Anda dapat menambahkan file HTML sementara yang menunjukkan lokasi favicon baru Anda. Juga di akhir URL Anda perlu menambahkan string kueri pendek:

<link rel = "ikon pintasan" href = "situs web Anda .com / favicon.ico? v = 2 ″ />

Jadi browser akan berpikir bahwa ini adalah URL yang unik, dan karena itu, akan dipaksa untuk menampilkan ikon baru. Setelah memperbarui favicon, kode HTML ini dapat dihapus sepenuhnya. Jika Anda perlu membuat perubahan pada favicon, gunakan teknik yang sama, setiap kali menambah angka setelah "v" dalam string kueri. Dengan demikian, setiap kali browser akan menganggap URL ini sebagai unik dan menampilkan versi barunya. Dan jangan lupa untuk menghapus kode HTML setelah pembaruan berhasil.

Cara membuat favicon yang lebih kompleks

Pada artikel ini, saya ingin menggambarkan cara universal dan mudah untuk membuat favicons yang akan bekerja di hampir semua platform. Namun dalam desain dan pengembangan web tidak ada batasan untuk kesempurnaan. Jika Anda ingin mempelajari cara membuat ikon yang lebih kompleks, Anda dapat mencoba menggunakan layanan ini favico.js . Ini memungkinkan Anda untuk membuat gambar dinamis dengan angka yang bervariasi. Berkat ikon ini, Anda dapat melihat jumlah pesan yang belum dibaca, bahkan ketika tab yang sesuai tidak aktif. Jika Anda ingin membuat animasi favicon online, Anda dapat mencoba menggunakan generator favicon favicon.cc .

Lebih banyak generator daring yang dapat Anda temukan disini .

Jika Anda ingin berbagi kiat tentang cara membuat kartu favorit atau mengajukan pertanyaan, saya menunggu Anda di komentar!