見出し画像

ファビコン設定

ファビコン…タグに表示されたページ名の横に出てくる小さなアイコン。

設定の手順

■イラストレーター、フォトショップなどで260PX以上のpngデータを作る。

今回はフリーイラストのピザを使用しました。

画像1

※注意点

・カラー設定

画像2

web上に表示するのでRGB設定にする。

CMYKは紙印刷用の設定。


・書き出し、png設定で保存。

画像3

Web用に保存を選びます。

これで準備はOKです。

■realfavicongeneratorをググる。

画像4

このサイトに入り、【Select your Favicon Image】をクリック。

先程保存したpngデータを選びファビコンを生成する。

Zipファイルで保存されるので、ファイルにカーソルを合わせて右クリック➡【展開する】を選び解凍する。

あとはHTMLの『head』内にコードを書き、リンクさせる。

画像5

6行目 <link rel = "icon" href="~">

画像6

タグのページ名の横にファビコンが現れました。

これでデスクトップPC用のファビコン設定は完了です。

イラストレーターのデータが260PX以下だと、サイズが足りません的なメッセージが出てしまい、生成できませんでした。

サイズが小さすぎると生成できないようです。

2020.9.24(Thu)


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
励みになります\(^^)/
2
Web業界へ転職を目指す飲食業の人です。noteをアウトプットの場として基礎の基礎から記録していきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。