사이트에 대한 favicon 만들기 : 유용한 팁 및 서비스

  1. 파비콘을 만드는 방법
  2. Photoshop에서 favicon을 만드는 방법
  3. 파비콘 저장 방법
  4. favicon 사이트 삽입 방법
  5. 파비콘 대체 방법
  6. 더 복잡한 favicon 생성 방법

이 단어를 처음 들었을 때 파비콘이 무엇인지 추측하기는 어렵습니다. 이 아이콘 은 사용중인 운영 체제 및 인터넷 브라우저에 따라 브라우저, 주소 표시 줄 및 기타 영역의 탭에 표시되는 소형 아이콘 입니다. 웹 사이트 디자인에서 가장 복잡하고 변덕스러운 요소 중 하나라고 할 수 있습니다.

아이콘이 작기 때문에 좋은 파비콘을 만드는 것은 어렵습니다
아이콘이 작기 때문에 좋은 파비콘을 만드는 것은 어렵습니다. 사이트에 관련된 내용을 명확하게 표시해야합니다. 널리 사용되는 모든 브라우저와 호환되는 favicon을 만드는 것도 어려운 작업 일 수 있습니다. 이 기사에서 우리는 창조의 모든 복잡한 측면을 다룰 것입니다. 로고가 필요하다면 기사 그것을하는 방법.

파비콘을 만드는 방법

favicon의 디자인부터 시작합시다. 컴팩트 함에도 불구하고 좋은 디자인은 사이트의 본질을 반영하고 기업 정체성의 유기적 부분이어야합니다. 일반적으로 아이콘은 회사의 그래픽 기호 (아이콘)이며 전체 로고 (아이콘, 텍스트 및 슬로건)는 아닙니다.

favicon으로,이 웹 사이트는 그들의 아이콘 (또는 그들에 가까운 심상)를 사용한다 favicon으로,이 웹 사이트는 그들의 아이콘 (또는 그들에 가까운 심상)를 사용한다.

파비콘의 텍스트는 작은 이미지 크기로 인해 읽을 수 없으므로 사용하지 않아야합니다. 이 규칙의 유일한 예외는 특정 브랜드와 자동으로 연결되는 세계적으로 유명한 텍스트 문자입니다. 예를 들어, 온라인 리소스 Wikipedia는 favicon의 대문자 "W"와 페이스 북 - 문자 "F"를 남겼습니다.

이 파비콘에는 특정 브랜드와 밀접하게 관련된 글자가 있습니다
이 파비콘에는 특정 브랜드와 밀접하게 관련된 글자가 있습니다. 예를 들어 Facebook은 그래픽 기호를 사용합니다. 또한 픽셀은 디즈니 이미지에 표시됩니다. 이것은 스크린 샷이 16 × 16 아이콘과 호환되는 Retina 디스플레이에서 촬영 되었기 때문이며 웹 사이트는 32 × 32 아이콘을 사용하기 때문입니다.

파비콘은 작은 이미지이므로 각 픽셀이 중요한 역할을합니다. 때로는 로고를 줄이면 개별 픽셀이 보이기 때문에 이미지가 흐려집니다. 선명도를 높이려면 픽셀 수준에서 아이콘을 편집해야합니다.

이를 방지하려면 Photoshop 또는 GIMP와 같은 특수 편집기를 사용하여 로고의 크기를 조정해야합니다
이를 방지하려면 Photoshop 또는 GIMP와 같은 특수 편집기를 사용하여 로고의 크기를 조정해야합니다. 먼저 이미지의 크기를 64x64 픽셀로 줄여야합니다 (가장 큰 크기의 파비콘입니다). 그런 다음 이미지가 선명해질 때까지 연필 도구를 사용하여 각 픽셀을 편집해야합니다. 이것은 힘든 과정이지만 결과는 그만한 가치가 있습니다. 파비콘 64x64가 준비되면 16x16, 24x24 및 32x32 픽셀의 이미지로 동일한 작업을 수행해야합니다. 모든 브라우저 및 가젯에 올바르게 표시되는 크기가 너무 큽니다.

  • 64x64 - Safari 브라우저 북마크;
  • 32x32 - 고해상도 디스플레이 (망막);
  • 24x24 - 북마크 Internet Explorer 및 MicroSoft Edge;
  • 16x16 - Google 크롬 및 기타 브라우저

Photoshop에서 favicon을 만드는 방법

먼저 위의 크기로 캔버스를 만들어야합니다.

그런 다음 아이콘, 문자 또는 다른 이미지를 캔버스에 추가해야합니다
그런 다음 아이콘, 문자 또는 다른 이미지를 캔버스에 추가해야합니다.

그런 다음 아이콘, 문자 또는 다른 이미지를 캔버스에 추가해야합니다

파비콘 저장 방법

크기가 다른 아이콘을 만들면 각각을 투명 PNG 파일 (24 비트)로 저장하십시오. Photoshop에서는 [파일] 메뉴의 [웹용으로 저장] 기능을 사용할 수 있습니다. 그런 다음 모든 PNG 파일을 하나의 ICO 파일로 병합해야합니다. 동시에 PNG 파일과 ICO 파일을 모두 사용할 수 있지만 종종 Safari와 Chrome도 ICO 형식 만 선호합니다. 제 생각에는 하나의 ICO 파일을 만드는 것이 더 쉽습니다. ICO 형식은 그리 흔한 일은 아니지만 다행히도 파일을이 형식으로 변환하는 데 도움이되는 여러 가지 도구가 있습니다. 이 목적을 위해, 나는 X 아이콘 편집기 . 다운로드 한 이미지를 즉시 하나의 ICO 파일로 변환 한 후 다운로드 할 수있는 무료 온라인 서비스입니다. 이것은 복잡한 것은 아니며 사이트의 지침을 따르십시오. 절망적 인 사람이라면이 서비스의 픽셀 편집기를 시험해보고 직접 favicon을 그릴 수 있습니다. (필자는 Photoshop에서보다 전문적인 편집기에서 favicon을 편집하는 것을 선호하지만).

PNG 이미지를 X 아이콘 편집기에 업로드하면 출력물에 하나의 ICO 파일이 생성됩니다
PNG 이미지를 X 아이콘 편집기에 업로드하면 출력물에 하나의 ICO 파일이 생성됩니다.

favicon 사이트 삽입 방법

그래서 이미 ICO 파일을 가지고 있습니다. 이제 웹 사이트에 추가해야합니다. 파일의 이름을 favicon.ico로 변경하고 웹 사이트의 루트 폴더 (index.html 파일 및 기타 표준 파일이 저장되는 위치)에 배치하십시오. 성공적으로 추가 한 후에는 웹 사이트 .com / favicon.ico에서 볼 수 있습니다. 거의 모든 브라우저는 루트 폴더에서 favicon.ico 파일을 찾습니다. 따라서이 폴더에 파비콘을 다운로드하는 것이 중요합니다. 다른 브라우저와의 호환성을 위해 위치를 나타내는 HTML 요소 나 링크를 추가하지 않는 것이 좋습니다. 이 트릭은 모든 브라우저에서 IE6까지 작동합니다. 또한 WordPress 사이트가있는 경우 많은 테마에서 테마 설정에 favicon을 추가 할 수 있습니다. 이 방법을 사용할 수도 있습니다.

파비콘 대체 방법

설명 할 수없는 이유로 브라우저가 캐시에 캐시를 추가합니다. 따라서 새 ICO 파일을 업로드하면 브라우저에서 이전 favicon을 계속 표시 할 수 있습니다. ��� 경우 어떻게해야할까요? 새 favicon의 위치를 ​​나타내는 임시 HTML 파일을 추가 할 수 있습니다. 또한 URL 끝에 짧은 검색어 문자열을 추가해야합니다.

<link rel = "바로 가기 아이콘"href = "너의 웹 사이트 .com / favicon.ico? v = 2"/>

따라서 브라우저는이 URL이 고유 한 URL이라고 생각하므로 새로운 아이콘을 표시해야합니다. 파비콘을 업데이트 한 후이 HTML 코드를 완전히 제거 할 수 있습니다. 파비콘을 변경해야하는 경우 쿼리 문자열에서 "v"다음에 숫자를 늘릴 때마다 동일한 기술을 사용하십시오. 따라서 브라우저는 매번이 URL을 고유 한 것으로 인식하고 새 버전을 표시합니다. 그리고 성공적인 업데이트 후에 HTML 코드를 삭제하는 것을 잊지 마십시오.

더 복잡한 favicon 생성 방법

이 기사에서는 사실상 모든 플랫폼에서 작동하는 파비콘을 만드는 보편적이고 쉬운 방법을 설명하고자했습니다. 그러나 웹 디자인과 개발에는 완벽에 제한이 없습니다. 더 복잡한 아이콘을 만드는 방법을 배우려면 서비스를 사용해보십시오. favico.js . 다양한 숫자의 동적 이미지를 만들 수 있습니다. 이 아이콘 덕분에 해당 탭이 활성화되지 않은 경우에도 읽지 않은 메시지 수가 표시됩니다. 애니메이션 파비콘을 온라인으로 만들려면 파비콘 생성기를 사용해보세요. favicon.cc .

더 많은 온라인 생성기를 찾을 수 있습니다. 여기에 .

파비콘 만들기에 대한 도움말을 공유하거나 질문을 올리려는 경우 댓글에 남겨 둡니다.

?� 경우 어떻게해야할까요?
Ico?

Добро пожаловать , Гость !

Мы настоятельно рекомендуем Вам зарегистрироваться, если вы ещё этого не сделали. регистрация откроет Вам новые функции.

Войти или Зарегистрироваться

www.silvio-berluskoni.ru © Все права защищены © 2016.