title: How to change the logo depending on page with javascript?
body: <p>I am trying to set my logo to display a bigger logo for desktops and a smaller image for smaller devices like smartphones...</p>
  
  <p>This is what i've tried until now, but it doesn't works.</p>
  
  <p>Can somebody help me? What's wrong with my code?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function load(){
      document.getElementById('logo').src = displaylogo();
  }
  function displaylogo(){
      if ($(window).width() &lt; 1024) {// code for small viewports
          return "http://i.imgur.com/ozYV740.png"; // small logo
      } 
      else {// code for large viewports
          return "http://i.imgur.com/RMV6Af0.png"; //big logo
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="load()"&gt;
      &lt;img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>