WordPress 사이트에서 바쁘고 파비콘 인 마무리 터치를 추가하기 위해 무대에 왔습니다. 저는 주로 개발자이므로 그래픽과 아이콘이 가장 중요하지 않습니다.

파비콘을 만들 때 모범 사례는 무엇입니까 (크기 등의 측면에서 이미 디자인이 있습니다)? 모바일, 태블릿, 레티 나 디스플레이 등 가능한 모든 장치를 수용하고 싶습니다. 또한 흐릿하게 끝나기를 원하지 않으므로 사용할 픽셀 밀도와 모든 것을 알아야합니다.

이 작업을 수행 할 Mac 응용 프로그램이나 온라인 도구가 있다면 제대로 작동합니다. 그렇지 않으면 Illustrator와 Photoshop에서 내 길을 찾는 방법을 알고 있습니다.

Favicons 의 기본 사항 -2013 년 모범 사례 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

타일 ​​아이콘 tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

그리고 GitHub의 favicon 크기 / 유형 에 대한 "완벽하게 강박적인"치트 시트 .

항상 읽을 가치가 있습니다 : http://www.jonathantneal.com/blog/understand-the-favicon/

무엇을 포함할까요?

최소

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

강박 관념

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<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">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico는 파비콘 중 가장 오래된 파비콘으로,이 책을 읽는 많은 사람들이 태어나 기 전부터 오늘날까지 완벽하게 작동했습니다.

16x16, 32x32 및 48x48 크기의 이미지를 포함하는 것이 좋습니다 .

파비콘을 정의하는 표준 방법 :

<link rel="shortcut icon" href="/favicon.ico" />

브라우저는 웹 사이트의 루트 디렉토리를 검색 favicon.ico하므로 링크를 생략 할 수 있습니다. 일부 구형 브라우저는 favicon.ico더 적절한 크기의 PNG가 선언 된 경우에도 기본적으로 선언되어 있으므로 ICO를 루트에 선언하지 않고 다른 크기의 PNG를 선언하는 것이 좋습니다.

favicon.png

HTML5는 sizes여러 크기의 아이콘을 선언하는 데 도움이 되는 속성을 도입했습니다 . 특정 PNG를 사용하면 사용 된 크기를보다 효과적으로 제어 할 수 있으며 올바른 이미지 만로드됩니다.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org-HTML5-링크 유형 "아이콘"

선언하는 크기는 지원하려는 장치에 따라 다릅니다. 일반적이지 않은 크기 :

• 32x32
• 48x48
• 64x64
• 96x96
• 128x128 Chrome 웹 스토어 아이콘
• Android 용 160x160 Chrome
• Android 용 192x192 Chrome
• 195x195 오페라 단축 다이얼 아이콘
• Android 용 196x196 Chrome
• 228x228 오페라 코스트 아이콘

애플 터치 아이콘

iOS 웹 클립 아이콘은 장치 및 해상도에 따라 다양한 크기로 제공됩니다. 하나 또는 여러 크기의 아이콘을 지정할 수 있습니다. 관련 크기의 아이콘이 없으면 선언 된 크기가없는 일반 아이콘이 사용됩니다.

링크 요소를 사용하여 아이콘을 지정하지 않으면 iOS는 apple-touch-icon접두사 가있는 아이콘의 루트 디렉토리를 검색합니다 . iOS 기기는 이러한 아이콘 (예 : Android Chrome)을 사용하는 유일한 기기가 아니기 때문에 (선별 적으로는) 더 안전한 옵션입니다.

<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">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• iOS 휴먼 인터페이스 지침-아이콘 크기

• iOS 개발자 라이브러리-웹 클립에 대한 웹 페이지 아이콘 지정

윈도우 타일

타일은 웹 사이트를 Windows 또는 Windows Phone의 시작 화면에 고정 할 때 사용되며 다양한 크기로 제공됩니다.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

권장 이미지 크기는 해당 이미지의 이름보다 큽니다. 이들은 microsoft.com 에서 권장하는 크기입니다.

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

타일 ​​색상 및 제목

타일의 기본 동작은 <title>태그 에서 타일 제목을 가져 와서 타일 ​​이미지의 투명도를 존중하여 배경색을 표시하는 것입니다. 다음 메타 태그를 사용하여 색상과 제목을 사용자 정의 할 수 있습니다.

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

모든 msapplication메타 태그를 제거하고 루트 폴더의 XML 파일로 교체 할 수 있습니다 browserconfig.xml. XML 파일은 다음과 같아야합니다.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

추가 자료 및 자료

• 파비콘 치트 시트

• Favicons, Touch 아이콘, Tile 아이콘 등 어떤 것이 필요합니까? -퀴즈로 작성되었지만 유용한 정보가 많이 포함되어 있습니다 (단지 기사로 읽을 수는 있지만 퀴즈는 잊어 버리십시오)

