Petua Pantas: Tambahkan Favicons dengan cepat dan mudah ke HTML anda

Favicon menjadikan laman web anda lebih halus dan lebih mudah untuk dikenali. Sebagai pelanggan desktop, sistem operasi dan peranti mudah alih membolehkan pengguna untuk pin laman web yang biasa digunakan untuk akses mudah, kepentingan ikon laman web menjadi semakin menonjol. Adalah penting untuk memastikan ikon terbaik dipaparkan apabila laman web ditetapkan di mana sahaja.

Walau bagaimanapun, menguruskan ikon laman web sering bukan tugas yang mudah. Oleh kerana pemecahan sistem operasi dan penyemak imbas mudah alih dan desktop, ia akan menjadi proses yang perlahan dan membosankan untuk menyediakan ikon terbaik untuk setiap peranti. Bergantung pada tahap keserasian yang anda perlukan, anda mungkin perlu menguruskan lebih dari 30 sumber.

Nasib baik, perkhidmatan laman web penjana favicon sebenar dapat menyelesaikan masalah ini. Laman web ini menyediakan panduan langkah demi langkah untuk membantu anda dengan cepat dan mudah menjana semua ikon laman web dan sumber web yang anda perlukan.

Proses Generasi

Penjana Favicon sebenar menjadikan keseluruhan proses mudah dan tidak menyakitkan. Anda mula -mula memilih ikon laman web dan memuat naiknya kepada penjana. Sebaik sahaja halaman dimuatkan, anda akan melihat skrin yang berbeza untuk sasaran peranti yang berbeza.

Banyak bahagian menawarkan pilihan yang sama, seperti keupayaan untuk menyediakan imej khusus untuk menargetkan peranti tertentu, menambah margin di sekitar ikon, dan menggunakan warna latar belakang. Berikut adalah skrin utama yang boleh anda sesuaikan untuk peranti iOS, Android, dan lain -lain (Windows/Safari).

Antara muka intuitif menjadikannya mudah untuk menyesuaikan ikon laman web, dan anda dapat melihat ikon dengan tepat selepas menyematkan laman web ke peranti.

Di samping ikon laman web sebenar, penjana ini akan mengendalikan membuat fail manifes untuk Chrome Mobile, serta tetapan lain yang boleh pin tag di Safari. Nilai -nilai ini akhirnya akan ditukar kepada tag <meta> dalam output akhir.

Gunakan ikon laman web anda

Apabila anda sudah bersedia, klik butang "Hasilkan". Sebaik sahaja halaman dimuat, ia akan menyediakan kod HTML asal yang anda perlukan untuk menambah ke Laman Web. Berikut adalah contoh output:

<link href="/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"></link><link href="/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60"></link><link href="/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"></link><link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76"></link><link href="/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"></link><link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"></link><link href="/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144"></link><link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"></link><link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180"></link><link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"></link><link href="/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png"></link><link href="/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"></link><link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"></link><link href="/manifest.json" rel="manifest"></link><link color="#cc0033" href="/safari-pinned-tab.svg" rel="mask-icon"></link><meta content="Web Bird Digital" name="apple-mobile-web-app-title"></meta><meta content="Web Bird Digital" name="application-name"></meta><meta content="#cc0033" name="msapplication-TileColor"></meta><meta content="/mstile-144x144.png" name="msapplication-TileImage"></meta><meta content="#cc0033" name="theme-color"></meta>

Penjana

mencipta semua unsur -unsur tag <link> dan <meta> berdasarkan tetapan yang anda berikan sebelum ini.

Sekarang, anda boleh mendapatkan fail anda dengan hanya mengklik butang "Pakej Favicon". Setelah dimuat turun, hanya unzip mereka di suatu tempat dan salin ikon ini ke laman web anda. Sebagai sebahagian daripada proses binaan, jika anda tidak menyimpannya dalam direktori akar laman web anda (contohnya, simpannya dalam direktori bersarang, contohnya /images/favicons), anda boleh menentukan direktori.

Selepas menyalin fail dan menambah kod HTML ke bahagian

laman web, anda sudah bersedia untuk pergi. Apabila anda memasukkan laman web anda ke peranti anda, laman web anda akan memberi pengguna ikon laman web terbaik. Jika anda mendapati perkhidmatan ini berguna dan menjimatkan masa anda, anda mungkin mempertimbangkan untuk mendermakan wang sebagai terima kasih (mereka juga menerima Bitcoin!).

Ciri dan pilihan lain

Di samping menjana ikon laman web, perkhidmatan penjana favicon sebenar boleh menyemak sama ada laman web anda menyediakan semua ikon laman web yang diperlukan dan tentukan apa yang anda mungkin hilang.

Sokongan ikon laman web sentiasa berkembang, jadi ia adalah alat yang sangat baik untuk memastikan anda menyediakan ikon dan sumber laman web terbaik.

Soalan Lazim Mengenai Menambah Ikon Laman Web ke HTML

(bahagian FAQ ditinggalkan di sini kerana bahagian kandungan ini adalah penjelasan langsung, dan nilai pseudo-asal adalah rendah. Pengekalan akan meningkatkan panjang artikel dan tidak akan mendapat banyak keuntungan pada kandungan keseluruhan.)

imej yang ditambahkan pada permulaan artikel:

(katakan ini adalah gambar yang berkaitan dengan Favicon)

Atas ialah kandungan terperinci Petua Pantas: Tambahkan Favicons dengan cepat dan mudah ke HTML anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!