title: <img src=...> does not display local images in WordPress header.php and index.php
body: <p>I am trying to use a simple <code>&lt;img src=</code> tag to link to a favicon.ico in my header.php file and a .png logo in my index.php file in my WordPress theme, but without any luck. I've tested the link by replacing it with a hyperlink to an image hosted online, which works and proves that the <code>&lt;img src=</code> tag isn't broken, but obviously I would prefer to be able to have the images linked within an internal img folder in the theme. The background image I have used in my site (which is linked in the bootstrap.css and is in the same 'img' folder as the two images I am trying to link to) works perfectly. I've tried copying the formatting of that href link but it doesn't seem to work either.</p>
  
  <p>I've tried many variations of <code>'img/favicon.ico'</code>, <code>'/img/favicon.ico'</code>, <code>'../img/favicon.ico'</code> but none of them worked to link to the image files in both cases.</p>
  
  <p>Here is my code for the header.php file:</p>
  
  <pre><code>&lt;?php
  /**
   * The header for our theme
   *
   * This is the template that displays all of the &lt;head&gt; section and everything up until &lt;div id="content"&gt;
   *
   * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
   *
   * @package wpbootstrap-sofa
   */
  
  ?&gt;&lt;!DOCTYPE html&gt;
  &lt;html &lt;?php language_attributes(); ?&gt;&gt;
  &lt;head&gt;
  &lt;meta charset="&lt;?php bloginfo( 'charset' ); ?&gt;"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="profile" href="http://gmpg.org/xfn/11"&gt;
  &lt;link rel="icon" href='../img/favicon.ico'&gt;
  &lt;!-- Bootstrap core CSS --&gt;
  
  
  &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
  
  
  &lt;!-- Custom styles for this template --&gt;
  
  
  &lt;!-- Just for debugging purposes. Don't actually copy these 2 lines! --&gt;
  &lt;!--[if lt IE 9]&gt;&lt;script src="../../assets/js/ie8-responsive-file-warning.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
  
  &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
  &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
      &lt;?php wp_head(); ?&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="background"&gt;
  
          &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="index.html"&gt;home&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="collapse navbar-collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="active"&gt;&lt;a href="index.html"&gt;home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#about"&gt;about&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#blog"&gt;blog posts&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#submit"&gt;submit&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#events"&gt;events&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#mailing"&gt;mailing list&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://uqsofa.bigcartel.com/" target="_blank"&gt;store&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!--/.collapse navbar-collapse --&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;div class="container"&gt;
  </code></pre>
  
  <p>And here is the code for the index.php file:</p>
  
  <pre><code>&lt;?php
  /**
   * The main template file
   *
   * This is the most generic template file in a WordPress theme
   * and one of the two required files for a theme (the other being style.css).
   * It is used to display a page when nothing more specific matches a query.
   * E.g., it puts together the home page when no home.php file exists.
   *
   * @link https://codex.wordpress.org/Template_Hierarchy
   *
   * @package wpbootstrap-sofa
   */
  
  get_header(); ?&gt;
  
  &lt;div class="starter-template"&gt;
      &lt;div class="row"&gt;
              &lt;div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3"&gt;
          &lt;div class="center-block"&gt;
              &lt;a href="index.html"&gt;
                      &lt;img src='../img/sofa-logo.png' class="img-responsive center-block" alt="UQ SoFA logo"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- /.center-block --&gt;
      &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="row"&gt;
                  &lt;div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4"&gt;
                          &lt;div class="navbar-collapse collapse sidebar-navbar-collapse"&gt;
                                  &lt;ul class="nav navbar-nav"&gt;
                                      &lt;li class="active"&gt;&lt;a href="index.html"&gt;home&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#about"&gt;about&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#blog"&gt;blog posts&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#submit"&gt;submit&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#events"&gt;events&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#mailing"&gt;mailing list&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="http://uqsofa.bigcartel.com/" target="_blank"&gt;store&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;!--/.collapse navbar-collapse --&gt;
                      &lt;/div&gt;
                      &lt;!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 --&gt;
  
                  &lt;div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"&gt;
                          &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-body"&gt;SoFA at Market Day&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.panel panel-default--&gt;
                          &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-body"&gt;Cut Thumb ARI&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.panel panel-default--&gt;
                          &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-body"&gt;GoMA Talks&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.panel panel-default--&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4--&gt;
  
                  &lt;div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"&gt;
                          &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-body"&gt;Interview with...&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.panel panel-default--&gt;
                          &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-body"&gt;Lecture by...&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.panel panel-default--&gt;
                          &lt;div class="panel panel-default"&gt;
                                  &lt;div class="panel-body"&gt;Post #474&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- /.panel panel-default--&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4--&gt;
          &lt;/div&gt;
          &lt;!-- /.row--&gt;
  &lt;/div&gt;
  &lt;!-- /.starter-template--&gt;
  
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  
  &lt;/div&gt;
  &lt;!-- /.background --&gt;
  
  
  &lt;?php
  get_footer();?&gt;
  </code></pre>
  
  <p><a href="https://imgur.com/a/T0eZH" rel="nofollow noreferrer">Linked here is a screenshot of the configuration of my theme's folders, including the 'img' folder where the images are contained</a>.</p>
  
  <p>Any help that could be provided would be much appreciated.</p>