favicon 파비콘 만들기 및 무료로 ico 파일 변환, 추출 다운로드 할 수 있는 방법을 알려드리겠습니다. 워드프레스나 티스토리를 운영하시는 분들은 조금 더 나은 SEO 최적화를 위해 무조건 파비콘을 만들게 되는데요. 생소한 이름 때문에 어려울 것 같은 느낌과 다르게 편집 기술이 없어도 마우스 몇 번만 클릭하면 아주 쉽게 만들 수 있으니 본문의 내용을 따라 진행해 보시기 바라겠습니다.
파비콘(favicon)이란?
파비콘(favicon)은 favorites와 icon의 합성어이며 어떤 웹사이트를 클릭했을 때 특정 이미지가 조그만하게 보이는 이미지입니다.
위에 보이는 이미지처럼 www.주소.com 같은 웹사이트 주소 왼쪽 앞에 작은 사이즈의 이미지를 파비콘이라 부르며 해당 이미지가 있어야 SEO 적으로도 좋고 사용자 입장에서도 더 눈길이 가는 효과를 줍니다.
파비콘 만들기 사이트
파비콘 사이즈 규격에 맞춰서 이미지를 편집해도 좋지만, 아예 간단하게 파기콘 만들기가 가능한 곳이 있습니다.
텍스트를 입력하거나 애플 이모지를 넣어 남들보다 튀는 이미지를 다운로드 할 수 있으며 html 코드로 바로 복사해 갈 수도 있는 것이 특징입니다.
파비콘 ico 변환하기
규격에 맞춰 이미지를 만들었지만 간혹가다 티스토리(tistory) 플랫폼 같은 곳에서는 png나 jpg 파일 뿐만 아니라, ico 파일을 요구할 때가 있습니다. 컴퓨터 자체에서 쉽게 바꿀 수 있는 형태가 아니기 때문에 반드시 ‘변환기’를 사용해줘야 하는데요.
아래의 절차를 따라 파비콘 제네레이터 페이지에서 일반 png 파일을 ico로 변환해 보시기 바랍니다.
- 하단의 버튼을 통해 ‘favicon generator’ 홈페이지에 접속
- 이미지 부분에서 [파일 선택 > create favicon] 버튼 클릭
- download the generated favicon이라 적힌 파란 텍스트 클릭
- 압축 파일을 풀고 필요한 크기의 파일을 선택하여 사용하면 됩니다.(파일 이름 확인)
파비콘 만들기 FAQ
파비콘 사이즈 어떻게 해야 하나요?
파비콘 사이즈는 픽셀 기준 16×16 or 32×32 등 1:1 비율로 만들어야 합니다. 작게 표시되는 부분이라 화질은 크게 신경쓰지 않아도 됩니다.
파비콘을 설정했는데 브라우저에 왜 안 보이나요?
몇 가지 설정 방법에 대해 검토해 볼 필요가 있습니다. 우선 파비콘을 업로드하는 경로에 제대로 올라갔는지 위치를 확인해 줍니다.(or HTML로 확인) 그리고 설정 후 브라우저 캐시를 삭제해 줬는지 점검하여 [ico, png, svg] 등 파일 형식이 제대로 되었는지 확인합니다.
웹사이트에 파비콘을 추가하는 코드가 무엇인가요?
html의 <head> 섹션에 <link rel=”icon” href=”favicon.ico” type=”image/x-icon”> 코드를 넣고 ‘favicon.ico’ 부분에 넣고자 하는 경로 및 파일 이름으로 변경해 줍니다.
함께 보면 좋은 내용
📍PDF를 JPG로 변환하는 방법 >
📍누끼 따는 사이트 >
📍GIF 만들기 사이트 >
