RSS DEV 커뮤니티

플러터 웹 앱(Flutter 3)에서 파비콘 추가하는 방법

"파비콘은 브라우저 탭, 북마크, 앱 바로가기에서 웹사이트를 나타내는 작은 아이콘으로, 플러터 웹 앱에 파비콘을 추가하면 브랜딩과 전문성을 높일 수 있습니다. 플러터 3에 내장된 웹 지원 및 PWA 기능을 사용하면 다양한 플랫폼에서 사용자 지정 파비콘과 앱 아이콘을 쉽게 설정할 수 있습니다. 플러터 웹 앱에 파비콘을 추가하려면 "web" 디렉토리 안에 "icons" 폴더를 만들고 favicon.io 또는 Real Favicon Generator와 같은 도구를 사용하여 아이콘 크기를 생성하세요. "icons" 폴더 안에 manifest.json 파일을 만들어 앱의 아이콘과 표시 속성을 정의합니다. index.html 파일에 파비콘 링크를 추가하고 PWA 지원을 위해 서비스 워커를 등록하세요. 파비콘을 테스트하려면 "flutter build web" 및 "flutter serve" 명령어를 사용하여 앱을 로컬에서 실행합니다. 브라우저 캐시로 인해 파비콘이 업데이트되지 않으면 Ctrl + F5(Windows) 또는 Cmd + Shift + R(Mac)을 눌러 캐시를 재설정합니다. manifest.json 또는 web 폴더가 손상된 경우 "flutter create ."를 사용하여 다시 생성합니다. 최종 폴더 구조는 icons 폴더, manifest.json, index.html 및 flutter_service_worker.js 파일을 포함해야 합니다. 플러터 웹 앱에 파비콘과 PWA 지원을 추가하면 오프라인 액세스, 앱 설치, 플랫폼 아이콘 및 자동 버전 업데이트를 제공하여 사용자 경험과 브랜딩을 향상시킬 수 있습니다."
favicon
dev.to
How to Add Favicon in Flutter Web App(Flutter 3)
Create attached notes ...