Icon Workshop
Web yang lebih kecil,
lebih cerah.

Satu imej. Setiap skrin.

Penjana favicon dan ikon aplikasi

Ikon kecil. Kesan yang berkekalan.

Tukar imej kepada favicon laman web, ikon aplikasi dan pek ikon sedia guna.

PNG ICO PWA

Cipta pek ikon anda

Tukar imej kepada favicon, ikon aplikasi dan banyak lagi.

  1. 1Muat naik
  2. 2Laraskan
  3. 3Muat turun
Menunggu gambar
Letakkan imej anda di sini

PNG, JPG atau SVG · Sehingga 5 MB

Imej anda diproses dalam pelayar web anda. Ia tidak pernah meninggalkan peranti anda.

16 × 16
32 × 32
48 × 48
180 × 180
192 × 192
512 × 512

Laraskan ikon anda

Perhalusi rupa agar sesuai dengan setiap skrin.

6%
0%

Lihat semasa digunakan(muat naik untuk pratonton ikon)

Tab pelayar

×
https://example.com

Skrin utama iOS

Ikon anda di sini

PWA / Android

Ikon anda di sini

Cara membuat favicon dalam 3 langkah

Dari satu imej kepada satu set penuh ikon.

1Muat naik imej anda

Mulakan dengan logo jelas atau simbol ringkas. Imej segi empat sama memberikan hasil terbaik.

2Laraskan dan pratonton

Pilih padanan, latar belakang dan ruang dalaman. Semak hasil pada saiz kecil.

3Muat turun dan tambah pada laman web anda

Eksport pek ikon, muat naik fail dan tambah pautan ikon pada HTML anda.

Satu logo, bersedia untuk setiap skrin

Lihat di mana fail yang dihasilkan digunakan.

Favicon laman web

Laman web saya×
Contoh favicon laman web 16 × 1616 × 16
Contoh ikon tab pelayar 32 × 3232 × 32

Ikon 16 × 16 dan 32 × 32 membantu pelawat mengenali laman anda dalam tab dan penanda buku.

iPhone & iPad

Laman web saya
iPhone & iPad · 180 × 180180 × 180

Gunakan ikon apple-touch 180 × 180 apabila laman ditambah pada skrin utama.

PWA & Android

Pasang aplikasi
PWA & Android · 192 × 192192 × 192
PWA & Android · 512 × 512512 × 512

192 × 192 dan 512 × 512 ialah saiz imej lazim dalam manifes aplikasi web.

Apakah kandungan pek ikon anda?

Set ikon sedia guna untuk semua platform.

  • favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
  • apple-touch-icon.png180 × 180
  • icon-192.png192 × 192
  • icon-512.png512 × 512
  • site.webmanifestManifes aplikasi web

Tambah ikon pada laman web anda

Letakkan pautan ini dalam HTML <head> anda.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Soalan-soalan yang kerap ditanya

Apakah favicon?

Imej kecil yang mewakili laman web dalam tab pelayar dan penanda buku.

Format imej apa yang perlu saya gunakan?

PNG merupakan pilihan yang baik untuk logo yang telus. JPG, WebP dan SVG selamat juga boleh digunakan.

Bolehkah saya menggunakan imej bukan persegi?

Ya. Pilih 'Muatkan', 'Pangkas' atau 'Regangkan' untuk mencipta ikon segi empat sama.

Mengapa beberapa saiz ikon dimasukkan?

Pelayar dan skrin utama menggunakan saiz berbeza. Ikon kecil kekal jelas dalam tab; ikon besar sesuai untuk pintasan aplikasi.