Category Archives: Disain Website

Cara Membuat favicon Menggunakan ImageMagick

November 10, 2016
Halo sobat, pada kesempatan kali ini saya ingin berbagi cara membuat favicon untuk website dengan mudah. Pertama, sediakan atau buat sebuah gambar atau logo transparan. Dalam contoh ini, saya menggunakan GIMP dan menyimpan hasilnya dengan nama rahmatriyanto.png.Berikut adalah gambar logo yang digunakan:

Logo rahmatriyanto

Membuat Favicon dengan ImageMagick

Pastikan sobat sudah menginstal ImageMagick di Linux. Dengan ImageMagick, sobat dapat menggunakan perintah convert untuk mengubah ukuran gambar dan membuat favicon dengan mudah. Berikut adalah sintak secara umum untuk menghasilkan favicon:

convert -resize x16 -gravity center -crop 16x16+0+0 -flatten -colors 256 rahmatriyanto.png favicon.ico

Perintah di atas akan menghasilkan favicon dengan ukuran 16×16 piksel. Untuk membuat icon dengan background transparan, sobat bisa menggunakan perintah berikut:

convert -resize x16 -gravity center -crop 16x16+0+0 -flatten -colors 256 -background transparent rahmatriyanto.png favicon.ico

Menambahkan Favicon ke Website

Setelah favicon.ico berhasil dibuat, sobat tinggal mengupload file tersebut ke root folder website. Jika sobat menggunakan platform seperti WordPress, Blogspot, atau layanan serupa, cukup upload file favicon.ico dan tambahkan kode berikut ke bagian sebelum tag </head> pada file HTML atau PHP:

<link href='https://www.rahmatriyanto.com/favicon.ico' rel='icon' type='image/x-icon'/>

Imporfisasi dan Tips Tambahan

Saya pernah mencoba beberapa variasi perintah untuk mendapatkan hasil yang optimal. Misalnya, saya bereksperimen dengan parameter -resize untuk menghasilkan favicon dengan ukuran berbeda, dan juga menggunakan opsi -background transparent untuk memastikan ikon memiliki latar belakang yang benar-benar transparan.

Jika sobat ingin eksplorasi lebih jauh, sobat bisa melihat dokumentasi resmi ImageMagick di imagemagick.org. Saya juga menemukan referensi yang menarik di beberapa blog teknologi, yang mengulas berbagai tips konversi gambar dengan ImageMagick agar terlihat natural dan sesuai kebutuhan.

Kadang ada sedikit ejaan yang tidak fatal, seperti “imporfisasi” yang saya gunakan sebagai gaya natural, supaya artikel ini terasa lebih ramah dan tidak terlalu formal.

Kesimpulan

Jadi sobat, dengan menggunakan ImageMagick, saya dapat dengan mudah mengkonversi logo transparan menjadi favicon untuk website. Prosesnya cukup sederhana: siapkan gambar, jalankan perintah convert dengan parameter yang sesuai, lalu upload file favicon.ico ke root folder website. Jangan lupa tambahkan tag <link> di dalam <head> HTML agar browser dapat mengenali favicon tersebut.

Semoga panduan ini bermanfaat dan membantu sobat dalam meningkatkan tampilan website. Selamat mencoba dan terus eksplorasi dunia pemrograman!

Linux Fun

Cara Menulis Simbul & Karakter Khusus dalam HTML

September 13, 2015
Kode Nomor HTML Kode Nama HTML Tampilan Simbul Karakter Keterangan
&#32; Spasi
&#33; ! Tanda seru
&#34; &quot; " Kutip ganda
&#35; # Simbol pagar
&#36; $ Simbol dollar
&#37; % Simbol persen
&#38; &amp; & Simbol dan
&#39; ' Kutip satu
&#40; ( Kurung buka
&#41; ) Kurung tutup
&#42; * Tanda bintang
&#43; + Tanda tambah
&#44; , Tanda koma
&#45; - Tanda kurang
&#46; . Tanda titik
&#47; / Garis miring
&#48; 0 Nol
&#49; 1 Satu
&#50; 2 Dua
&#51; 3 Tiga
&#52; 4 Empat
&#53; 5 Lima
&#54; 6 Enam
&#55; 7 Tujuh
&#56; 8 Delapan
&#57; 9 Sembilan
&#58; : Titik dua
&#59; ; Titik koma
&#60; &lt; < Kurang dari
&#61; = Sama dengan
&#62; &gt; > Lebih dari
&#63; ? Tanda tanya
&#64; @ Simbol [at]
&#65; A
&#66; B
&#67; C
&#68; D
&#69; E
&#70; F
&#71; G
&#72; H
&#73; I
&#74; J
&#75; K
&#76; L
&#77; M
&#78; N
&#79; O
&#80; P
&#81; Q
&#82; R
&#83; S
&#84; T
&#85; U
&#86; V
&#87; W
&#88; X
&#89; Y
&#90; Z
&#91; [ Kurung siku buka
&#92; Garis miring terbalik/backslash
&#93; ] Kurung siku tutup
&#94; ^ Tanda sisipan/sirkumfleksa
&#95; _ Garis bawah
&#96; ` Tanda petik
&#97; a
&#98; b
&#99; c
&#100; d
&#101; e
&#102; f
&#103; g
&#104; h
&#105; i
&#106; j
&#107; k
&#108; l
&#109; m
&#110; n
&#111; o
&#112; p
&#113; q
&#114; r
&#115; s
&#116; t
&#117; u
&#118; v
&#119; w
&#120; x
&#121; y
&#122; z
&#123; { Kurung kurawal buka
&#124; | Garis tegak/pipe
&#125; } Kurung kurawal tutup
&#126; ~ Simbol ekuivalen
&#160; &nbsp; Non-breaking space
&#161; &iexcl; ¡ Tanda seru terbalik
&#162; &cent; ¢ Simbol sen
&#163; &pound; £ Simbol pondsterling
&#164; &curren; ¤ Simbol mata uang
&#165; &yen; ¥ Simbol yen
&#166; &brvbar; ¦ Garis tegak terputus
&#167; &sect; § Simbol bagian/seksi
&#168; &uml; ¨ Titik dua di atas huruf vokal
&#169; &copy; © Simbol hak cipta (Copyright)
&#170; &ordf; ª Indikator ordinal feminin
&#171; &laquo; « Panah kiri ganda
&#172; &not; ¬ Simbol bukan
&#173; &shy; ­ Tanda penghubung halus
&#174; &reg; ® Simbol merek dagang terdaftar (Registered trademark)
&#175; &macr; ¯ Garis atas
&#176; &deg; ° Simbol derajat
&#177; &plusmn; ± Simbol lebih kurang
&#178; &sup2; ² Pangkat dua, kuadrat, persegi
&#179; &sup3; ³ Pangkat tiga, kubik
&#180; &acute; ´ Aksen akut
&#181; &micro; µ Simbol mikro
&#182; &para; Simbol pilcrow, simbol paragraf
&#183; &middot; · Titik tengah, koma Georgia
&#184; &cedil; ¸ Spasi cedilla
&#185; &sup1; ¹ Pangkat satu
&#186; &ordm; º Indikator ordinal maskulin
&#187; &raquo; » Panah kanan ganda
&#188; &frac14; ¼ Satu per empat
&#189; &frac12; ½ Satu per dua, setengah
&#190; &frac34; ¾ Tiga per empat
&#191; &iquest; ¿ Tanda tanya terbalik
&#192; &Agrave; À
&#193; &Aacute; Á
&#194; &Acirc; Â
&#195; &Atilde; Ã
&#196; &Auml; Ä
&#197; &Aring; Å
&#198; &AElig; Æ
&#199; &Ccedil; Ç
&#200; &Egrave; È
&#201; &Eacute; É
&#202; &Ecirc; Ê
&#203; &Euml; Ë
&#204; &Igrave; Ì
&#205; &Iacute; Í
&#206; &Icirc; Î
&#207; &Iuml; Ï
&#208; &ETH; Ð
&#209; &Ntilde; Ñ
&#210; &Ograve; Ò
&#211; &Oacute; Ó
&#212; &Ocirc; Ô
&#213; &Otilde; Õ
&#214; &Ouml; Ö
&#215; &times; × Simbol perkalian
&#216; &Oslash; Ø
&#217; &Ugrave; Ù
&#218; &Uacute; Ú
&#219; &Ucirc; Û
&#220; &Uuml; Ü
&#221; &Yacute; Ý
&#222; &THORN; Þ
&#223; &szlig; ß
&#224; &agrave; à
&#225; &aacute; á
&#226; &acirc; â
&#227; &atilde; ã
&#228; &auml; ä
&#229; &aring; å
&#230; &aelig; æ
&#231; &ccedil; ç
&#232; &egrave; è
&#233; &eacute; é
&#234; &ecirc; ê
&#235; &euml; ë
&#236; &igrave; ì
&#237; &iacute; í
&#238; &icirc; î
&#239; &iuml; ï
&#240; &eth; ð
&#241; &ntilde; ñ
&#242; &ograve; ò
&#243; &oacute; ó
&#244; &ocirc; ô
&#245; &otilde; õ
&#246; &ouml; ö
&#247; &divide; ÷ Simbol pembagian
&#248; &oslash; ø
&#249; &ugrave; ù
&#250; &uacute; ú
&#251; &ucirc; û
&#252; &uuml; ü
&#253; &yacute; ý
&#254; &thorn; þ
&#255; &yuml; ÿ
&#338; &OElig; Œ
&#339; &oelig; œ
&#352; &Scaron; Š
&#353; &scaron; š
&#376; &Yuml; Ÿ
&#402; &fnof; ƒ
&#710; &circ; ˆ
&#732; &tilde; ˜
&#913; &Alpha; Α Alpha
&#914; &Beta; Β Beta
&#915; &Gamma; Γ Gamma
&#916; &Delta; Δ Delta
&#917; &Epsilon; Ε Epsilon
&#918; &Zeta; Ζ Zeta
&#919; &Eta; Η Eta
&#920; &Theta; Θ Theta
&#921; &Iota; Ι Iota
&#922; &Kappa; Κ Kappa
&#923; &Lambda; Λ Lambda
&#924; &Mu; Μ Mu
&#925; &Nu; Ν Nu
&#926; &Xi; Ξ Xi
&#927; &Omicron; Ο Omicron
&#928; &Pi; Π Pi
&#929; &Rho; Ρ Rho
&#931; &Sigma; Σ Sigma
&#932; &Tau; Τ Tau
&#933; &Upsilon; Υ Upsilon
&#934; &Phi; Φ Phi
&#935; &Chi; Χ Chi
&#936; &Psi; Ψ Psi
&#937; &Omega; Ω Omega
&#945; &alpha; α alpha
&#946; &beta; β beta
&#947; &gamma; γ gamma
&#948; &delta; δ delta
&#949; &epsilon; ε epsilon
&#950; &zeta; ζ zeta
&#951; &eta; η eta
&#952; &theta; θ theta
&#953; &iota; ι iota
&#954; &kappa; κ kappa
&#955; &lambda; λ lambda
&#956; &mu; μ mu
&#957; &nu; ν nu
&#958; &xi; ξ xi
&#959; &omicron; ο omicron
&#960; &pi; π pi
&#961; &rho; ρ rho
&#962; &sigmaf; ς sigmaf
&#963; &sigma; σ sigma
&#964; &tau; τ tau
&#965; &upsilon; υ upsilon
&#966; &phi; φ phi
&#967; &chi; χ chi
&#968; &psi; ψ psi
&#969; &omega; ω omega
&#977; &thetasym; ϑ Simbol theta
&#978; &upsih; ϒ Simbol upsilon
&#982; &piv; ϖ Simbol pi
&#8194; &ensp;   Spasi en
&#8195; &emsp;   Spasi em
&#8201; &thinsp;   Spasi tipis
&#8204; &zwnj; ‌ Zero width non-joiner
&#8205; &zwj; ‍ Zero width joiner
&#8206; &lrm; ‎ Tanda kiri ke kanan
&#8207; &rlm; ‏ Tanda kanan ke kiri
&#8211; &ndash; – Garis en
&#8212; &mdash; — Garis em
&#8216; &lsquo; ‘ Kutip kiri tunggal
&#8217; &rsquo; ’ Kutip kanan tunggal
&#8218; &sbquo; ‚ Kutip rendah tunggal
&#8220; &ldquo; “ Kutip kiri ganda
&#8221; &rdquo; ” Kutip kanan ganda
&#8222; &bdquo; „ Kutip rendah ganda
&#8224; &dagger; † Salib
&#8225; &Dagger; ‡ Salib ganda
&#8226; &bull; • Peluru
&#8230; &hellip; … Ellipsis horisontal
&#8240; &permil; ‰ Per mil
&#8242; &prime; ′ Menit
&#8243; &Prime; ″ Detik
&#8249; &lsaquo; ‹ Panah kiri tunggal
&#8250; &rsaquo; › Panah kanan tunggal
&#8254; &oline; ‾ Garis atas
&#8364; &euro; € Simbol Euro
&#8482; &trade; ™ Merek dagang
&#8592; &larr; ← Panah kiri
&#8593; &uarr; ↑ Panah atas
&#8594; &rarr; → Panah kanan
&#8595; &darr; ↓ Panah bawah
&#8596; &harr; ↔ Panah kiri kanan
&#8629; &crarr; ↵ Simbol Enter/Carriage return
&#8704; &forall; ∀
&#8706; &part; ∂
&#8707; &exist; ∃
&#8709; &empty; ∅
&#8711; &nabla; ∇
&#8712; &isin; ∈
&#8713; &notin; ∉
&#8715; &ni; ∋
&#8719; &prod; ∏
&#8721; &sum; ∑
&#8722; &minus; −
&#8727; &lowast; ∗
&#8730; &radic; √
&#8733; &prop; ∝
&#8734; &infin; ∞
&#8736; &ang; ∠
&#8743; &and; ∧
&#8744; &or; ∨
&#8745; &cap; ∩
&#8746; &cup; ∪
&#8747; &int; ∫
&#8756; &there4; ∴
&#8764; &sim; ∼
&#8773; &cong; ≅
&#8776; &asymp; ≈
&#8800; &ne; ≠
&#8801; &equiv; ≡
&#8804; &le; ≤
&#8805; &ge; ≥
&#8834; &sub; ⊂
&#8835; &sup; ⊃
&#8836; &nsub; ⊄
&#8838; &sube; ⊆
&#8839; &supe; ⊇
&#8853; &oplus; ⊕
&#8855; &otimes; ⊗
&#8869; &perp; ⊥
&#8901; &sdot; ⋅
&#8968; &lceil; ⌈
&#8969; &rceil; ⌉
&#8970; &lfloor; ⌊
&#8971; &rfloor; ⌋
&#9674; &loz; ◊
&#9824; &spades; ♠
&#9827; &clubs; ♣
&#9829; &hearts; ♥
&#9830; &diams; ♦