Private Fantasticのホームページへ

[初めてのｗｅｂサイト作成レッスン３]
ＰＣブラウザのタイトルタブにアイコンを表示させよう

メニュー

🌹レッスン３🌹

ＰＣブラウザのタイトルタブやスマホにアイコンを表示させよう

目次

1.　タイトルタブにアイコン
2.　画像の準備
3.　タブアイコンの設定

　🌻パソコンのブラウザはGoogle Chromeを使用しています。

1.　タイトルタブにアイコンを表示させよう

赤丸の部分です

アイコン

まず表示させたい画像を用意します。


2.　画像の準備

準備するパソコン用の画像サイズは

  • 「16×16px」インタネットエクスプローラー用
  • 「32×32px」Chrome Firefox Safariブラウザ
  • 「48×48px」Windows用
  • 「64×64px」高解像度のWindowsDesktop用
  • 「180×180px」アップルスマホ用
  • 「256×256px」アンドロイドスマホ「favicon.ico」さえ用意していれば、png形式は不要
  • 「260×260px」「favicon.ico」というものが必要で、拡張子が.ｉｃｏのファイル作成用の画像が必要とｗｅｂで調べました

今回用意する画像は写真ではないので、ｊｐｅｇではなく、ｐｎｇかｇｉｆがいいと思います。

私は、絵をかくのが下手なので、無料イラストをダウンロードしました。

パソコンにプリインストールされている、ペイントでサイズ変更しご自分の管理しやすいファイル名で保存していきます。

フォルダ

3.　＜head＞＜/head＞の間にタブアイコンの設定をしていきます。

"ico/xxxxxx" の部分をご自分が用意された画像ファイル名に変えてくださいね。

下記の桃色の文字の部分を入力します。

<head>
<link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
<link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
<link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
<link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />
</head>

上書き保存します！

それと、拡張子が「.ico」のファビコンというものが必要でした。

https://ao-system.net/alphaicon/

私は上記のサイトで間違えて、248×248pxサイズで無料で作ってもらいました。

でも問題ないから、私はこのままでいいや(^^ゞ

皆さんは、256×256pxサイズで用意してみてね！

☆ｲﾝﾀｰﾈｯﾄｴｸｽﾌﾟﾛｰﾗｰのコードを追加

Windows 7と同様、インターネットエクスプローラー8～10は、既にマイクロソフトのサポートが終了していますので、省略します。

Windows 10ではOS標準ブラウザがMicrosoft Edgeへと正式に切り替わり、IEの開発は事実上、終了しています。

下記の桃色の文字の部分を入力します。

<head>
<link rel="icon" href="ico/itigofavicon248px.ico"/>
</head>

上書き保存します！

☆スマホ用アイコンのコードを追加

下記の桃色の文字の部分を入力します。

<head>
<link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
<link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
<link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
<link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />
<link rel="icon" href="ico/itigofavicon248px.ico"/>
<link rel="apple-touch-icon-precomposed" href="ico/itigo180px.png" />
</head>

上書き保存します！

追加したコードの説明

スマホのブラウザで表示させるためのコードです。

お気に入りやブックマークに登録するとアイコンが表示されるようになります。

アイコン

See you again Take care
(^.^/)))~~~bye!!


TOP