파비콘(favicon)이란 'favorites+icon'으로 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 브라우저마다 기본 설정된 파비콘이 있으며, 별도의 설정으로 나만의 파비콘을 적용해 놓을수도 있다.
파비콘의 확장자 ico
보통 이미지의 확장자는 png, jpg등 흔하게 접할 수 있는 것이 있는가하면 파비콘은 ico라는 확장자를 가진 파일로 등록해야한다. ico나 png, jpg 다 몰라도 된다. 이 글에서는 일상적으로 접할 수 있는 이미지를 가지고 ico파일로 변환하고 티스토리에 적용하는 방법에 대해 설명할 것이다.
1. 아이콘 이미지 준비
2. ico 파일로 변환하기
3. 티스토리에 적용하기
4. 다른 웹사이트에 적용하려면?<참고>
1. 아이콘 이미지 준비
파비콘으로 만드려는 아이콘 이미지 파일을 준비한다. 이미지의 형식은 png, jpg 등 어떤것이든 상관없다. 비율은 1:1 정사각형으로 준비한다. 크기는 상관없이 비율만 1:1로 맞추자.
2. ico 파일로 변환하기
이미지를 준비했다면 이 곳(http://icoconvert.com/)으로 접속하여 ico파일로 변환하면 된다.
위 주소로 접속하면
①번 파일선택 버튼을 선택하여 준비한 이미지 파일을 넣는다. 노란 박스와 같이 이미지 파일이 넣어진 것을 확인 한 뒤
②번 Upload 버튼을 선택한다.
③번에서는 이미지의 비율에 맞게 자르는 단계인데 나는 이미지를 애초에 1:1 비율의 정사각형으로 준비했기때문에 별도의 설정이 필요 없다.
④번 체크 후 ⑤번 Convert ICO 버튼을 클릭한다.
⑥번 Download yout icon(s)를 클릭하면 PC에 변환된 ICO파일을 다운받을 수 있다.
3. 티스토리에 적용하기
다운받은 ico파일을 가지고 티스토리 설정페이지로 간다.
난 아이콘과 파비콘 동시에 설정했다. 같은 디자인으로 설정했는데 아이콘 메뉴에 불러오기한 이미지는 png 형식이고, 파비콘 메뉴에 불러오기한 이미지는 방금 변환한 ico 형식이다.
불러오기 후 저장완료 버튼을 누르면
이렇게 주소창에 표시되어져 나오는것을 확인할 수 있다.
4. 다른 웹사이트에 적용하려면? <참고>
html을 어느정도 아시는 분이라면 이 내용을 이해하실수 있다. link 태그로 파비콘을 설정할 수 있다.
<link rel="shortcut icon" href="http://www.example.com/myicon.ico"/>
또는
<link rel="shortcut icon" href="/somepath/myicon.ico"/>
'스터디' 카테고리의 다른 글
| (티스토리) 구글 검색 최적화 설정하기 : 구글에서 내 글이 검색되게 하자! (0) | 2022.01.22 |
|---|---|
| (티스토리) 메타 태그 적용하는 방법 (2) | 2022.01.19 |
