TechSoup.org The place for nonprofits, charities, and libraries

Logo in Web Address & New Window Linking

Logo in Web Address & New Window Linking

  • Hello,

    I use Publisher to edit our nonprofit's website, and am looking for help on two items:

    1. How can I make our organization's logo appear in the web address search box, window tab, and also in the Favorites section? See how a really small techsoup logo appears next to www.techsoup.org? Like that.

    2. When I create links to other websites on my website, how can I make it so that a new window opens for that website when clicked, instead of taking browsers away from my website altogether?

    Thanks for any help out there!

    Molly
  • This will show you how to create a favicon for your website:

    http://www.favicongenerator.com/


    To make links appear in a new window, use the "target" attribute in the HREF tag. I use target="_new"

    Let us know if you need more help!

    Tim Claremont
    Systems Administrator
    Rochester, NY

  • Good advice by Tim.

    As pointed out, that little graphic you see in your browser's address bar when you visit a Web site is known as a "Favicon".

    You can create a Favicon by using a site like the one Tim pointed out, which will generate this graphic for you based on an existing graphic.

    But if you don't already have a logo that you can use, you'll want to create your Favicon from scratch using a program like Photoshop. In this case, you just create a new 16 x 16 pixel image and save it as as favicon.ico ("ico" is the Windows Icon format). Then, upload the graphic to your site's main directory and just insert the small piece of code below in between the < HEAD > < /HEAD > section of every Web page that you want to display the favicon:

    < link rel="shortcut icon" href="http://www.YourWebAddress.org/favicon.ico" / >

    This TechSoup blog nicely summarizes all of the above steps:

    Add an Icon to Your URL

    For Photoshop users, here's a good step-by-step walk-through on creating a Favicon for your site from scratch:

    How To Create A Favicon In Photoshop

    Yann

    Yann Toledano, Digital Marketing Strategist
    YTConsulting.com
    Host, Web Building Forum, TechSoup.org
    Twitter: @webmanyann

  • Thanks for your help with these items! I've created my Favicon (thanks for the correct term), but I am having difficulty getting it to show because I have no idea where I am supposed to insert the code in Publisher. All I know from reading is to paste the code between the HEAD tags, but I cannot for the life of me FIND where these HEAD tags are located in my web document. I am not an expert, but self-taught in all this, so any basic directions on how to get to the proper place in my Publisher document would be greatly appreciated. THANKS!
  • Hi,
    Publisher is not web editing program, that is why you cant find the tags.

    You need and HTML Editor to view it of some kind of software(frontpage, dreamweaver).

    How was your site build?
    Manny M.
  • Hi,
    The web page was created by someone else in Publisher. I edit the file as any other Publisher document, then click "Publish to the Web" from the File menu. As I understand it, it then creates an HTML document that I then "upload" via our ftp address.
  • I've created my Favicon (thanks for the correct term), but I am having difficulty getting it to show because I have no idea where I am supposed to insert the code in Publisher.

    I think the way you would add the code in Publisher is by using the program's "HTML Code Fragment" feature, by following these steps:

    From the Insert menu, click "HTML Code Fragment". In the HTML Code Fragment box, type or paste the HTML code to be inserted into the Web page. Then click OK.

    So basically, what you want to do is to grab this code:



    and put it between the < HEAD > and < /HEAD > tag in your Web pages.

    Remove all the spaces between opening "<" and ">" closing brackets of the HEAD tag and the code above. (The only reason I added spaces is to be able to display the code here properly.)

    You might want to visit this page too:

    Add an HTML code fragment to a Web page [in Publisher]

    Let us know how this works out!

    Yann

    Yann Toledano, Digital Marketing Strategist
    YTConsulting.com
    Host, Web Building Forum, TechSoup.org
    Twitter: @webmanyann