Ukuran favicon apa sing kudu sampeyan butuhake ing 2026? Set sing ideal

Ing 2026 set favicon sing ideal yaiku: favicon.ico sing isine gambar 16, 32 lan 48 px, PNG 96x96 (kanggo Google Search), favicon SVG opsional, apple-touch-icon.png 180x180, lan PNG 192x192 lan 512x512 (plus maskable 512) sing dideklarasikake ing web app manifest. Ubin Windows lan ukuran Apple lawas mung dibutuhake yen sampeyan kudu ndhukung piranti sing lawas banget. Kabeh ing ngisor iki njlentrehake sebabe, kanthi tabel ukuran, HTML sing siap dienggo, lan kesalahan umum sing kudu dihindari.

Jaman biyen lanskap favicon iku ruwet: saben browser lan sistem operasi njaluk ukuran dhewe-dhewe, mula tuwuh blok <head> sing dawane 20 baris lan kondhang kuwi. Saiki biasane kabeh kuwi wis ora kepenake. Browser modern bisa nyekalake siji ikon apik, iOS mung njaluk siji ukuran, lan Android maca manifest. Artikel iki misahake endi sing bener-bener dibutuhake lan endi sing mung apik yen ana.

Wangsulan cekak: set file favicon sing ideal

• favicon.ico (16, 32, 48 px ing siji file) ing root situs. Browser, feed reader, lan akeh piranti isih njaluk /favicon.ico kanthi otomatis.
• favicon.svg (opsional nanging disaranake) kanggo tampilan landhep ing ukuran apa wae lan dhukungan dark mode.
• PNG 16x16, 32x32 lan 96x96 minangka fallback eksplisit. Versi 96 px mbiyantu Google Search, sing mbutuhake kelipatan 48 px.
• apple-touch-icon.png ukuran 180x180, opak, tanpa transparansi.
• PNG 192x192 lan 512x512 ing manifest.json, plus ikon maskable 512x512 kanggo Android.
• Tag meta theme-color kanggo mewarnai UI browser ing seluler.
• Ubin Windows (70, 150, 310 px) karo browserconfig.xml mung kanggo situs sing dipin ing Windows lawas lan IE11.

Tabel ukuran favicon: fungsi, jeneng file lan prioritas

Gunakna tabel iki minangka daftar cek. "Wajib" tegese situs biasa bakal katon rusak utawa durung rampung tanpa iku; "Disaranake" tegese ana paningkatan kualitas sing jelas; "Opsional" tegese kanggo kasus khusus utawa lawas.

favicon.ico: 16, 32 lan 48 px ing siji file

