무료GitHub에 공개한국어 소개

favicons

브라우저 탭과 스마트폰 홈 화면에 쓰이는 사이트 아이콘을 점검하고, 기기별 형식과 크기 생성부터 HTML 및 PWA 설정까지 돕습니다.

원문원문 설명 보기

Use when reviewing templates, rendered HTML, or shared components related to Implement favicons for all devices. Validate the final browser-facing markup, not just the source framework abstraction.

thedaviddias/Front-End-Checklist

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

탭과 북마크용 아이콘을 준비합니다
모바일 홈 화면 아이콘을 설정합니다
PWA 아이콘 설정을 확인합니다
다크 모드 지원 SVG를 점검합니다

한국어 소개

할 수 있는 일

브라우저 탭, 북마크, 스마트폰 홈 화면에 표시되는 사이트 아이콘을 점검하고 필요한 이미지와 설정을 준비하도록 돕습니다. ICO, PNG, SVG 및 모바일용 아이콘의 형식과 크기, HTML 선언을 확인합니다. 웹 앱의 한 종류인 PWA의 manifest.json에 여러 크기의 아이콘이 설정되어 있는지도 검토합니다.

이럴 때 유용합니다

사이트 공개 전에 빠진 아이콘을 찾거나 브라우저와 기기별 표시를 통일할 때 적합합니다. 다크 모드를 지원하는 SVG favicon과 공통 템플릿에서 출력하는 아이콘 선언을 검토할 때도 사용할 수 있습니다.

사용 예시

“사이트의 favicon을 점검하고 빠진 형식과 크기를 알려 주세요.”
“모바일과 PWA용 아이콘 설정을 정리해 주세요.”
“출력된 HTML의 아이콘 선언을 확인해 주세요.”

주의 사항

최소 구성으로 32×32 favicon.ico와 180×180 apple-touch-icon.png가 제시되어 있습니다. 생성 도구로는 RealFaviconGenerator와 favicons npm 패키지가 언급됩니다. 최종적으로 브라우저에 전달되는 HTML에서 설정을 검증합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

문서 점검

AI가 SKILL.md의 내용에서 주의가 필요한 작업과 도입 전제를 확인했습니다. 점수는 실제로 실행한 결과(실행 검증)만으로 매깁니다.

안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호이미지 생성과 설정 변경을 다루지만 외부 전송, 삭제, 인증 정보 읽기는 지시하지 않습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: B일부 부족RealFaviconGenerator와 favicons npm 패키지를 제시하지만 도입 절차는 없습니다.

점수에는 넣지 않았습니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(2)

SKILL.md1.7 KB
references/rule.md21.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Implement favicons for all devices

Missing or low-quality favicons make sites look unprofessional in browser tabs, bookmarks, and home screens—damaging brand recognition and user trust.

Quick Reference

Minimum: favicon.ico (32x32) + apple-touch-icon.png (180x180)
Modern: SVG favicon with dark mode support
PWA: Include in manifest.json with multiple sizes
Use RealFaviconGenerator or favicons npm package

Check

Verify that all necessary favicon formats and sizes are implemented correctly for optimal display across different browsers, devices, and platforms.

Fix

Generate and implement a complete favicon set including ICO, PNG, SVG, and mobile/PWA icons with proper HTML declarations.

Explain

Explain how proper favicon implementation improves brand recognition, user experience, and ensures consistent display across all browsers and devices.

Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Implement favicons for all devices. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/html/favicons

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