파비콘과의 문제적인 관계

日本語에서 번역 • 원문 보기

안녕하세요. UI 디자인을 담당하는 츠카다입니다.

오늘은 웹사이트에 포함된 파비콘에 대해 이야기하고자 합니다.

로고 디자인과 사이트 디자인 디자인과 개발을 즐깁니다.

저는 항상 코딩 같은 프론트엔드 구축을 다른 직원에게 맡겼습니다.

놀랍게도, 종종 간과되는 한 가지가 바로 파비콘입니다.

오래전에는 PC 웹사이트에 즐겨찾기나 URL 입력 프레임 옆에 은근히 붙어 있었습니다

그 아이콘은 서비스 로고가 있는 픽트 아이콘으로만 인식되었습니다.

최근 프로젝트에서 파비콘(.ico) 파일을 만드는 방법을 찾고 있었습니다.

한 블로거가 파비콘 종류에 대해 글을 올렸습니다.

뭐라고! 21명이나 돼! !

> 인기 favicon.ico 목록: IE favicon-16x16.png용: 탭 favicon-32x32.png용: 맥용 사파리용: favicon-96x96.png용 구글 TV, 구글 TV용 favicon-160x160.png: 오페라 12 favicon-196x196.png 속도 다이얼용: 안드로이드 mstile-70x70.png용 크롬: 윈도우 8용 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-310x150.png apple-touch-icon-57x57.png: iOS apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon.png apple-touch-icon-precomposed.png

(다음은 "IT 탐사" 요약에서 인용한 내용입니다)

정말 많아요^^;

약 10년 전까지만 해도 웹사이트의 패비콘을 PC 브라우저를 염두에 두고 설정하는 것이 좋았습니다.

스티브 잡스가 약 8년 전 아이폰을 발표한 이후,

아이폰, 안드로이드, 아이패드, 아이팟 터치 등 다양한 멀티미디어 단말기가 등장했습니다.

각 아이콘에 맞게 디자인이 조정되어야 하는 상황입니다.

특히 맥 사용자로서 저에게 사각점은 Windows 8의 패널 디자인에 들어가는 파비콘이었습니다.

OS 디자인은 평면화되었고, 픽토 아이콘은 각 색상 배경에 깔끔하게 배치되어 있습니다.

따라서 윈도우 8용 흰색 블랭킹 아이콘을 조정하지 않으면 디자인 톤이 다른 요소들과 맞지 않을 것입니다...

이렇게 많은 걸 하나씩 만들 수는 없어요.

파비콘을 만드는 데 더 많은 시간을 쓰면, **디자인에도 더 많은 시간을 쓰고 싶어요! **

그래서 이번에 내가 발견한 것은...