3 Cara Membuat Ikon Favicon Anda Sendiri

Isi kandungan:

3 Cara Membuat Ikon Favicon Anda Sendiri
3 Cara Membuat Ikon Favicon Anda Sendiri

Video: 3 Cara Membuat Ikon Favicon Anda Sendiri

Video: 3 Cara Membuat Ikon Favicon Anda Sendiri
Video: Cara Melihat Recent File, Folder, Aplikasi, dan Dokumen 2024, April
Anonim

Favicon adalah gambar kecil yang hebat di sebelah bar alamat anda di penyemak imbas anda. Inilah yang membezakan laman web anda di tab penanda halaman dan boleh digunakan untuk meningkatkan kesedaran jenama. Sekiranya anda mempunyai laman web tetapi tidak pernah mempertimbangkan untuk membuat favicon, anda harus memikirkan semula keputusan anda. Semakin lama, pembangun perisian menggunakan favicon untuk berbagai aspek aplikasi mereka, seperti ikon skrin utama pada tablet. Nasib baik, merancang, membuat, dan melaksanakan favicon adalah sesuatu yang hampir semua orang dapat lakukan sekiranya mereka mengikuti langkah yang betul.

Langkah-langkah

Kaedah 1 dari 3: Merancang Favicon Anda

Buat Ikon Favicon Anda Sendiri Langkah 1
Buat Ikon Favicon Anda Sendiri Langkah 1

Langkah 1. Buat favicon yang mewakili laman web anda

Jenis laman web yang anda miliki harus menentukan rupa favicon anda. Cubalah merancang sesuatu yang sesuai dengan imej jenama anda dan yang akan dikenali dan tidak dapat dilupakan oleh orang lain. Favicon anda akan menjadi perkara pertama yang dilihat orang ketika mereka melihat tab di penyemak imbas mereka dan juga akan muncul di penanda buku orang.

  • Sebagai contoh, jika anda mempunyai laman web makanan, memilih favicon yang mempunyai buah atau sayur sebagai reka bentuknya mungkin menjadikannya lebih berkesan.
  • Sekiranya laman web anda adalah untuk firma guaman atau syarikat pelaburan, favicon tradisional dan ramping adalah yang terbaik.
  • Sekiranya laman web anda ditujukan untuk orang muda, cuba buat favicon yang suka bermain dan berwarna-warni.
Buat Ikon Favicon Anda Sendiri Langkah 2
Buat Ikon Favicon Anda Sendiri Langkah 2

Langkah 2. Tentukan sama ada anda mahukan latar belakang yang telus

Sekiranya anda tidak menetapkan latar belakang, maka itu akan berwarna putih, yang mungkin tidak mematuhi jenama anda. Latar belakang yang telus akan mengambil warna penyemak imbas seseorang dan kelihatan lebih kemas dalam beberapa kes. Dalam kes lain, mempunyai warna untuk latar belakang akan membuat huruf atau grafik latar depan muncul. Tentukan apa yang terbaik untuk reka bentuk anda dan ingatlah semasa anda membuatnya.

Favicon yang paling asas ialah persegi 16x16 dan mempunyai warna latar

Buat Ikon Favicon Anda Sendiri Langkah 3
Buat Ikon Favicon Anda Sendiri Langkah 3

Langkah 3. Buat favicon yang senang dibaca

Oleh kerana gambar favicon yang akan anda gunakan kecil, penting untuk anda menyebarkan jenama anda tanpa membingungkan pengunjung anda. Favicon yang sukar dibaca meninggalkan kesan negatif dan boleh menimbulkan persoalan di fikiran pengunjung mengenai kualiti kerja yang dapat anda berikan. Gambar dan logo yang terlalu rumit tidak kelihatan baik apabila dikurangkan menjadi 16x16 atau 32x32 piksel.

  • Sekiranya logo yang ada terlalu rumit, maka anda boleh menggunakan taktik untuk mempermudahnya, sehingga dapat dikenali pada ukuran favicon. Gunakan inisial dan bukannya menunjukkan keseluruhan nama syarikat, atau reka ikon sederhana daripada menggunakan gambar.
  • Sekiranya anda sudah mempunyai logo ringkas, anda boleh mengecilkan gambar dan menetapkannya sebagai favicon anda. Anda mungkin perlu mengubahnya sebelum menukarnya menjadi fail ikon.
  • Anda juga boleh menggunakan gambar objek yang menggambarkan tema keseluruhan laman web anda.
Buat Ikon Favicon Anda Sendiri Langkah 4
Buat Ikon Favicon Anda Sendiri Langkah 4

Langkah 4. Buat favicon yang menyenangkan secara estetik