File ICO iku wadhah sing isine sawetara bitmap. favicon.ico sing apik ngemot gambar 16x16, 32x32 lan 48x48 supaya browser utawa OS bisa milih sing paling cocog. Selehna ing root domain sampeyan (https://example.com/favicon.ico). Sanajan HTML sampeyan nuding menyang panggonan liya, akeh crawler, RSS reader lan browser lawas isih njaluk URL persis kuwi, mula yen file iku ana, log sampeyan ora kebak 404.

Aja mung ngganti jeneng PNG dadi .ico. Umume browser bisa nampa, nanging sawetara piranti nolak lan sampeyan kelangan kauntungan multi-resolusi. Ekspor ICO sing asli.

Favicon PNG: 16, 32 lan 96 px

Link PNG kanthi sizes eksplisit ngidini browser milih bitmap paling apik tanpa kudu mbaca ICO. Ing praktik, 32x32 wis nyukupi tab high-DPI, lan 16x16 saiki meh keluwihan. Ukuran 96x96 pantes ditambahake amarga Google Search nampilake favicon ing jejere asil lan mbutuhake ikon persegi kanthi ukuran kelipatan 48 px (48x48, 96x96, 144x144 lan sakteruse). File 96 px menehi Google sumber sing luwih landhep tinimbang 48 px nalika dikecilake kanggo asil ing seluler.

Tip desain: ing 16 px, detail alus ilang. Gunakna wangun sing kandel lan prasaja, kontras dhuwur, lan teks sithik utawa ora ana babar pisan. Sampeyan bisa nyunting lan pratinjau ikon sampeyan ing editor MakeFav sadurunge ngekspor.

Favicon SVG lan dark mode

Favicon SVG iku siji file cilik sing tetep landhep ing kapadhetan layar apa wae. Browser basis Chromium lan Firefox ndhukung. Dhukungan Safari biyen winates, mula aja mung ngandelake SVG: tetepna fallback ICO lan PNG.

Kauntungan paling gedhe yaiku tema. Amarga SVG bisa ngemot CSS, sampeyan bisa nyesuekake ikon karo skema warna pangguna nganggo prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Elinga yen media query kuwi nuduhake tema browser utawa OS, sing dienggo bar tab. Iku ora ngetutake tombol ganti tema ing situs web sampeyan dhewe.

Siji keanehan sing wis dikenal: yen ICO lan SVG kalebu ing dhaptar, Chrome bisa milih ICO. Yen ICO dideklarasikake nganggo sizes="32x32" lan SVG didhaftar sawise iku, Chrome bakal luwih milih SVG, kaya sing ditampilake ing kode ing ngisor.

Apple touch icon: 180x180 lan ukuran lawas

Nalika pangguna nambahake situs sampeyan menyang layar ngarep iOS utawa iPadOS, Safari nggunakake apple-touch-icon. Saiki siji PNG 180x180 px wis cukup: iOS nyekalake kanggo piranti lawas lan iPad. Jenengana apple-touch-icon.png lan selehna ing root; iOS malah nggoleki file kuwi kanthi standar yen ora ana tag link.

Aturan kanggo ikon Apple:

• Tanpa transparansi. iOS ngisi piksel transparan nganggo warna ireng, mula logo transparan asring malih dadi gumpalan ireng. Tambahna warna latar sing solid.
• Tanpa pojok bunder. iOS nrapake topeng bunder dhewe. Sediyakna persegi sing kebak.
• Aja nyelehake isi penting kedhuwuren cedhak pinggir, amarga pojoke dipotong.

Kapan sampeyan mbutuhake ukuran lawas (57, 72, 76, 114, 120, 144, 152, 167)? Mung yen sampeyan ndhukung iOS 6 utawa sing luwih lawas, utawa pengin kontrol piksel persis per piranti kanggo iPad Pro (167 px) lan iPad (152 px). Kanggo meh kabeh situs ing 2026, file 180x180 wae wis cukup. Setelan kompatibilitas maksimal ing ngisor iki nyakup sawetara kanggo kelengkapan.

Ikon Android lan PWA: 192, 512 lan maskable

Chrome ing Android lan browser liyane sing mampu PWA maca ikon saka web app manifest, dudu saka <link rel="icon">. Supaya bisa diinstal, sampeyan mbutuhake paling ora PNG 192x192 lan 512x512. Ikon 192 px dienggo ing layar ngarep lan app launcher; ikon 512 px katon ing splash screen lan dialog instal.

Ikon maskable lan zona aman

Ikon adaptif Android bisa dipotong dadi bunder, squircle utawa wangun liya gumantung piranti. Ikon maskable dirancang supaya aman dipotong: isi penting kudu ana ing njero zona aman, yaiku bunderan ing tengah kanthi diameter 80% saka gambar (radius padha karo 40% sisi). Kanggo file 512x512, tegese logo sampeyan kudu ana ing bunderan kanthi diameter kira-kira 410 px, lan warna latar kudu ditambah nganti kabeh papat pinggir supaya ora ana celah sawise dimasker.

Deklarasikna ikon maskable minangka entri dhewe nganggo "purpose": "maskable". Aja nggunakake "any maskable" ing siji file: padding sing dibutuhake kanggo masking katon kekecilan nalika ikon ditampilake tanpa topeng.

Conto manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Sajikna file iki minangka application/manifest+json (utawa application/json) lan link saka saben kaca nganggo <link rel="manifest" href="/manifest.json">. Sawetara proyek menehi jeneng site.webmanifest; jenenge ora penting, sing penting yaiku link-e.

Ubin Windows lan browserconfig.xml

Windows 8.1 lan 10 ngidini pangguna nge-pin situs menyang menu Start, lan IE11 karo Edge lawas maca gambar ubin saka browserconfig.xml. Ukuran sing lumrah yaiku 70x70 (cilik), 150x150 (sedheng), 310x150 (amba) lan 310x310 (gedhe). Edge basis Chromium nggunakake manifest lan favicon biasa, mula iki fitur lawas. Gunakna mung yen pamirsa sampeyan isih kalebu sing nganggo Windows lawas, tuladhane ing lingkungan perusahaan.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: mewarnai UI browser

Tag meta theme-color ngandhani browser seluler (lan sawetara browser desktop) warna apa sing dienggo kanggo bar alamat utawa bar judul. Iki dudu favicon, nanging kalebu ing set branding sing padha. Sampeyan bisa nyediyakake nilai kapisah kanggo mode terang lan peteng:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Setelan modern minimal vs. kompatibilitas maksimal

Setelan modern minimal (disaranake kanggo umume situs)

Lima file nyakup luwih saka 99% panggunaan nyata: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), lan rong ikon manifest (192 lan 512). Tambahna PNG 96x96 yen visibilitas ing Google Search penting, lan ikon maskable yen sampeyan ngeluncurake PWA.

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

