🏠 HTML νŒŒλΉ„μ½˜(Favicon) 적용 방법

rimmzΒ·2022λ…„ 7μ›” 8일
htmlνŒŒλΉ„μ½˜
2

TIL | HTML CSS

λͺ©λ‘ 보기
4/6
post-thumbnail

νŒŒλΉ„μ½˜(Favicon) μ΄λž€?🧐
Favorites icon의 μ€„μž„λ§λ‘œ, μ›Ή λΈŒλΌμš°μ €μƒμ—μ„œ μ£Όμ†Œμ°½ μ˜†μ— μž‘κ²Œ ν‘œμ‹œλ˜λŠ” μ•„μ΄μ½˜μ„ λ§ν•œλ‹€.

  • ex) 넀이버 νŒŒλΉ„μ½˜, ꡬ글 νŒŒλΉ„μ½˜

πŸ“‹ 1.1 νŒŒλΉ„μ½˜ μ•„μ΄μ½˜ 파일 μ€€λΉ„

νŒŒν”Όμ½˜μ— μ‚¬μš©λ˜λŠ” μ•„μ΄μ½˜μ€ jpg,png 이미지 νŒŒμΌμ„ ico 파일둜 λ³€κ²½ν•œ ν›„ μ‚¬μš©ν•΄μ£Όμ–΄μ•Ό ν•œλ‹€.

  • νŒŒλΉ„μ½˜ 파일의 ν™•μž₯μžλŠ” .iconλ₯Ό μ‚¬μš©ν•œλ‹€.
  • PNG νŒŒλΉ„μ½˜μ„ μ§€μ›ν•˜μ§€λ§Œ Chromeκ³Ό SafariλŠ” ICO νŒŒλΉ„μ½˜μ΄ ν•¨κ»˜ μ§€μ •λ˜μ–΄ 있으면 μ„ μ–Έλœ μˆœμ„œμ— 상관없이 PNG νŒŒλΉ„μ½˜μ„ λ¬΄μ‹œν•˜κ³  ICO νŒŒλΉ„μ½˜μ„ μ‚¬μš©ν•œλ‹€.
  • μ‚¬μ΄μ¦ˆλŠ” 보톡 16x16 픽셀이 κΈ°λ³Έ κ·œκ²©μ΄λ‹€.
  • 졜근의 λΈŒλΌμš°μ €λ“€μ€ 32x32 ν”½μ…€μ˜ νŒŒλΉ„μ½˜λ„ μ μ ˆν•˜κ²Œ μΆ•μ†Œλ˜μ–΄ ν‘œν˜„ν•΄μ€€λ‹€.

νŒŒλΉ„μ½˜ 이미지 μΆ”μ²œ μ‚¬μ΄νŠΈ πŸ™Œ
https://icons8.kr/icons/set/favicon-ico

  • μ›ν•˜λŠ” 이미지λ₯Ό νŒŒν”Όμ½˜ μ‚¬μ΄μ¦ˆ κ·œκ²©μ— 맞게 λ‹€μš΄λ‘œλ“œν•œλ‹€.

νŒŒλΉ„μ½˜ .ico ν™•μž₯자 파일 λ³€ν™˜ μ‚¬μ΄νŠΈ πŸ™Œ
https://www.favicon-generator.org/

  • 이미지 νŒŒμΌμ„ .ico 파일 ν™•μž₯자둜 λ³€κ²½ν•΄μ€€λ‹€.

πŸ“‹ 1.2 HTML λ¬Έμ„œμ— 링크 μ‚½μž…

  • κΈ°λ³Έ HTML 파일 κ΅¬μ‘°μ—μ„œ head νƒœκ·Έ μ˜μ—­μ— ν•˜λ‹¨μ˜ μ½”λ“œλ₯Ό μΆ”κ°€ν•œλ‹€.
<link rel="icon" href="/파일 경둜">

link rel μ†μ„±πŸ§
ν˜„μž¬ λ¬Έμ„œμ™€ μ™ΈλΆ€ λ¦¬μ†ŒμŠ€ μ‚¬μ΄μ˜ μ—°κ΄€ 관계λ₯Ό λͺ…μ‹œ

  • μ›Ή λΈŒλΌμš°μ €μƒμ— μ •μƒμ μœΌλ‘œ μ•„μ΄μ½˜μ΄ 좜λ ₯λ˜λŠ” 것을 확인할 수 μžˆλ‹€. πŸ€—

μ°Έκ³ 

https://moolgogiheart.tistory.com/84
https://webdir.tistory.com/337

profile
rimmz
#μ˜μš•λ„˜μΉ˜λŠ”#πŸ’»#✨#FE#πŸ’ͺ🏻
이전 포슀트

TIL | Sass(SCSS) VSCodeμ—μ„œ 컴파일 방법

λ‹€μŒ 포슀트

DOCTYPE HTML μ„ μ–Έκ³Ό Document Element

0개의 λŒ“κΈ€