Cara Mudah Membuat Favicon Sendiri Untuk Blog atau Website

Cara Mudah Membuat Favicon Sendiri Untuk Blog atau Website

Membuat Favicon : Dalam tutorial kali ini gurublogger.id akan membahas trik untuk membuat favicon sendiri secara online untuk blog atau website.

Cara paling mudah untuk membuat favicon adalah dengan mengconvert logo blog menggunakan tools online (favicon generator), tapi bagaimana caranya?

Umumnya, file favicon berformat favicon.ico, tapi tau tidak kalau format dan ukuran favicon bisa beraneka macam?

Yuk simak penjelasan gurublogger.id untuk menjawab semua pertanyaan diatas !!

Favicon (Favorit Icon)

Kita tahu dan mengerti apa itu favicon, namun terkadang susah ketika diminta untuk menjelaskan :D

cara-membuat-favicon-blog

Apa Itu Favicon?

Favicon adalah singkatan dari Favorite Icon yaitu logo kecil yang merepresentasikan sebuah brand, blog maupun website dan sering terlihat di tab browser, di address bar, toolbar, browser history, dan tempat lainnya (kita menyebutnya icon).

Apa Fungsi Favicon?

Fungsi favicon adalah untuk memberikan legitimasi dan kesan profesional serta meningkatan kesadaran merek yang dalam dunia internet marketing disebut dengan branding

Selain itu, secara visual favicon memudahkan kita untuk dapat mengenali website yang berbeda ketika kita membukanya dalam jumlah banyak pada satu buah browser sekaligus

Format dan Ukuran Favicon

Standar format favicon adalah ICO dan PNG, format ICO dapat diterima oleh semua browser sedangkan untuk format PNG sendiri tidak support oleh browser internet explorer

Sedangkan standar ukuran favicon sendiri secara umum adalah sebagai berikut:

  1. 16 pixel x 16 pixel : untuk ukuran browser
  2. 32 pixel x 32 pixel : ukuran shortcut taskbar
  3. 96 pixel x 96 pixel : ukuran shortcut desktop
  4. 180 pixel x 180 pixel : ukuran Apple touch
  5. 300 pixel x 300 pixel : ukuran Squarespace
  6. 512 pixel x 512 pixel : ukuran WordPress

Karena ukurannya berbeda beda apakah artinya kita harus membuat favicon dengan banyak ukuran?Mari kita simak brief tentang favicon dari google developer berikut ini :

Favicon Guidelines https://developers.google.com

You must follow these guidelines to be eligible for a favicon next to your search results. Note that a favicon isn't guaranteed in search results even if all guidelines are met.

  • Both the favicon file and the home page must be crawlable by Google (that is, they cannot be blocked to Google).
  • Your favicon should be a visual representation of your website's brand, in order to help users quickly identify your site when they scan through search results.
  • Your favicon should be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files, of course, do not have a specific size.
  • Any valid favicon format is supported. Google will rescale your image to 16x16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16x16px favicon.
  • The favicon URL should be stable (don’t change the URL frequently).
  • Google will not show any favicon that it deems inappropriate, including pornography or hate symbols (for example, swastikas). If this type of imagery is discovered within a favicon, Google will replace it with a default icon.

Lihat tulisan yang dicetak tebal !!

Google akan mengubah ukuran gambar Anda menjadi 16x16px agar dapat digunakan dalam hasil penelusuran, jadi pastikan gambar tersebut tampak bagus dalam resolusi itu, Catatan: jangan menyediakan favicon dengan ukuran 16x16px 

Artinya? Secara tidak langsung kita diminta untuk menggunakan favicon dengan ukuran 48x48px, 96x96px, 144x144px

Pilih yang mana? Tentunya harus pilih salah satu :D Guru Blogger sendiri menggunakan ukuran favicon 48px X 48px

Contoh Favicon

Berikut ini adalah contoh favicon dengan berbagai penggunaan dan letaknya :contoh-letak-favicon

Di dalam browser sendiri favicon digunakan pada tabs, bookmark toolbar, history, favorite, address bar dlldan dari contoh favicon diatas ukurannya pun berbeda beda (belum termasuk favicon yang ada di hp dan komputer)

Bila ukuran lain dari favicon tidak dibuat (kita hanya memiliki yang .ico 16pxX16px) maka gambar akan di stretch menyesuaikan kontainer letak favicon, dapat dilihat pada contoh favicon yang di border warna hijau diatas

dan karena ukuran sebenarnya tidak besar maka ketika diregangkan gambar akan tampak sedikit buram

Guru blogger telah memilih beberapa contoh favicon yang teman teman bisa langsung gunakan untuk blog

Gambar huruf dibawah ini sudah berformat .ico dengan ukuran 48X48, klik kanan pada gambar huruf dan buka di tab baru untuk mendapatkan link favicon

contoh-favicon-huruf-a contoh-favicon-huruf-b contoh-favicon-huruf-c contoh-favicon-huruf-d contoh-favicon-huruf-e contoh-favicon-huruf-f contoh-favicon-huruf-g contoh-favicon-huruf-h contoh-favicon-huruf-i contoh-favicon-huruf-j contoh-favicon-huruf-k contoh-favicon-huruf-l contoh-favicon-huruf-m contoh-favicon-huruf-n contoh-favicon-huruf-o contoh-favicon-huruf-p contoh-favicon-huruf-q contoh-favicon-huruf-r contoh-favicon-huruf-s contoh-favicon-huruf-t contoh-favicon-huruf-u contoh-favicon-huruf-v contoh-favicon-huruf-w contoh-favicon-huruf-x contoh-favicon-huruf-y contoh-favicon-huruf-z

Masih kurang cocok dengan desain favicon huruf yang berwarna biru diatas? Sepertinya memang lebih baik membuat favicon sendiri !!

Cara Membuat Favicon Blog Secara Online

Terdapat banyak situs yang menyediakan jasa pembuatan favicon secara online Namun guru blogger hanya akan menunjukkan 1 tempat saja

Favicon Generators

Berikut ini adalah website favicon generator online terbaik yang ada di internet

Teman teman tinggal mengupload logo yang hendak dijadikan favicon

Tidak memakan waktu lama dan siapapun bisa menggunakan tools favicon generator

Favicon.io --> https://favicon.io

Contoh favicon huruf yang guru blogger tunjukkan diatas dibuat menggunakan favicon generator dari favicon.io Berikut ini langkah langkah membuat favicon secara online di favicon.io:

  1. Kunjungi favicon.io
  2. Pilih PNG ke ICO bila sudah memiliki gambar logo dengan format PNG
  3. Upload gambar logo kemudian edit sesuai selera
  4. Download hasilnya
Pilih PNG ke ICOcara-membuat-favicon-blog Uplaod Filenya, kemudian download cara-convert-png-menjadi-favicon

Bila ingin menggunakan huruf sebagai favicon, cara membuatnya adalah

  1. Kunjungi favicon.io
  2. Pilih Text ke ICO
  3. Ketik hurufnya kemudian edit warna dan tampilannya
  4. Download hasilnya

Pilih TEXT ke ICO

cara-membuat-favicon-blog

Masukkan Huruf, kemudian Download

cara-membuat-favicon-huruf

Cara Mengganti Favicon Blog

Karena blog yang guru blogger gunakan adalah blogger, maka tips mengganti favicon Nya pun khusus untuk blogger

Untuk teman teman pengguna blog dengan platform wordpress bisa membaca tutorial terkait wordpress

Mengganti Favicon Blogger Huruf B Oranye

Untuk mengganti favicon default blogger dengan favicon buatan sendiri caranya adalah:

  1. Login Ke Blogger
  2. Pilih tab Setting
  3. Dalam settingan Basic klik pada menu Favicon
  4. Upload Favicon kemudian Save

Untuk lebih jelasnya, ikuti langkah pada gambar berikut ini :

cara-mengganti-favicon-bloggercara-mengganti-favicon-blogger

Mudah bukan?

selamat belajar . . .