• 아이콘 핸드북

• ImageMagick- 이미지를 변환하는 데 유용한 명령 줄 도구입니다.

• RealFaviconGenerator.net- 포괄적 인 파비콘 생성기.

• FAVIC-O-MATIC- 쉽게 사용자 정의 할 수있는 출력 형식을 가진 포괄적 인 파비콘 생성기.

이 도구는 슈퍼 시간 절약 도구입니다. 사용해보십시오! 그것은 당신을 위해 모든 것을 처리합니다.

800px x 800px 정도의 이미지를 업로드하여 멋지고 생생합니다.

http://realfavicongenerator.net/

또한이 메타 태그를 추가하면 일부 iOS 기기에 저장 한 경우 아이콘 이름을 지정할 수 있습니다.

<meta name="apple-mobile-web-app-title" content="Website Name">

희망이 도움이됩니다!

이 GRUNT 태스크를 사용하여 가능한 모든 변형을 생성하십시오.

https://github.com/gleero/grunt-favicons

PNG 이미지에서 알려진 모든 유형 및 크기 아이콘을 생성합니다. ImageMagick을 사용합니다.

입력 : png의 정사각형 로고. 해상도 접두사 (예 : source.16x16.png)를 사용하여 소스 파일 근처에 유지할 수도 있습니다.

산출:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

html 파일에 변경 사항을 추가합니다.

http://faviconit.com

하나의 고해상도 PNG에서 모든 장치에 대해 약 15 개의 서로 다른 아이콘 크기를 만듭니다.

나도 파비콘 솔루션을 찾고 있었고 타사 웹 서비스에 의존하고 싶지 않았습니다. 간단한 빌드 단계로 작동하는 일반적인 솔루션을 찾을 수 없어서 faviconbuild를 만들었 습니다 . 그것은에 의존 ImageMagick이 당신이 당신의 시스템에 그것의 최신 버전을 다운로드하거나 일부 내에서 제공하고 사용할 수 있도록 출시 .

MIT 라이센스에 따라 공개 되었으므로 누구나 상업적 또는 개인적 용도로 자유롭게 사용하거나 영감을 얻을 수 있습니다. 당신이 어떤 버그를 발견하거나 확장하고 싶다면 자유롭게 참여하십시오 .

좀 더 자세한 정보로 프로젝트 페이지 를 업데이트 할 예정 이지만, 이미 매우 유용한 표준 도움말 메뉴가 있으며 Unix, Mac 및 Windows에서 작동합니다.

터미널에서 .bat 또는 .sh 스크립트를 실행하면됩니다.

Windows의 경우 예 :

faviconbuild.bat -h

또는 Unix / Mac (Cygwin을 사용하는 경우 Windows) :

faviconbuild.sh -h

사용 가능한 옵션과 함께 버전 정보가 제공됩니다. 이 스크립트는 입력 이미지를 가져와 웹 사이트에 포함 할 필수 html 마크 업과 함께 필요한 모든 다양한 이미지를 출력하도록 설계되었습니다.

이것은 현재 내 프로젝트 중 하나에서 사용하는 방법의 예입니다.

./faviconbuild/faviconbuild.sh -i ./source.png

faviconbuild 폴더를 프로젝트 특정 폴더에 넣었으므로 실제 프로젝트 파일과 소스 .png를 배치 한면을 만질 필요가 없었습니다. 스크립트의 기본 동작은 모든 것을 중첩 된 빌드 폴더에 저장하여 git을 사용하는 경우 프로젝트와 충돌하지 않도록하는 것입니다.

누락 된 것이 있으면 기능 요청을 제출하십시오.

또한 자세한 정보 가 담긴 블로그 게시물 이 있습니다.

이 정보가 도움이 되길 바랍니다.

여기에는 파비콘 크기 및 생성기에 관한 유용한 정보가 많이 있습니다.

다른 크기의 디자인 요구 사항을 설명하여 토론에 추가 할 수 있습니다.

예. 파비콘, 아이콘, 심볼 및 로고 크기는 동일한 아트를 기반으로 할 수 있지만 각각 가장 정확한 것으로 보이도록 해당 크기로 구체적으로 렌더링해야합니다 (자동 생성기는 앨리어싱 및 그라디언트를 잘 처리하지 못한다고 말하고 있습니다) 작은 크기로 시작하면 16 픽셀 크기와 자동 생성 이미지가 128 픽셀 크기에 맞게 최적화되지 않습니다.

원하는 3D 트릭을 모두 사용하여 128 pix 또는 큰 사각형 형식으로 아트를 그립니다. 다른 크기의 아이콘을 한 번에 하나씩 내 보내서 결과를 검사하고 해당 크기에서 가장 잘 작동하도록 마스터를 조정하십시오.

16 x 16의 경우 16x16 정사각형 격자를 만들고 출력을 가장 많이 제어하도록 개별적으로 색상을 지정합니다.