hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

faviconを読み込むコードの正しい書き方。コピペ用。

え?shortcutはIE8以前用やったの・・・?ってなったので削除しました。

どっかから記述をコピペしようと思って見たサイトの記述が見慣れぬもので、ふと気になったので調べました。(結果古かっただけだった)
https://ao-system.net/favicon/

※1
rel属性にshortcut iconと記述するのは、IE8以下に対応する場合のみです。

よって、この記述は現代では不要と言っていいでしょう。

もうtypeもいらん!ふぁー!

正しいfaviconの設定方法を対応ブラウザ別にまとめる | Glatch(グラッチ) – 夫婦で活動するフリーランスWeb制作ユニット
http://glatchdesign.com/blog/web/coding/943

<link rel="icon" href="/path/favicon.ico">

生成サービスなどファビコン自体をつくるのはこちら

デザイナーさんにfaviconとapple-touch-iconについて伝える

コピペ用タグ

というわけで今回WP案件で設置したタグがこちら。ディレクトリは好きに変えてね!

<link rel="icon" href="<?php echo get_template_directory_uri() ?>/assets/images/favicons/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri() ?>/assets/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri() ?>/assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri() ?>/assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_template_directory_uri() ?>/assets/images/favicons/manifest.json">
<link rel="mask-icon" href="<?php echo get_template_directory_uri() ?>/assets/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください