고정 헤더 영역
상세 컨텐츠
본문
728x90
favicon이란? 브라우저에서 모 웹 사이트를 접속할 때 탭 좌측에 보이는 그림을 가리킨다.
favicon을 설정하기 위하여 본인이 디자인하거나 혹은 디자인 의뢰한 파일을 확보해 두자
그림 크기는 16x16px로 저장하여야 한다. // 변환 사이트에서 요구하는 규격이다.
그림 디자인은 그림판(Windows OS) 혹은 Adobe Illustrator를 활용하도록 하자.
(Mac OS는 무엇을 써야 하는지 잘 모르겠다. 디자이너들은 대부분 Mac을 쓰고 따라서 Adobe Illustrator를 설치해서 쓰더라.)
그림판으로 설정하는 방법은 아래와 같다.
16x16px 그림파일을 획득하였다. 이제 favicon 변환 작업을 하자
구글에서 favicon generator를 검색하자
가장 위에 뜨는 웹 페이지를 들어가자. // https://www.favicon-generator.org/
빨간 네모로 표시한 부분에서 디폴트로 되어있는 체크박스는 유지하되,
Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps를 // 디폴트로 선택되어 있는 것을
Generate only 16x16 favicon.ico로 바꿔주자
그리고 파일선택 박스를 선택하고 앞서 만든 16x16px 규격의 그림파일을 첨부하여 Create Favicon을 클릭하자
Download the generated favicon을 선택하여 해당 파일을 Visual studio code 작업폴더에 붙여 넣고, (하위폴더가 아닌)
Visual studio code에서 우리가 작업해 온 html파일의 코딩에 <link로 시작하는 코딩을 <head></head> 사이에 붙여 넣자
코드를 저장하고 다시 웹 페이지를 deploy 해보자.
그렇다면 당신의 웹 페이지를 띄우는 탭의 좌측에 favicon 이미지가 보일 것이다.
tada~
728x90
'생활코딩' 카테고리의 다른 글
| HTML gtag 활용하여 유저 니즈를 파악해보자 w/ google analytics (0) | 2024.01.18 |
|---|---|
| HTML 검색엔진 최적화(SEO) w/ robots.txt, sitemap.xml (0) | 2024.01.18 |
| HTML Style(CSS) 보정 w/ 개발자도구 F12 (0) | 2024.01.18 |
| HTML tag hide(), show() / div, img 등 (0) | 2024.01.18 |
| HTML img attr() src Value 변경 / JQUERY (0) | 2024.01.18 |
