Membuat icon halaman web

Diterbitkan pada oleh Andi Saleh. Estimasi baca 4 menit.

Informasi dalam tulisan ini kemungkinan tidak lagi relevan atau sudah tergantikan dibanding saat tulisan ini diterbitkan.

Selain layout, desain dan content yang baik, ada satu cara sederhana lagi yang bisa membuat halaman web tampil lebih profesional, yaitu menggunakan icon halaman web tersendiri.

Langkah 1: Desain icon

Pertama-tama yang kita lakukan tentu saja mendesain iconnya. Gunakan aplikasi pengolah gambar mana saja yang kamu kuasai. Dalam tutorial ini aku pake Photoshop. Yang penting adalah membuat gambar berukuran 16×16 pixel dengan resolusi 72 dpi.

Kita menggunakan ukuran 16×16 pixel sebab inilah ukuran icon yang digunakan dalam jendela aplikasi (dalam kasus kita, web browser). Selain ukuran tersebut, ukuran-ukuran yang valid lainnya untuk sebuah icon adalah 24×24 px, 32x32px dan 48x48px. Kamu juga bisa mendesain icon dengan menggunakan ukuran-ukuran ini tapi pada akhirnya kamu tetap harus mendownsizenya ke 16×16 px. Resolusi 72 dpi digunakan karena merupakan resolusi standar penggunaan image pada layar, beda dengan keperluan cetak yang umumnya menggunakan 300 dpi.

Kamu tidak harus mendesain icon berbentuk kotak (mengambil penuh ukuran kanvas). Gunakan kreatifitas dan ciptakan bentuk-bentuk yang unik. Bila kamu membuat icon seperti ini, nonaktifkan layer paling bawah sehingga icon menempati bidang transparan. Setelah puas dengan desainnya, simpan gambar dalam format PNG. Format ini kita gunakan karena ia mendukung transparansi alpha–persentase transparansi dari 0% (betul-betul transparan) sampai 100% (betul-betul opaque)–sehingga kualitas transparansi gambar tetap oke; daerah gambar yang bersebelahan dengan area transparan akan memblend dan membuatnya lebih halus. Beda dengan format GIF yang juga mendukung transparansi tapi hanya mendukung dua nilai; transparan atau tidak transparan. Format GIF menyebabkan pinggiran gambar transparan terlihat jaggy.

Langkah 2: Ubah ke format ICO

Selanjutnya adalah merubah gambar PNG yang telah kita buat menjadi file icon. Gunakan aplikasi pembuat icon yang banyak tersebar di internet, salah satunya Microangelo. Cara masing-masing aplikasi berbeda tapi intinya kita mempersiapkan kanvas icon 16×16 px dan mengimpor gambar PNG yang sudah kita simpan. Lalu simpan/ekspor menjadi file icon.

Sebagai tambahan; yang kita perlukan adalah aplikasi yang mendukung pembuatan icon untuk Windows XP (mendukung icon dengan transparansi alpha). Mengapa? Sebab kualitas icon yang digunakan dalam Windows XP lebih baik dan kita menginginkan agar icon kita disiapkan untuk itu.

Lebih jelasnya lihat gambar di samping. Gambar ini membandingkan icon ukuran 16×16 px dengan True Color dan transparansi yang bisa digunakan sampai Windows Me dan dengan sistem icon transparansi alpha Windows XP. Dua icon berukuran 48×48 px adalah gambaran jika iconnya kita perbesar 300%.

Icon akan menampilkan kualitas terbaik yang diizinkan oleh kompi. Kualitas icon yang kita persiapkan “untuk” Windows XP hanya akan turun jika ditampilkan pada OS di bawahnya. Hasil paling “parah” yang kita dapatkan adalah icon dengan True Color seperti dalam gambar di atas. Tidak sebaliknya, jika icon kita persiapkan hanya dengan True Color dan transparansi biasa maka itulah kualitas terbaik yang akan kita dapatkan dan pengguna Windows XP tidak akan melihat peningkatan kualitas seperti yang bisa mereka peroleh.

Langkah 3: Upload file icon

Gampang, upload file icon yang sudah disimpan ke web kamu. Pastikan pathnya bisa diakses oleh semua halaman yang bakal menggunakan icon ini. Kalau gak mau susah, langsung upload ke root atau yang satu direktori dengan file index.

Langkah terakhir: Menambahkan satu baris kode di file halaman.

Setiap halaman yang akan menggunakan icon ini harus diedit agar mengenalinya. Baris berikut boleh diletakkan di sembarang tempat di dalam bagian <head>.

<link rel="shortcut icon" type="image/x-icon" href="path/nama-icon.ico" />

Bagian yang diubah adalah path yang menunjukkan lokasi di mana icon berada dan nama-icon.ico yang merupakan nama file iconnya. Contoh:

<link rel="shortcut icon" type="image/x-icon" href="https://andi.saleh.web.id/favicon.ico" />

Simpan file, selesai! Buka halaman dengan web browser lalu liat icon yang sudah kamu buat.

Semoga bermanfaat. 😉

Catatan:

  • Gak usah repot-repot buka dengan Internet Explorer 6 ke bawah. IE6 gak dukung icon untuk halaman web.
  • Animated icon juga bisa digunakan untuk icon halaman web. Punya icon web yang bergerak-gerak kayaknya keren juga. 😉

Andi Saleh

Pengalaman 15+ tahun dalam industri grafis dan web, mengkhususkan di identitas brand visual dengan renjana di motion, pengembangan WordPress, dan edukasi. Telah membantu klien dari berbagai industri, dari usaha kecil lokal sampai venture internasional. Antusias dengan game dan film.