Cara membuat favicon .ico dari logo untuk websiteHow to make a favicon .ico from your logo for a website
Ikon kecil di tab browser membuat situs Anda mudah dikenali di antara banyak tab terbuka. Begini cara mengubah logo menjadi file favicon.ico berisi beberapa ukuran sekaligus, lalu memasangnya di situs.
The small icon in a browser tab makes your site easy to spot among many open tabs. Here is how to turn a logo into a favicon.ico file holding several sizes at once, then add it to your site.
Di halaman ini
Perhatikan deretan tab di browser Anda. Situs yang memiliki ikon kecil di sampingnya jauh lebih mudah ditemukan daripada situs yang hanya menampilkan ikon bawaan berwarna abu-abu. Ikon kecil itu disebut favicon, dan formatnya yang paling umum adalah file .ico.
Bagi pemilik toko online, usaha kecil, atau blog pribadi, favicon adalah sentuhan sederhana yang membuat situs tampak lebih profesional dan mudah dikenali.
Kenapa format ICO?
File .ico bisa menyimpan beberapa ukuran ikon dalam satu file. Browser dan sistem operasi akan memilih ukuran yang paling sesuai: ukuran kecil untuk tab, ukuran yang lebih besar untuk pintasan atau penanda halaman.
Siapkan logo terlebih dahulu
Favicon tampil sangat kecil, jadi logo perlu disederhanakan:
- Gunakan bentuk persegi. Logo yang memanjang akan tampak sangat kecil atau gepeng.
- Pilih bagian paling khas, misalnya huruf pertama nama usaha atau simbol logo, bukan logo lengkap dengan tulisan panjang.
- Gunakan PNG berlatar transparan bila memungkinkan, agar ikon menyatu dengan warna tab.
- Mulai dari gambar yang cukup besar, misalnya 512 × 512 piksel atau lebih.
Bila logo Anda belum persegi, potong dulu dengan Potong Gambar memakai rasio 1:1. Bila tidak ingin ada bagian yang terpotong, gunakan Ubah Ukuran Gambar dengan ukuran persegi, cara menyesuaikan Muat utuh, dan latar Transparan.
Langkah membuat favicon.ico
- Buka Ubah Format Gambar di KASKOW.
- Klik Pilih file atau seret dan lepas logo persegi Anda.
- Pada Ubah ke, pilih ICO.
- Pada Ukuran ikon, pilih Semua. Pilihan ini menyimpan 6 ukuran, yaitu 16, 32, 48, 64, 128, dan 256 piksel, dalam satu file .ico.
- Klik Ubah format, lalu klik Unduh.
- Ganti nama file hasil menjadi
favicon.ico.
Logo diproses di browser, jadi tidak diunggah ke server.
Memasang favicon di situs
Cara pemasangan bergantung pada cara situs Anda dibuat:
- Situs buatan sendiri: unggah
favicon.icoke folder utama situs, lalu tambahkan baris<link rel="icon" href="/favicon.ico">di bagian<head>setiap halaman. - Pembuat situs atau pengelola konten: cari pengaturan bernama "ikon situs", "favicon", atau sejenisnya, lalu unggah file .ico atau gambar persegi Anda.
Sebagian perangkat juga memakai ikon PNG berukuran lebih besar, misalnya 180 × 180 piksel untuk pintasan di layar utama ponsel. Buat versinya dengan Ubah Ukuran Gambar mode Piksel.
Memeriksa hasilnya
- Buka situs Anda di browser.
- Bila ikon lama masih tampil, muat ulang halaman secara paksa atau buka di jendela penyamaran. Browser sering menyimpan favicon lama cukup lama.
- Periksa di tab dengan latar terang dan gelap. Logo berwarna gelap bisa hilang di tab bertema gelap. Bila perlu, beri latar berwarna pada logo sebelum diubah.
Pertanyaan yang sering muncul
Bisakah memilih satu ukuran saja? Bisa. Pilih 16, 32, 48, 64, 128, atau 256 pada Ukuran ikon. Untuk favicon, Semua biasanya pilihan paling praktis.
Ikon tampak buram di tab. Logo terlalu rumit untuk ukuran 16 piksel. Sederhanakan, misalnya hanya memakai huruf pertama atau simbolnya.
Bisakah membuat ikon untuk aplikasi atau pintasan di komputer? Bisa. File .ico juga dipakai sebagai ikon pintasan dan aplikasi di Windows. Ukuran 256 piksel di dalam file akan dipakai untuk tampilan besar.
Saya ingin mencocokkan warna favicon dengan warna situs. Buka logo di Metadata & Warna Gambar untuk melihat palet warna dominan, lalu klik warna untuk menyalin kode HEX-nya.
Look at the row of tabs in your browser. Sites with a small icon next to their title are far easier to find than sites showing only the default grey icon. That small icon is called a favicon, and its most common format is an .ico file.
For online shop owners, small businesses and personal blogs, a favicon is a simple touch that makes a site look more professional and recognisable.
Why the ICO format?
An .ico file can store several icon sizes in one file. Browsers and operating systems pick the most suitable size: a small one for tabs, larger ones for shortcuts or bookmarks.
Prepare your logo first
A favicon is shown very small, so the logo needs simplifying:
- Use a square shape. A wide logo will look tiny or squashed.
- Pick the most distinctive part, such as the first letter of your business name or the logo symbol, not the full logo with long text.
- Use a PNG with a transparent background if possible, so the icon blends with the tab colour.
- Start from a reasonably large image, such as 512 × 512 pixels or more.
If your logo isn't square yet, crop it first with Crop Image using the 1:1 ratio. If you don't want anything cut off, use Resize Image with a square size, the Fit fit method and a Transparent background.
Steps to make favicon.ico
- Open Convert Image on KASKOW.
- Click Choose files or drag and drop your square logo.
- Under Convert to, choose ICO.
- Under Icon size, choose All. This stores 6 sizes, namely 16, 32, 48, 64, 128 and 256 pixels, in one .ico file.
- Click Convert, then click Download.
- Rename the output file to
favicon.ico.
The logo is processed in your browser, so it is not uploaded to a server.
Adding the favicon to your site
How you add it depends on how your site is built:
- A hand-built site: upload
favicon.icoto the site's root folder, then add the line<link rel="icon" href="/favicon.ico">in the<head>section of every page. - A site builder or content management system: look for a setting called "site icon", "favicon" or similar, then upload your .ico file or square image.
Some devices also use a larger PNG icon, such as 180 × 180 pixels for home screen shortcuts on phones. Make that version with Resize Image in Pixels mode.
Checking the result
- Open your site in a browser.
- If the old icon still shows, force-reload the page or open it in a private window. Browsers often keep an old favicon for quite a while.
- Check it on light and dark tabs. A dark logo can disappear on a dark-themed tab. If needed, give the logo a coloured background before converting.
Frequently asked questions
Can I choose just one size? Yes. Choose 16, 32, 48, 64, 128 or 256 under Icon size. For a favicon, All is usually the most practical choice.
The icon looks blurry in the tab. The logo is too detailed for 16 pixels. Simplify it, for example by using only the first letter or the symbol.
Can I make an icon for an app or a desktop shortcut? Yes. .ico files are also used as shortcut and application icons on Windows. The 256-pixel size inside the file is used for large views.
I want the favicon colours to match my site. Open the logo in Image Metadata & Colors to see its dominant colour palette, then click a colour to copy its HEX code.