이 글에서는 favicon.ico 404가 발생하는 원인과 이것이 무엇인지에 대해서 설명합니다.
favicon.ico 란 ?
Favicon.ico는 "Favorites Icon"의 줄임말로, 웹 브라우저에서 웹 페이지의 탭, 주소 표시줄, 북마크 메뉴 등에서 보이는 작은 아이콘입니다.
favicon.ico는 일반적으로 16x16, 32x32, 48x48 픽셀 크기 생성되며, 웹 페이지를 제작할 때 해당 아이콘을 만들어 웹 서버 루트 경로에 저장해 둠으로써 브라우저가를 인식하여 웹 페이지와 연결됩니다.
사용자 경험 측면에서, Favicon은 웹 페이지의 신원성을 강조하고, 브랜드 마케팅에도 이용될 수 있습니다.
티스토리 블로그에서도 블로그 설정에서 파비콘을 추가할 수 있습니다.
실제로 파비콘이 없는 경우 다음과 같은 에러 메시지를 확인하실 수 있습니다.
127.0.0.1 - - [08/Jun/2023 12:07:38] "GET /favicon.ico HTTP/1.1" 404 -
아래 이미지는 github와 gmail, blogger의 파비콘이 나타난 웹 브라우저의 탭을 보여줍니다.
플라스크 어플리케이션에서는 파비콘을 어떻게 추가하는지 모르는 경우가 많습니다다. 먼저 파비콘이 필요합니다. 16 × 16 ~ 42 x 42 까지의 픽셀과 ICO 파일 형태를 지원 합니다. 이것은 전제사항은 아니지만 모든 브라우저에서 지원하는 업계 표준입니다. 여러분의 static 디렉토리에 파비콘에 해당하는 아이콘 파일을 favicon.ico 파일명으로 넣습니다.
이제 그 아이콘을 브라우저에서 찾으려면, 여러분의 HTML에 link 태그를 아래와 같이 추가하면 됩니다.
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">.png)
