Dalam desain web, seperti yang mungkin Anda ketahui, setiap detail penting. Seseorang yang telah beralih ke sumber daya Anda tidak melihat setiap elemen secara terpisah, tetapi menganggap keseluruhan gambar sebagai paket yang terdiri dari detail kecil lainnya. Jadi, jika Anda melewatkan sesuatu dalam proses pengembangan sumber daya Anda, detail ini nantinya dapat merusak keseluruhan kompleks, seluruh komposisi.
Hal sepele seperti itu dapat berupa, misalnya, latar belakang tombol, font yang salah dipilih dari beberapa elemen kecil, dan bahkan favicon. Memang, lihat sendiri - situs besar dan terkenal memiliki ikon individual yang menunjukkannya di bagian "Bookmark" di browser pengguna. Tanpa itu, pengembang sumber daya tidak akan dapat membuat komposisi yang mereka perjuangkan.
Oleh karena itu, saat membuat desain untuk situs Anda, Anda harus memperhatikan detail seperti favicon. Dalam artikel ini, kita akan berbicara tentang cara mencocokkannya dengan gaya umum sumber daya, serta ukuran apa yang seharusnya dimiliki gambar ini.
ikon Situs
Pertama, mari kita definisikan apa elemen ini. Sekarang, lihat judul tab browser Anda. Seperti yang Anda lihat, ada gambar kecil di sebelah kirinya, yang menunjukkan versi sederhana dari logo sumber daya. Gambar yang sama juga berada di dekat nama situs yang ditampilkan di hasil pencarian. Inilah yang dipandu oleh pengguna ketika mereka melihat judul.
Banyak webmaster memahami bahwa gambar seperti itu diperlukan - tetapi hanya sedikit orang yang tahu ukuran favicon untuk situs yang paling sesuai. Oleh karena itu, dalam artikel ini kami tidak hanya akan memberikan informasi tentang cara membuat ikon tersebut dan bagaimana Anda dapat menginstalnya pada sumber daya Anda, tetapi juga berbicara tentang ukuran gambar.
Tujuan favicon
Jadi, gambar di dekat header situs digunakan untuk identifikasi. Ini adalah tujuan awalnya: untuk mengekspresikan situs yang namanya kita lihat, dan membuatnya menonjol di mata orang lain. Ini dilakukan sesederhana mungkin melalui penggunaan grafik: kami secara intuitif melihat informasi dalam gambar jauh lebih cepat dan lebih mudah daripada dalam format teks. Favicon membantu kami melakukan hal itu. Namun jangan lupa bahwa ukuran favicon sangat minim di mata pengguna. Ini bukan logo di "tajuk" situs, yang mungkin berisi informasi tambahan dalam bentuk prasasti, beberapa klarifikasi, atau informasi kontak. Segala sesuatu yang dapat ditampilkan di ikon di sebelah nama harus sesuai dengan ukuran favicon sebanyak mungkin. Dan dia, seperti yang telah ditunjukkan, hanyalah miniatur (hanya 16 kali 16 piksel).
Cara memilihfavicon?
Jadi, bagaimana seorang webmaster mendesain ikon untuk situsnya? Perlu dicatat bahwa hanya mengompresi logo situs, paling sering, tidak akan berfungsi. Pada lambang yang berbentuk logo sumber daya tertentu, sering terlihat berbagai elemen, yang tidak selalu ditampilkan dengan benar dalam bentuk miniatur. Lebih baik segera tinggalkan usaha seperti itu.
Tentu saja, ukuran favicon tidak memungkinkan berbicara tentang hanya memasukkan prasasti di sana. Teks apa pun tidak akan terlihat pada resolusi ini. Kita perlu mengembangkan ikon baru yang akan menyampaikan gaya situs. Untuk mencari solusi, sekali lagi, mari kita beralih ke situs terbesar.
Banyak orang menggunakan huruf pertama dari nama layanan sebagai favicon. Ini caranya, misalnya Bing, Yahoo, Yandex, Wikipedia, Google. Ada pendekatan lain - jika Anda memiliki nama situs yang pendek, Anda dapat mengaturnya sebagai latar belakang ikon Anda. Agar ukuran favicon (dalam piksel yang dicapai, saya ulangi, 16 kali 16 piksel) untuk menampilkan prasasti ini dengan benar, tidak boleh lebih dari 3 huruf. Inilah yang dilakukan, misalnya, layanan Aol.
Bagaimana cara membuat favicon?
Ada beberapa cara untuk membuat ikon untuk nama situs. Tentu saja, yang paling mudah adalah bekerja dengan berbagai solusi siap pakai. Kami dapat berbicara tentang beberapa layanan atau program yang memungkinkan Anda membuat ikon dari gambar lengkap dengan menguranginya. Namun, saya akan merekomendasikan mengembangkan logo seperti itu sendiri. Ini pertama-tama akan memberikankesempatan untuk mempelajari sesuatu; dan kedua, ini akan menyediakan lebih banyak alat. Yang perlu Anda ketahui untuk ini adalah apa yang harus digambar, dan juga tahu ukuran favicon yang seharusnya ada di versi final. Kami akan berbicara tentang ukuran ikon untuk situs sedikit kemudian, tetapi untuk saat ini kami akan mencatat beberapa seluk-beluk bekerja dengan gambar seperti itu. Secara khusus, tanpa menyebutkan ukuran favicon untuk situs tersebut, format gambar seperti itu harus diklarifikasi. Seperti yang dicatat oleh desainer berpengalaman, gambar harus disimpan sebagai-p.webp
Anda dapat menyimpan gambar, misalnya menggunakan Photoshop, di mana emblem akan digambar.
dimensi Favicon
Jadi, sekarang mari kita bicara tentang seberapa besar gambar yang kita lihat di sebelah nama situs di hasil pencarian seharusnya. Secara default, seperti yang telah disebutkan, ukurannya hanya 16 piksel (di setiap sisi). Namun, jika Anda mencoba mengedit gambar ini di Photoshop, Anda akan melihat sendiri betapa tidak nyamannya itu. Oleh karena itu, kami menyarankan untuk bekerja dengan gambar yang diperbesar, yang di masa mendatang dapat dengan mudah dikompresi di sepanjang tepinya dan disimpan dalam format yang diperlukan.
Multiplatform
Namun, berbicara tentang seberapa besar favicon seharusnya di situs Anda, ada satu hal lagi yang perlu diingat. Tidak semua platform menampilkan gambar sumber daya dengan cara yang sama. Misalnya, perangkat dengan layar Retina "melihat" favicon Anda pada ukuran 32 kali 32 piksel. Dan di Safari dan pada platform Windows baru, dan sama sekali, ikon ini mencapai ukuran 64piksel.
Oleh karena itu, kami menyarankan Anda menyimpan versi ikon yang berbeda dan hanya menyediakan perubahannya tergantung pada platform pengguna di masa mendatang. Poin menarik lainnya - Anda dapat mencoba memuat ikon dalam format terbesar, mengandalkan fakta bahwa itu akan "menyusut" tergantung pada browser.
Editor luar
Tentu saja bagus jika Anda mahir menggunakan Photoshop dan tahu ukuran favicon yang seharusnya dan bagaimana mencapainya saat menyimpan gambar Anda. Namun, ada banyak pemula yang belum pernah melihat editor grafis begitu dekat sebelumnya, sehingga mereka tidak dapat menggambar gambar yang diinginkan dengan mudah. Untuk membantu webmaster seperti itu, ada berbagai layanan yang memungkinkan Anda membuat ikon yang Anda minati secara otomatis. Banyak dari mereka bahkan gratis, yang tidak memerlukan investasi apapun dari pengguna.
Terkadang Anda hanya perlu mendaftar untuk bekerja, tetapi, seperti yang Anda pahami, ini dilakukan sekali - lagi pula, perusahaan tidak terlalu sering mengubah favicon mereka. Lihatlah Google, yang setiap hari berganti logo, tetapi tidak menyentuh ikonnya.
Bagaimana cara menginstal favicon?
Secara umum, menyiapkan situs Anda sedemikian rupa sehingga menampilkan gambar yang Anda butuhkan dengan benar sangat sederhana. Cukup melakukan serangkaian langkah sederhana yang memungkinkan mesin pencari, serta browser sederhana, untuk membaca informasi.
Untuk melakukan ini, gambar yang dihasilkan harus disimpan denganbernama favicon.ico dan ditempatkan di root sumber daya Anda. Itu saja, sekarang gambar Anda akan dikenali secara otomatis, dan setelah beberapa waktu akan ditautkan ke situs Anda.
Selain pengikatan ini, Anda dapat menambahkan satu baris lagi yang akan "menyarankan" lokasi ikon Anda. Tampilannya seperti ini:
Instal kode di header situs.
Kesimpulan
Jadi, setelah membaca artikel kami, Anda mengetahui ukuran favicon untuk sebuah situs dan ukurannya. Selain itu, saya pikir Anda memahami bahwa menemukan ikon yang tepat untuk sumber daya Anda adalah suatu keharusan, karena ia berperan di tangan Anda baik dalam hal meningkatkan pengakuan dan dalam hal beberapa tambahan menonjol di antara pesaing Anda. Setidaknya situs terbesar melakukan hal yang sama, yang dapat diambil sebagai contoh utama. Dan selain itu, tidak memerlukan banyak usaha - setelah membuat favicon sekali dan menginstalnya dengan benar di situs Anda, Anda dapat melupakannya selama beberapa bulan ke depan.
Oleh karena itu, jangan ragu untuk bereksperimen, temukan sesuatu yang baru, coba - dan semuanya akan berhasil!
