-
Posts
-
I generated many different favicons for various iPhones, HiDPI displays, Android, etc. at the following site:
http://realfavicongenerator.net
In response it gave me all the various icon file resolutions I need as well as the following code-snippet I’m supposed to put in my HTML header. Do I edit the /theme/x/header.php file and paste this code in there? Or where is the appropriate place for it? Also, should I create a child theme of X before I do this? Thank you.
<link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-touch-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-touch-icon-114×114.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-touch-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-touch-icon-144×144.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”/apple-touch-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-touch-icon-120×120.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-touch-icon-76×76.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-touch-icon-152×152.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-touch-icon-180×180.png”>
<link rel=”icon” type=”image/png” href=”/favicon-192×192.png” sizes=”192×192″>
<link rel=”icon” type=”image/png” href=”/favicon-160×160.png” sizes=”160×160″>
<link rel=”icon” type=”image/png” href=”/favicon-96×96.png” sizes=”96×96″>
<link rel=”icon” type=”image/png” href=”/favicon-16×16.png” sizes=”16×16″>
<link rel=”icon” type=”image/png” href=”/favicon-32×32.png” sizes=”32×32″>
<meta name=”msapplication-TileColor” content=”#da532c”>
<meta name=”msapplication-TileImage” content=”/mstile-144×144.png”>Also, I wonder whether it still make sense to upload an icon file to the X theme’s Customize > Site Icons area, given that it is much simplistic way of handling favicons (i.e., not all the resolutions of various devices as produced by http://realfavicongenerator.net)?
Hi there,
Thank you for writing in!
Yes, you can simply upload your icons in the Customzer. Please check this: https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
If you want to display specific/different icons for each device, then you need to add the generated code in the head of your document.
Thanks!
How do I ‘add the generated code in the head of your document?’ Is that simply by modifying header.php under the x theme folder?
Hi there,
Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.
Then you can copy the file “_navbar.php” which is under (“X/framework/views/global/”) into your Child theme’s respective location (“child-theme/framework/views/global/”) and then you can commit your edits to override the file.
Hope that helps.
Thank you. You mentioned _navbar.php but did you mean to say _header.php?
Hi here,
Thank you and our apologies, you are correct it should be the _header.php within the <head></head> tags below <?php wp_head(); ?>.
Hope this helps, Thanks!
Excellent! That worked.
Glad to hear. 🙂
