Cara membuat favicon: tips, trik, dan layanan dari Logaster

Favicon adalah icon web kecil atau lambang yang digunakan untuk mengidentifikasi blog atau situs web Anda di Favorites. Selain itu, favicon selalu terlihat dekat alamat atau nama sebuah website, setiap saat Anda menggunakan browser. Kebanyakan favicon berbentuk kotak dengan ukuran 16×16 pixel yang disimpan di format favicon.ico. Dalam artikel ini, kami akan menjelaskan tentang “dasar” yang diperlukan untuk memulai keseluruhan proses ini. Kami akan menunjukkan cara membuat favicon untuk situs web menggunakan editor grafis yang berbeda, dan juga membagikan kunci metode dalam menambahkan favicon ke dalam situs web atau blog Anda jika Anda seorang blogger.

  1. Membuat favicon dengan Adobe Photoshop
  2. Cara membuat favicon menggunakan GIMP
  3. Keunggulan utama .ICO
  4. Ubah .PNG ke .ICO
  5. Bagaimana cara menginstall favicon ke dalam WordPress?

Apa yang kita perlukan untuk mulai membuatnya?

  1. Pertama-tama, kita membutuhkan logo dengan resolusi setidaknya 512×512 pixel (harus berbentuk kotak). Anda bisa mendesain logo Anda dengan mengklik di sini.
  2. Logo harus dalam format .PNG.
  3. Aplikasi Adobe Photoshop atau editor grafis GIMP.

Membuat favicon dengan Adobe Photoshop

Inilah cara membuat favicon dengan latar belakang transparan:

1. Buka logo dalam format PNG dengan latar belakang transparan dengan mengklik kombinasi berikut: “File” – “Open” dan pilih gambar yang disimpan di komputer Anda.

2. Hapus nama dari logo agar yang tersisa hanya icon dengan menggunakan alat “Eraser” dan ubah warna utama menjadi putih. 

3. Untuk merubah ukuran logo ke 16×16 pixel, itu bisa dilakukan dengan mengklik kombinasi berikut: “Image” – “Image size”.

4. Pilih ukuran 16×16 pixel. Favicon Anda akan terlihat sangat kecil, tapi Anda tidak perlu khawatir karena ini sesuai rencana kami.

5. Simpan gambar dengan mengklik kombinasi berikut: “File” – “Save As” dan pilih format PNG untuk menyimpan.

Jika Anda puas dengan logo favicon itu, lanjutkan ke tahap ke-4 dari manual ini.

Inilah cara membuat favicon menggunakan salah satu warna perusahaan Anda:

1. Seperti biasa kita perlu membuka file PNG. Perbedaannya adalah latar belakangnya harus menjadi warna perusahaan, tapi tidak transparan.

2. Hapus teks, sisakan hanya icon: gunakan alat “Picker” agar bisa memilih warna latar belakang; klik dan warna di palet akan sama dengan latar belakang. Lalu, gunakan alat “Brush” dan hapus nama perusahaan dari logo.

3. Ubah ukuran gambar dengan mengklik kombinasi berikut: “Image” – “Change Size” dan pilih ukuran 16×16 pixel. Jika gambarnya terlihat proporsional dan menarik, simpan dalam format .PNG dan lanjut ke langkah ke-4 dari manual ini.

Cara membuat favicon menggunakan GIMP – GNU Image Manipulation Program

GIMP adalah program editor grafis yang memungkinkan pengguna untuk bekerja dengan berbagai macam gambar vektor. Keunggulan dari perangkat lunak ini adalah kita bisa membuat favicon dalam format .ICO tanpa menggunakan konverter gambar seperti Adobe Photoshop.

1. Buka file di editor dengan mengklik “File” – “Open”, dan pilih salah satu gambar yang disimpan di komputer Anda.

2. Lalu, hapus teks hingga yang tersisa hanya icon: klik palet warna dan pilih kode warna latar belakang perusahaan. Jika Anda tidak tahu kodenya, gunakan alat “Picker”, arahkan kursor ke latar belakang dan klik kiri. Warnanya akan dipilih secara otomatis. Lalu, gunakan alat “Brush” untuk menghapus semua huruf dari favicon.

3.  Kurangi ukuran logo ke dimensi standar favicon, yaitu 16×16 pixel dengan menggunakan kombinasi berikut: “Image” – “Change Image Size”.

5. Ekspor logo dengan menggunakan kombinasi berikut: “File” – “Export as…”.

6. Pilih format ekspor, yaitu icon Microsoft Windows dengan ekstensi .ICO. Lalu, klik tombol “Export”.

Semuanya sudah siap! Sekarang Anda bisa menggunakan favicon dalam situs web Anda!

Keunggulan utama .ICO dibandingkan dengan .PNG dan .GIF

  1. Kompatibilitas: semua browser, termasuk Internet Explorer 5.0 mendukung format .ICO.
  2. Tidak akan mendapatkan Error 404 dari server: semua browser modern (dites dengan Chrome 4, Firefox 3.5, IE8, Opera 10 dan Safari 4) akan selalu meminta file favicon.ico, maka dari itu sangat direkomendasikan untuk memilikinya dalam website Anda.
  3. File dalam format .ICO bisa berisi beberapa icon, dan tidak perlu membuat lebih dari satu file untuk icon 16×16 dan 48×48.

Ubah .PNG ke .ICO menggunakan konverter online gratis

Untuk mengubah format .PNG ke .ICO, Anda bisa menggunakan berbagai macam konverter online. Kami memutuskan untuk menggunakan online-convert.com, tapi Anda bebas untuk menggunakan pilihan lain yang cocok untuk Anda karena semuanya memiliki fungsi yang serupa. Mari kita mulai:

1. Buka website dan gunakan side-bar di kiri lalu pilih: “Image converter” – “Convert to ICO”

2. Pilih file di komputer Anda dengan mengklik “Choose files…” atau seret file ke tempat yang disediakan. Lalu, lanjutkan dengan mengklik “Start conversion”.

3. Klik tombol “Download” untuk mulai mengunduh favicon dalam format .ICO. Anda juga bisa mengirim file ke penyimpanan cloud atau mengunduhnya langsung ke dalam format ZIP.

Bagaimana cara menginstall favicon ke dalam WordPress?

Anda bisa memuat favicon (favicon.ico) ke dalam folder utama (root) situs web Anda. Folder root adalah direktori utama dari situs web yang berisi file penting dari WP, termasuk “index.php”, dan folder lainnya seperti “wp-admin”, “wp-content”, dan “wp-includes”. Wajib untuk menyimpan file “favicon.ico” di dalam folder yang sama dengan “index.php”.

1. Masuk ke “WordPress Dashboard”.

2. Pergi ke bagian “Appearance”.

3. Buka “Theme editor”.

4. Pilih file bernama “Header” atau “Header.php” agar Anda bisa mengeditnya.

5. Cari baris kode yang dimulai dengan <link rel=»shortcut icon» dan berakhir dengan /favicon.ico «/>. Anda perlu mengubah atau menambahkan kode berikut tepat di bawah HTML-tag <head>. Dalam contoh kami, kami sudah menggunakan file “favicon.ico”. Anda bebas untuk memilih nama yang lain.

Inilah kodenya: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>;

6. Simpan perubahan.

Kesimpulan:

Dalam proses pengembangan situs web, Anda perlu memastikan bahwa detail penting sekecil apapun seperti favicon sudah Anda perhitungkan. Sangat mudah untuk menambahkan favicon ke dalam situs web. Namun, elemen kecil ini menunjukkan pendekatan komprehensif Anda pada desain dan perhatian pada pengguna. Apa Anda memiliki pertanyaan atau ingin membagikan pengalaman Anda dalam pembuatan favicon? Berikan komentar di bawah ini!

Kategori: Bagaimana Cara

Desain logo Anda sendiri sekarang

Mulai branding Anda dengan pembuat logo Logaster. Masukkan nama perusahaan Anda dan dapatkan paket branding profesional dalam 1 menit saja! Cobalah! Lebih mudah dari yang Anda bayangkan!