Struktur favicon anda disebut bentuknya. Favicons biasanya berbentuk, seperti bulatan atau persegi. Semasa anda merancang favicon anda, secara amnya lebih baik jika ia dapat dimasukkan ke dalam salah satu bentuk asas ini kerana bentuk berbentuk bebas seringkali menjadi kacau atau keliru pada 16x16 piksel. Aspek penting lain dalam reka bentuk anda dipanggil kesatuan estetik. Kesatuan estetik merangkumi perincian dan ukuran komponen yang berbeza dalam favicon anda dan bagaimana favicon anda seimbang. Semakin seragam perinciannya, semakin nampak padu favicon anda. Contohnya, menggunakan jenis atau ukuran fon yang berbeza dalam favicon anda tidak menyenangkan dan boleh membuat favicon anda kelihatan keliru atau tidak kemas.

  • Contoh lain dari kesatuan estetik ialah mengekalkan sudut bulat di seluruh bentuk pada favicon anda.
  • Contoh yang baik dari ikon yang telah berubah bentuk adalah favicon Google. Ia telah berubah dari segi empat sama menjadi bulatan.
Buat Ikon Favicon Anda Sendiri Langkah 5
Buat Ikon Favicon Anda Sendiri Langkah 5

Langkah 5. Gunakan warna yang sepadan dengan jenama anda

Apabila anda membuat favicon anda, anda harus membuatnya dalam kedalaman warna 8 bit (256 warna) atau 24 bit (16.7 juta warna), kerana ini akan berfungsi pada penyemak imbas moden. Pastikan warna yang anda pilih boleh didapati di tempat lain di laman web anda atau ada kaitan dengan jenama anda. Favicon dengan warna yang tidak terdapat di laman web, logo, atau aplikasi anda tidak akan dapat dilupakan, dan orang tidak akan dapat mengaitkan ikon dengan jenama anda.

  • Beberapa penggunaan kreatif warna favicon termasuk GitHub yang mengubah warna bergantung pada status sistem anda dan Trello, yang berubah bergantung pada warna latar belakang anda.
  • Warna yang paling biasa digunakan dalam favicon adalah merah dan biru.
Buat Ikon Favicon Sendiri Langkah 6
Buat Ikon Favicon Sendiri Langkah 6

Langkah 6. Pertimbangkan khalayak anda semasa merancang favicon

Selain daripada mengenal pasti jenama anda, favicon anda perlu kelihatan menarik bagi pengunjung anda. Orang dengan selera, minat, dan norma masyarakat yang berbeza akan melihat ikonologi yang berbeza dari perspektif yang berbeza. Perbezaan budaya wujud dalam masyarakat kita dan boleh membingungkan atau menghalau penonton yang ingin anda tarik.

Contohnya, Mac Os X menggunakan setem yang merupakan simbol universal untuk mel. Menggunakan peti mel tidak akan berkesan kerana peti mel berbeza di pelbagai tempat di dunia

Buat Ikon Favicon Anda Sendiri Langkah 7
Buat Ikon Favicon Anda Sendiri Langkah 7

Langkah 7. Dapatkan pendapat rakan dan rakan sekerja

Walaupun tidak begitu intensif grafik, favicon adalah bahagian penting dari jenama anda. Sebagai contoh, fikirkan laman web kegemaran anda seperti Twitter, Gmail, Facebook, atau wikiHow, dan seberapa banyak anda mengaitkan favicon dengan jenama. Sekiranya anda tidak berminat untuk membuat reka bentuk, atau anda merasa bingung dengan jenis reka bentuk apa yang harus anda miliki untuk laman web anda, berunding dengan rakan yang berminat untuk merancang atau yang bekerja dalam reka bentuk grafik.

  • Tanyakan di rangkaian rakan anda untuk melihat apakah ada yang dapat memberikan nasihat reka bentuk secara percuma.
  • Syarikat yang lebih besar mempunyai pereka grafik dalaman yang dapat membuat gambar favicon.

Kaedah 2 dari 3: Membuat Favicon Anda

Buat Ikon Favicon Sendiri Langkah 8
Buat Ikon Favicon Sendiri Langkah 8

Langkah 1. Gunakan perisian penyuntingan foto untuk membuat favicon anda

Anda boleh menggunakan perisian penyuntingan foto seperti Adobe Photoshop atau Illustrator untuk membuat gambar untuk favicon anda. Aplikasi perisian ini juga memungkinkan anda mengubah ukuran dan mengeksport gambar dalam format yang tepat. Beberapa perisian membolehkan anda membuat favicon anda dengan tangan.

  • Terdapat juga program penyuntingan khusus favicon yang boleh anda temui dalam talian.
  • Gunakan mesin carian dan taipkan "editor favicon."
  • Jadikan kanvas anda berukuran 512x512 piksel kerana bilangan ini dipecah menjadi ukuran favicon yang paling sesuai dan masih cukup besar untuk anda edit dengan berkesan.
  • Perisian penyuntingan foto popular lain termasuk GIMP, PhotoScape, dan Paint. NET.
  • Semasa menggunakan perisian ini, anda tidak dapat mengedit fail.ico secara langsung, tetapi anda boleh menggunakan fail.png,.jpg, atau-g.webp" />
Buat Ikon Favicon Sendiri Langkah 9
Buat Ikon Favicon Sendiri Langkah 9

Langkah 2. Ubah saiz dan simpan favicon anda

