Langkau ke kandungan
ToolMug

Gunakan ↑ ↓ untuk bergerak, Enter untuk membuka, Esc untuk menutup.

Penjana Favicon

Buat favicon lengkap daripada satu huruf, emoji atau logo anda. Muat turun favicon.ico, ikon Apple touch, ikon Android/PWA, ikon SVG dan site.webmanifest yang siap, berserta HTML tepat untuk ditampal ke dalam head halaman anda.

Berjalan dalam pelayar anda — apa yang anda masukkan tidak dimuat naik

Pratonton

16
32
64
128

Fail yang disertakan: favicon.ico · apple-touch-icon.png · icon-192.png · icon-512.png · icon.svg · site.webmanifest

Cara menggunakan

  1. Pilih Teks / emoji dan taip satu hingga tiga aksara, atau pilih Imej dan muat naik logo anda (SVG atau PNG segi empat sama sekurang-kurangnya 512 px paling sesuai).
  2. Pilih warna dan bentuk — segi empat, bucu bulat atau bulatan.
  3. Semak pratonton pada 16, 32, 64 dan 128 px; saiz kecil menunjukkan sama ada reka bentuk masih boleh dibaca.
  4. Muat turun ZIP, muat naik fail ke folder akar laman web anda dan tampal HTML ke dalam head.

Penerangan pilihan

favicon.ico
Mengandungi versi 16, 32 dan 48 px untuk pelayar, penanda buku dan pintasan Windows.
apple-touch-icon.png
180 × 180 px dengan latar belakang padu, digunakan apabila seseorang menambah laman anda ke skrin utama iPhone atau iPad.
icon-192.png / icon-512.png
Dirujuk daripada site.webmanifest untuk skrin utama Android dan aplikasi web yang boleh dipasang.
icon.svg
Ikon boleh skala untuk pelayar moden, disertakan apabila sumbernya teks atau fail SVG.

Kod HTML

Selepas memuat naik fail ke folder akar laman web anda, tambah kod ini ke dalam head setiap halaman:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Soalan lazim

Fail manakah yang sebenarnya saya perlukan?

favicon.ico dalam folder akar laman meliputi semua pelayar. Tambah apple-touch-icon.png untuk iOS, dan manifest dengan ikon 192/512 jika anda mahukan ikon yang betul apabila laman dipasang atau disemat pada Android.

Mengapa favicon saya kelihatan kabur pada 16 px?

Butiran halus hilang pada 16 × 16 piksel. Gunakan huruf tebal atau tanda logo yang dipermudah dan bukannya logo penuh bersama teks.

Saya sudah mengemas kini favicon tetapi masih melihat yang lama.

Pelayar menyimpan favicon dalam cache dengan agresif. Muat semula halaman secara paksa, atau tambah pertanyaan versi seperti /favicon.ico?v=2 pada tag link.

Bolehkah saya menggunakan emoji sebagai favicon?

Boleh. Emoji dilukis dengan fon emoji sistem anda, jadi hasilnya sepadan dengan apa yang anda lihat dalam pratonton.

Privasi

Alat ini berjalan sepenuhnya dalam pelayar anda. Fail dan teks anda diproses pada peranti anda dan tidak pernah dimuat naik ke pelayan kami.

Alat berkaitan