Setelan kompatibilitas maksimal

Pilihen iki yen sampeyan nglayani pamirsa sing amba utawa enterprise, utawa yen pengin nyakup saben klien sing mungkin. Setelan iki nambahake ukuran PNG eksplisit, ukuran Apple lawas, ubin Windows lan warna tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Gatekna path root-relative sing diwiwiti nganggo /. Path kuwi bisa dienggo ing kaca kedalaman apa wae, sing nggawa kita menyang kesalahan sing paling umum.

Kesalahan favicon sing umum lan cara ndandanine

1. Path sing salah

Link kaya href="favicon.ico" diurai relatif marang URL saiki, mula bisa mlaku ing / nanging rusak ing /blog/post/. Gunakna URL root-relative (/favicon.ico) utawa absolut. Priksa uga manawa file-e pancen ana: bukaen saben URL langsung ing browser lan pesthekna ngasilake HTTP 200, dudu pangalihan menyang kaca 404 utawa kaca login.

2. Atribut sizes sing ora ana utawa salah

Tanpa sizes, browser kudu ngundhuh ikon kanggo mriksa, lan bisa milih sing salah. Tansah deklarasikna sizes ing link PNG lan pesthekna cocog karo dimensi piksel sing nyata. File sing dilabeli 32x32 nanging sejatine 64x64 nyebabake asil sing ora konsisten.

3. Caching sing agresif

Browser nyimpen cache favicon kanggo wektu sing suwe, asring ora gumantung marang cache kaca. Sawise rebranding, ikon lawas bisa isih katon nganti pirang-pirang dina. Ganti jeneng file utawa tambahna query string versi (/favicon.ico?v=2) lan nganyari tag link. Hard reload asring ora nyegerake ikon tab; mbukak URL ikon langsung banjur nge-reload biasane bisa.

4. Gambar sing ora persegi

Favicon kudu persegi. Logo persegi dowo bakal mulur, dipotong, utawa diwenehi pinggir kanthi cara sing ora bisa dikira. Rancangen tandha persegi khusus, kayata inisial utawa simbol, tinimbang ngecilake wordmark sing amba.

5. Apple touch icon transparan malih ireng

iOS ngisi transparansi nganggo ireng. Wenehana ikon 180x180 latar sing opak lan aja nggawe pojoke bunder sadurunge.

6. Ikon maskable tanpa zona aman

Yen logo nempel ing pinggir ikon maskable, Android bakal nyuwil. Tetepna ing njero bunderan 80% tengah lan isinana kabeh kanvas nganggo warna latar.

7. Ngalangi ikon saka crawler

Yen robots.txt nglarang path favicon sampeyan, Google ora bisa njupuk lan bakal nampilake ikon globe umum ing asil panelusuran. Elinga uga yen Google mbutuhake favicon ing host sing padha karo kaca lan mung nyegerake sok-sok, mula owah-owahan bisa butuh pirang-pirang dina utawa minggu supaya katon.

8. Lali link manifest utawa purpose

Manifest sing ora dilink, utawa sing ora duwe ikon 192 lan 512 px, nyegah prompt instal ing Chrome. Validasinen ing developer tools browser sampeyan ing tab Application.

Gawe kabeh set mung kanthi sapisan klik

Nggawe pirang-pirang file kanthi manual ing editor gambar, banjur ngonversi menyang ICO lan nulis manifest, iku nyuwarakake lan gampang salah. MakeFav ngasilake kabeh file ing ndhuwur saka siji gambar, teks utawa emoji: favicon.ico multi-ukuran, PNG, SVG, Apple touch icon, PNG 192/512, ikon maskable, ubin Windows, manifest.json lan browserconfig.xml, plus cuplikan HTML sing siap ditempel, kabeh ing siji unduhan ZIP. Sampeyan bisa nyetel latar, padding lan wangun ing editor, verifikasi situs sing wis ana nganggo pemeriksa favicon, lan ngotomatisasi pembuatan liwat sumber daya pangembang.

Daftar cek panyebaran

1. Unggahen kabeh file menyang root situs sampeyan.
2. Tempelna cuplikan HTML menyang <head> saben kaca (utawa layout bareng sampeyan).
3. Pesthekna path iku root-relative lan ngasilake HTTP 200.
4. Priksa mode terang lan peteng, instal ing layar ngarep iOS, lan instal ing Android.
5. Jalanna pemeriksa kanggo nemokake ukuran sing ilang utawa ora cocog.
6. Busak cache nganggo string versi yen sampeyan ngganti ikon lawas.

Pitakon sing kerep diajokake

Apa aku isih butuh favicon.ico ing 2026?

Ya. Sanajan browser modern nampa PNG lan SVG, akeh crawler, feed reader, klien email lan browser lawas isih njaluk /favicon.ico langsung. ICO multi-ukuran kanthi gambar 16, 32 lan 48 px iku file cilik sing nyegah ikon ilang lan kesalahan 404.

Favicon kudu ukuran pira kanggo Google Search?

Google mbutuhake favicon persegi kanthi ukuran kelipatan 48 px, paling ora 48x48. PNG 96x96 iku pilihan sing aman, lan SVG uga didhukung. Google uga mbutuhake file bisa dicrawl, mula aja diblokir ing robots.txt. Pembaruan bisa butuh pirang-pirang dina utawa minggu supaya katon.

Apa 180x180 wis cukup kanggo Apple touch icon?

Kanggo meh kabeh situs, ya. iOS lan iPadOS ngecilake PNG 180x180 kanggo saben piranti saiki. Ukuran lawas (57 nganti 152 px) mung penting kanggo versi iOS sing lawas banget. Elinga nggunakake latar opak supaya ikon ora malih ireng.

Apa ikon maskable kuwi lan apa aku butuh?

Ikon maskable yaiku PNG 512x512 sing dirancang kanggo wangun ikon adaptif Android. Isi pentinge ana ing njero bunderan diameter 80% ing tengah, lan latare ngisi kabeh persegi. Sampeyan mbutuhake mung yen nawakake PWA sing bisa diinstal, nanging iku nggawe ikon katon asli, ora mung ana ing bunderan putih.

Kenapa favicon lawasku isih katon sawise tak ganti?

Browser nyimpen cache favicon kanthi kapisah lan kanggo wektu sing suwe. Ganti jeneng file utawa tambahna query string versi kayata ?v=2, nganyari tag link, banjur bukak URL ikon langsung lan reload. Mesin telusur bisa luwih suwe nyegerake salinane dhewe.