추적 • webp • xpenology_driver • favicon

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
tech:favicon [2014/04/03 02:59] – 115.93.88.196tech:favicon [2021/08/30 18:54] (현재) – 이전 판으로 되돌림 (2021/08/06 10:16) 172.68.118.87
줄 1: 줄 1:
 +{{tag>tech favicon 파비콘 애플터치아이콘}}
 +======파비콘 (Favicon)======
 +
 +웹 브라우저에 따라 특정 사이트에서 이 익스플로러 마크의 아이콘이 나타나야 할 부분에 전혀 다른 아이콘이 나오는 경우가 있을것이다.
 +
 +이것을 흔히 파비콘(Favicon)이라고 불리는 것들이다.
 +최신 웹브라우저에서는 다 지원한다.
 +
 +아래 사이트에서 만들고 다운로드한 뒤 자신의 웹사이트 제일 상위 폴더에 넣으면 된다.
 +
 +  * http://www.xiconeditor.com/ HD, Retina display 지원 고해상도
 +  * http://www.favicon.cc/
 +  * http://www.icoconverter.com/
 +
 +{{http://openwiki.kr/lib/tpl/openwiki/images/favicon.ico}}
 +
 +혹은 html 문서의 <header>... </header> 사이에 다음과 같은 문구를 넣으면 된다.
 +
 +<file>
 +<link rel="shortcut icon" href="/favicon.ico" />
 +</file>
 +
 +====애플터치아이콘 (Apple touch icon)====
 +
 +애플의 [[ios]]의 경우 사파리에서 웹페이지의 링크를 바탕화면에 만들면 [[tech:Apple touch icon|앱 아이콘]]이 만들어지는데 이것을 지정할 수 있다. 다음과 같이 한다.
 +
 +PNG 이지만, 투명도를 지원하지 않는다.
 +
 +<file>
 +<link rel="apple-touch-icon" href="touch-icon-iphone.png">
 +<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
 +<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
 +<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
 +</file>
 +
 +도쿠위키 템플릿에서는 ''tpl_favicon''함수를 이용하여 간단히 설정할 수 있다. 
 +
 +  <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
 +
 +미디어 폴더 최상위에 ''favicon.ico'', ''apple-touch-icon.png'' 파일을 올리면 된다. 
 +
 +
 +{{:apple-touch-icon.png}}
 + 
 +