0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravelでブラウザのタブなどに表示されるアイコン(ファビコン)作成方法

Last updated at Posted at 2023-05-08

ファビコンとは

ブラウザのタブなどに表示されるWebサイトのアイコンです。

ex)
Youtube ChatGpt GitHub のようなアイコンです。
スクリーンショット 2023-05-08 12.13.52.png

画像作成

ファビコンジェネレーターでまずは画像を作成しました。

自分は野球ボールのアイコンを作成しました。このサイトからダウンロードしました。

baseball.png

作成方法はいろんなやり方あるみたいなので調べてください。

imagesを作成

public配下にimagesフォルダを作成してその中に上でダウンロードした野球ボールの画像をペーストしてきました。

スクリーンショット 2023-05-08 12.16.57.png
!

app.blade.phpに追記

Laravelフレームワークのビューの1つであり、アプリケーションの共通レイアウトを定義するために使うのがapp.blade.phpです。ここに追記していきます。

app.blade.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>野球好きの掲示板</title>
       #都合により省略
        <link rel="shortcut icon" href="{{ asset('images/baseball.png') }}"> //このコードを追記
    </head>

<link rel="shortcut icon" href="{{ asset('') }}">は人によって内容が違うのでこれを実装してみてください。

こうして野球ボールがアイコンになりました。右側のアイコンです。
サイトの中のどのページに移動してもこのアイコンは表示されます。

スクリーンショット 2023-05-08 12.25.12.png

資料

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?