SVG Favicon

Hiasi situs anda dengan favicon SVG yang unik.

After Dark dikirimkan dengan 169B yang dioptimalkan 1 SVG favicon tertanam di setiap halaman:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">

Favicon adalah segitiga miring berwarna hitam dalam bentuk tepee seperti yang ditunjukkan2 di Bantuan Online Overview. Pusat segitiga menggunakan ruang negatif untuk memberikan ilusi segitiga sama sisi kedua dalam bentuk piramida, atau api terbuka, yang terkandung di dalam.

Warna ikon dapat dimodifikasi dengan mengubah atribut fill:

fill="%23f00"
fill="lime"
fill="%2300f"

Sesuaikan darifavicon.html di direktori situs layouts/partials/head:

├── content
├── layouts
│   └── partials
│       └── head
│           └── favicon.html
├── static

Jika file belum ada, salin darii tema default:

$ mkdir -p layouts/partials/head
$ cp themes/after-dark/layouts/partials/head/favicon.html layouts/partials/head

Jika mengoptimalkan pengalaman platform lakukan dari dalam favicon.html:

1<meta name="apple-mobile-web-app-capable" content="yes">
2<meta name="apple-mobile-web-app-status-bar-style" content="black">
3<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
4<link rel="apple-touch-icon" href="data:image/png;base64,{{ readFile "static/icon.png" | base64Encode }}">

Lihat H5BP Extend untuk persyaratan khusus platform dan Hugo Documentation untuk bantuan dengan templating fungsi dan variabel.


  1. Lihat Mengoptimalkan SVGs dalam data URIs untuk membantu mengoptimalkan SVGs anda sendiri.
  2. Pelajari cara mendaftar animasi SVG dengan SMIL.