32x32 px adalah ukuran item desktop Windows sementara 16x16 px adalah ukuran favicon di tab penyemak imbas anda. Selepas anda membuat favicon anda dalam format yang lebih besar, penting untuk mengurangkan saiznya supaya anda dapat melihat bagaimana penampilannya di penyemak imbas orang. Sekiranya tidak dapat dibaca atau tidak menyenangkan secara estetik, mulakan semula reka bentuk asal anda. Fikirkan platform yang kemungkinan besar akan digunakan oleh laman web atau aplikasi anda dan kemudian buat favicon untuk merangkumi semua asas anda.

  • Penting untuk diperhatikan bahawa perkakasan dan perisian yang berbeza menggunakan saiz favicon yang berbeza.
  • Beberapa saiz favicon lain termasuk 57x57px untuk skrin utama iOS standard, 72x72px untuk iPad, 96x96px untuk Google TV, 128x128px untuk Kedai Web Chrome dan 195x195px untuk Opera Speed Dial.
  • Sekiranya anda ingin merangkumi semua asas anda, anda boleh membuat versi favicon anda dalam setiap ukuran ini.
  • Simpan versi favicon anda yang berasingan, supaya anda tidak kehilangan kerja yang telah anda lakukan.
Buat Ikon Favicon Anda Sendiri Langkah 10
Buat Ikon Favicon Anda Sendiri Langkah 10

Langkah 3. Gabungkan fail anda menggunakan penukar

Perkara hebat mengenai fail.ico ialah anda boleh menggabungkan lebih daripada satu fail untuk membuatnya. Ini berguna kerana penyemak imbas dan perisian yang berbeza akan menginginkan favicon bersaiz berbeza. Untuk memastikan favicon anda kelihatan baik di semua platform yang berbeza, ubah fail anda menggunakan penukar dalam talian. Ketik "penukar ikon" ke dalam enjin carian kegemaran anda untuk mencari aplikasi dalam talian percuma untuk melakukan ini. Simpan fail yang digabungkan sebagai "favicon.ico."

  • Anda juga dapat menggunakan program seperti GIMP yang mempunyai fitur bawaan, atau memuat turun plugin yang disebut ICO FORMAT ke Adobe Photoshop.
  • Buat folder baru supaya anda dapat menyimpan favicon atau karya baru yang sedang dijalankan.
  • Ketik ".ico converter" atau "favicon generator" di mesin carian untuk mencari alat yang berbeza yang boleh anda gunakan.

Kaedah 3 dari 3: Melaksanakan Favicon Anda

Buat Ikon Favicon Anda Sendiri Langkah 11
Buat Ikon Favicon Anda Sendiri Langkah 11

Langkah 1. Muat naik favicon anda jika anda menggunakan penyunting laman web

Banyak penyunting laman web dilengkapi dengan borang terbina dalam yang membolehkan anda memuat naik favicon ke laman web anda secara automatik. Sekiranya anda menggunakan penyunting laman web yang memiliki bawaan ini, cari pilihan yang mengatakan "Muat Naik Favicon" atau "Tambah Favicon" di menu tetapan laman web anda. Pilih fail favicon.ico anda dan muat naik ke laman web anda.

Sekiranya anda tidak dapat mencari tempat untuk memuat naik favicon anda di editor laman web anda, anda harus melakukannya secara manual

Buat Ikon Favicon Sendiri Langkah 12
Buat Ikon Favicon Sendiri Langkah 12

Langkah 2. Muat naik fail ke direktori root laman web anda

Sekiranya laman web anda menyokong Protokol Pemindahan Fail atau FTP, maka anda boleh menggunakan klien FTP anda untuk memuat naik fail favicon.icon baru ke direktori root (indeks) anda. Sekiranya tidak, anda mesti pergi ke halaman web host anda dan memuat naik gambar secara manual. Ingatlah untuk mengganti fail favicon.ico yang ada dengan fail baru anda.

Buat Ikon Favicon Sendiri Langkah 13
Buat Ikon Favicon Sendiri Langkah 13

Langkah 3. Tambahkan fail ke tajuk anda

Cari tempat di mana anda boleh mengakses fail PHP dan CSS untuk laman web anda. Pergi ke fail header.php laman web anda dan edit. Di bawah jenis teg,"

  • Ini harus menghubungkan laman web anda ke favicon anda.

    Kerana anda menggunakan PHP, ini bermaksud bahawa mana-mana laman web yang menggunakan fail tajuk anda sekarang akan mempunyai favicon yang sama

    Buat Ikon Favicon Anda Sendiri Langkah 14
    Buat Ikon Favicon Anda Sendiri Langkah 14

    Langkah 4. Muat semula penyemak imbas anda

    Setelah selesai memuat naik favicon, anda boleh memuat semula penyemak imbas anda untuk melihat gambar baru anda di sebelah bar alamat. Untuk pergi terus ke gambar favicon anda yang dikemas kini, ketik, "https://www.yourdomain.com/favicon.ico."

    • Sekiranya favicon anda tidak muncul pada mulanya, anda mungkin perlu menetapkan semula cache penyemak imbas anda.
    • Untuk mengosongkan cache anda, pergi ke tetapan penyemak imbas anda dan hapus Fail, Cookie, dan Sejarah Internet Sementara anda.

Disyorkan: