【Laravel】파비콘(WEB 브라우저 탭의 아이콘)을 간단하게 작성·설정하는 방법

7224 단어 CSSHTML5라라벨파비콘

사용할 사이트



Favicon & App Icon Generator





사용하는 것은 이쪽의 사이트.
어떤 크기라도 좋기 때문에 이미지를 준비해 두면, 그것을 파비콘용으로 가공·생성해 줍니다.

Favicon & App Icon Generator

파비콘을 만드는 법



파비콘으로 만들 이미지를 준비하고 Favicon & App Icon Generator에 액세스
파일을 업로드합니다.


전환 후의 화면에서 파비콘화된 화상을 DL한다


이 화면의 HTML 태그는 나중에 사용합니다.

파비콘 설정



앱에 파비콘 배치



· welcome.blade.php 가 레이아웃 구성을 담당하는 blade 파일
라는 설정으로 배치합니다.

①resources 디렉토리에 이미지를 저장한다 image 디렉토리를 작성
② 추가로 image 안에 favicon 디렉토리를 작성
③ favicon 안에 앞서 DL한 파비콘 이미지를 이동

레이아웃 구성을 담당하는 blade 파일로 참조


welcome.blade.php 의 태그에 방금 전의 favicon DL 페이지의 HTML 태그를 복사합니다.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">

href(참조 경로) 수정



href의 href (경로)는 welcome.blade.php의 상대 경로입니다.
따라서 복사한 href를 모두 아래와 같이 수정합시다.
href="../images/favicon/apple-icon-57x57.png"

이것으로 설정이 완료됩니다!
레이아웃에서 사용하고 있는 blade 페이지를 표시하면 파비콘이 설정되어 있는 것을 알 수 있습니다.
fullcalendar를 사용해 이벤트 관리할 수 있는 것을 만들자. ①준비
HTML5로 음악을 흘리는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage