はじめに
iconの生成からhtmlコーディングアイコン用のsvgファイルを持っていない方向けの解説です。
- サイトを表示した時に、タイトルしか表示されないので、悲しい。
- お気に入りアイコンが表示されなくて、悲しい。
検索ワード:html favicon/HP用ブックマークアイコン/お気に入りアイコン/サイトurlアイコン/HP favicon
用意するもの
- favicon アイコン
ブックマーク\お気に入り\サイトurl 表示用画像
700*700px 以下 画像形式：svg 又はpng jpg
(svgがあれば色々と省くことができます。) - HPのhtml
お気に入りアイコン 設定
favicon(アイコン)を生成
- 今回はpng.jpg画像のアイコン生成についての解説。
様々な表示ディスプレイに対応するiconを作ります。
(例：PC、スマホ、タブレット等)色々なサイズを作るため、外部サイトでアイコンを一括生成します。
- 外部サイト：様々なファビコンを一括生成。favicon generator(https://ao-system.net/favicongenerator/)
画像がsvgであれば、変換しなくて大丈夫ですが、注意点があります。
※svg対応していないブラウザ：ie等の古いブラウザ
ie等の古いブラウザに対応したい時は、変換してsvgと一緒にhtmlコードで指定。faviconを一括生成
様々なファビコンを一括生成。favicon generator
今回はこの外部サイト：様々なファビコンを一括生成。favicon generatorを使っていきます。https://ao-system.net/favicongenerator/
サイトアクセス
ファビコン一括生成 クリック
ファビコンダウンロード(左下) クリック (zipダウンロードが始まります)
favicon設定用htmlコード ※サイト下にスクロール
favicon作成 終了
favicon 作成後 html反映
htmlファイルにfavicon画像を追加
- favicon.zipを展開
・私は展開した後にpngファイルのごちゃごちゃなのが嫌なので、favicon内にpngファイルを作成し、pngファイルを移動しています。
※favicon generatorでコピーした、デフォルトhtmlコードを使いたければ移動しないでください。
- html コード編集
head 記載
<!-- favicon --> <meta name="msapplication-square70x70logo" content="favicon/png/site-tile-70x70.png"> <meta name="msapplication-square150x150logo" content="favicon/png/site-tile-150x150.png"> <meta name="msapplication-wide310x150logo" content="favicon/png/site-tile-310x150.png"> <meta name="msapplication-square310x310logo" content="favicon/png/site-tile-310x310.png"> <meta name="msapplication-TileColor" content="#0078d7"> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico"> <link rel="icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="favicon/png/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="favicon/png/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="favicon/png/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="favicon/png/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="favicon/png/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicon/png/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="favicon/png/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicon/png/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="favicon/png/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="36x36" href="favicon/png/android-chrome-36x36.png"> <link rel="icon" type="image/png" sizes="48x48" href="favicon/png/android-chrome-48x48.png"> <link rel="icon" type="image/png" sizes="72x72" href="favicon/png/android-chrome-72x72.png"> <link rel="icon" type="image/png" sizes="96x96" href="favicon/png/android-chrome-96x96.png"> <link rel="icon" type="image/png" sizes="128x128" href="favicon/png/android-chrome-128x128.png"> <link rel="icon" type="image/png" sizes="144x144" href="favicon/png/android-chrome-144x144.png"> <link rel="icon" type="image/png" sizes="152x152" href="favicon/png/android-chrome-152x152.png"> <link rel="icon" type="image/png" sizes="192x192" href="favicon/png/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="256x256" href="favicon/png/android-chrome-256x256.png"> <link rel="icon" type="image/png" sizes="384x384" href="favicon/png/android-chrome-384x384.png"> <link rel="icon" type="image/png" sizes="512x512" href="favicon/png/android-chrome-512x512.png"> <link rel="icon" type="image/png" sizes="36x36" href="favicon/png/icon-36x36.png"> <link rel="icon" type="image/png" sizes="48x48" href="favicon/png/icon-48x48.png"> <link rel="icon" type="image/png" sizes="72x72" href="favicon/png/icon-72x72.png"> <link rel="icon" type="image/png" sizes="96x96" href="favicon/png/icon-96x96.png"> <link rel="icon" type="image/png" sizes="128x128" href="favicon/png/icon-128x128.png"> <link rel="icon" type="image/png" sizes="144x144" href="favicon/png/icon-144x144.png"> <link rel="icon" type="image/png" sizes="152x152" href="favicon/png/icon-152x152.png"> <link rel="icon" type="image/png" sizes="160x160" href="favicon/png/icon-160x160.png"> <link rel="icon" type="image/png" sizes="192x192" href="favicon/png/icon-192x192.png"> <link rel="icon" type="image/png" sizes="196x196" href="favicon/png/icon-196x196.png"> <link rel="icon" type="image/png" sizes="256x256" href="favicon/png/icon-256x256.png"> <link rel="icon" type="image/png" sizes="384x384" href="favicon/png/icon-384x384.png"> <link rel="icon" type="image/png" sizes="512x512" href="favicon/png/icon-512x512.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon/png/icon-16x16.png"> <link rel="icon" type="image/png" sizes="24x24" href="favicon/png/icon-24x24.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon/png/icon-32x32.png"> <link rel="manifest" href="favicon/manifest.json"> <!-- /favicon -->html head favicon 書き込み 終了
終わり