Generator Favicon

Buat favicon dari huruf, emoji, atau gambar Anda sendiri, lalu unduh semua file yang dibutuhkan browser dan ponsel, yaitu ICO, PNG, SVG, dan web manifest, dalam satu file zip gratis. Tanpa pendaftaran: gambar Anda tidak pernah meninggalkan browser.
Generator Favicon
Huruf pertamanya menjadi ikon. Juga dipakai di web manifest.
Kosongkan untuk memakai huruf pertama dari nama, atau ketik satu atau dua karakter atau sebuah emoji.
Bentuk
16 px
32 px
48 px
180 px

File favicon Anda

  • favicon.ico16, 32, dan 48 px dalam satu file, untuk semua browser.
  • favicon.svgTajam di ukuran apa pun, untuk browser modern.
  • favicon-16x16.png, favicon-32x32.png, favicon-48x48.pngUkuran kecil dalam format PNG.
  • apple-touch-icon.png180 × 180 px, untuk layar utama iPhone dan iPad.
  • android-chrome-192x192.png, android-chrome-512x512.pngUntuk Android dan aplikasi web yang terinstal.
  • site.webmanifestNama situs dan ikon untuk Android.
  • head-tags.htmlTag di bawah ini, untuk ditempel ke <head> halaman.

Tambahkan ikon ke situs Anda

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="application-name" content="Acme Studio">
<!-- Dibuat dengan Elfsight: https://elfsight.id/tools/favicon-generator/ -->

  1. Klik Salin kode di atas untuk menyalinnya.
  2. Ekstrak file dan unggah ke folder root situs Anda, sehingga yoursite.com/favicon.ico membuka ikon tersebut.
  3. Buka file HTML halaman atau template yang dipakai setiap halaman.
  4. Tempel kode di dalam <head>, sebelum </head> penutup.
  5. Simpan dan unggah halamannya.

Tempat mengunggah favicon di platform Anda

Sebagian besar pembuat situs menambahkan tag favicon untuk Anda. Unggah gambar persegi di tempat yang ditunjukkan di bawah ini, bukan dengan mengedit kode halaman.

WordPress

  1. Siapkan PNG persegi minimal 512 × 512 px.

  2. WordPress 6.5 atau lebih baru: buka Settings → General dan klik Choose a Site Icon.

  3. Versi lama: buka Appearance → Customize → Site Identity dan pilih Site Icon.

  4. Pilih gambar Anda lalu simpan.

Panduan resmi:WordPress: membuat favicon

Wix

  1. Favicon kustom memerlukan paket Premium dan domain yang terhubung, dan situs harus sudah dipublikasikan.

  2. Di dasbor Anda, buka Settings → Website settings.

  3. Di bawah Favicon, klik Upload Image dan pilih file Anda.

  4. Simpan perubahan Anda.

Panduan resmi:Wix: menambahkan favicon

Shopify

  1. Di admin Shopify Anda, buka Online Store → Themes dan klik Edit theme.

  2. Buka Theme settings (ikon roda gigi), lalu Logo atau Favicon, tergantung tema Anda.

  3. Di bawah Favicon image, klik Select image dan pilih file Anda.

  4. Klik Save. Favicon tampil di toko langsung Anda, bukan di pratinjau editor tema.

Panduan resmi:Shopify: menambahkan favicon

Squarespace

  1. Buka panel Favicon di pengaturan situs Anda.

  2. Unggah PNG berukuran antara 100 × 100 dan 300 × 300 px, di bawah 100 KB. File ICO tidak diterima.

  3. Jika mau, tambahkan versi mode gelap.

  4. Klik Save.

Panduan resmi:Squarespace: menambahkan favicon

Webflow

  1. Buka Site settings → General → Icons.

  2. Klik Upload icon dan pilih satu gambar persegi. Webflow membuat ukuran lainnya dari gambar itu.

  3. Klik Apply.

  4. Publikasikan situs.

Panduan resmi:Webflow: favicon dan webclip

HTML

  1. Unggah file yang dihasilkan ke folder root situs Anda.

  2. Tempel tag <link> yang dihasilkan di dalam <head> pada setiap halaman, atau setidaknya di beranda.

  3. Pastikan file dapat dibuka di browser, misalnya /favicon.ico.

  4. Bersihkan cache browser Anda untuk melihat ikon baru.

Panduan resmi:Google: favicon di hasil pencarian

Mengapa Google tidak menampilkan favicon Anda

Google menampilkan favicon di samping hasil Anda hanya jika dapat menemukan dan mengambilnya dari beranda Anda. Periksa poin-poin berikut dari panduan favicon Google:

  • Tag ada di beranda. Google membaca tag <link rel="icon"> di <head> beranda Anda. shortcut icon, apple-touch-icon, dan apple-touch-icon-precomposed juga berfungsi.

  • Berbentuk persegi. 1:1, minimal 8 × 8 px. Google menyarankan ukuran lebih dari 48 × 48 px agar tampak tajam.

  • Formatnya didukung: ICO, PNG, GIF, JPEG, BMP, PPM, atau TIFF. SVG tidak ada dalam daftar Google, jadi tambahkan ICO atau PNG di samping ikon SVG.

  • Google dapat meng-crawl-nya. robots.txt tidak boleh memblokir file ikon (untuk Googlebot-Image) atau beranda Anda (untuk Googlebot).

  • URL-nya tetap sama. Jangan sering mengubah alamat favicon.

  • Satu favicon per nama host. example.com dan shop.example.com dapat memiliki ikon berbeda. example.com/shop tidak bisa; ia memakai ikon situs.

  • Mewakili merek Anda. Google mengganti ikon yang tidak pantas dengan ikon default.

Perubahan muncul setelah Google meng-crawl ulang beranda Anda, yang dapat memakan waktu berhari-hari hingga berminggu-minggu. Anda dapat meminta pengindeksan beranda di alat URL Inspection Search Console. Beberapa pembuat situs masih menyebutkan bahwa ukurannya harus kelipatan 48 px. Itu aturan lama Google, dan ukuran tersebut masih berfungsi dengan baik.

Cara menambahkan favicon ke situs Anda

  1. Rancang ikonnya

    Gunakan satu atau dua huruf atau sebuah emoji, atau unggah logo persegi.

  2. Unduh file zip

    Isinya favicon.ico, ukuran PNG untuk ponsel, SVG, web manifest, dan tag HTML.

  3. Unggah file-nya

    Letakkan file di folder root situs Anda dan tempel tag ke dalam <head>. Pembuat situs biasanya memiliki kolom favicon, jadi unggah PNG 512 px di sana.

Pertanyaan yang sering diajukan

Alat SEO & schema lainnya

Generator Meta Tag

Tag title, description, Open Graph, dan Twitter sekaligus.Generator Meta Tag