From the partial screen shot that you have in your question, it looks like you are using a page that doesn't specify showHeader="false". That means that you will get the standard Salesforce header which includes the Salesforce logo.
The tutorial code is not to replace that logo, but rather it is to replace a logo that comes with the example site pages that are generated.
When I create a site, I get the following generated for a SiteTemplate and SiteHeader component. Note that it has showHeader="false", which would prevent the logo in your question from being displayed, but instead would display the force_logo.gif (pictured directly below).
SiteTemplate page
<apex:page showHeader="false" id="SiteTemplate">
<apex:stylesheet value="{!URLFOR($Resource.SiteSamples, 'SiteStyles.css')}"/>
<apex:insert name="header">
<c:SiteHeader />
<hr/>
</apex:insert>
<apex:insert name="body"/>
<apex:insert name="footer">
<hr/>
<c:SiteFooter />
<site:googleAnalyticsTracking />
</apex:insert>
</apex:page>
SiteHeader component
I changed the <apex:imageUrl> to match the after of the tutorial, i.e., {!Resource.Logo}.
<apex:component id="headerComponent">
<apex:panelGrid cellpadding="0" cellspacing="0" width="98%" border="0" columns="2" style="text-align: left;" id="theHeader">
<apex:image url="{!Resource.Logo}" style="align: left;" alt="Salesforce" width="233" height="55" title="Salesforce"/>
<apex:panelGrid cellpadding="0" cellspacing="0" width="100%" border="0" columns="1" style="text-align: right;" id="Links">
<apex:panelGroup rendered="{!AND(ISPICKVAL($User.UserType,'Guest'), $Site.LoginEnabled)}">
<apex:outputLink value="/site/SiteLogin.apexp">{!$Label.site.login_button}</apex:outputLink>
<apex:outputText value=" | "/>
<apex:outputLink value="/site/ForgotPassword.apexp">{!$Label.site.forgot_your_password_q}</apex:outputLink>
<apex:outputText value=" | " rendered="{!$Site.RegistrationEnabled}"/>
<apex:outputLink value="/site/SiteRegister.apexp" rendered="{!$Site.RegistrationEnabled}">{!$Label.site.new_user_q}</apex:outputLink>
</apex:panelGroup>
<apex:outputLink value="{!$Site.Prefix}/secur/logout.jsp" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}">{!$Label.site.logout}</apex:outputLink>
</apex:panelGrid>
</apex:panelGrid>
</apex:component>
If you want to create a page that uses that SiteTemplate then you need to create a page that uses it in an <apex:composition> tag, such as below. You can see an example in the SiteLogin page.
<apex:page id="loginPage" showHeader="false" title="{!$Label.site.site_login}">
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
SiteLogin page has lots of code here for getting login info...
</apex:define>
</apex:composition>
</apex:page>
That page will use the SiteTemplate which uses the SiteHeader which has the <apex:image> tag.
After doing that your SiteLogin page would look something like the following, where I used our good friend Saasy as a logo.
.
There is more on templates in the Visualforce Developer's Guide.
Update
Based on @Avidev9's comment, the desired logo change is not the one in the tutorial. The desired logo is actually the logo of the standard Platform App.
In your Site Details click on the Public Access Settings to get to the Site's Guest User profile. Then click Edit and you'll see the Platform Custom App is marked Visible and the Default. So, the way that you'd customize that App's logo would be to go into the the normal App setup and edit the logo, except there's a catch...you cannot edit the Platform App's logo.
From the documentation on Editing App Properties:
Note that you cannot change the label, description, or logo for a
standard app.
However, if you really want to you can create a different, custom app, with your own logo, and change the Site's Guest User profile to use that.
