Home Newspaper 7 Documentation Logo & Favicon in Newspaper Theme

Logo & Favicon in Newspaper Theme

Newspaper theme allows you to set your logo as an image file or a text. It is only required to upload one logo and it will be used in every location. Newspaper is retina ready, so your have an additional option to upload a retina logo for high resolution devices.

How to add a logo

To upload a logo go to Theme Panel > Header and expand the Logo & Favicon section. You will find 3 options: Logo upload (default logo for desktop), Retina Logo Upload (Retina Version for retina ready devices) and Favicon (optional). Please read below how to set up logo for you website.

Logo upload

To upload your logo, go to Theme Panel > Header and open the Logo & Favicon section. Logo upload is the section where you add a logo for the desktop. Logo must be a .png or .jpg file.

The text logo can be used only by Style 9, Style 10 and Style 11. The other header styles use only images for logos. If you want to use Style 9, Style 10 and Style 11 for the header you can write your text in Text logo area and will be used as a logo.

Note: if you have a logo uploaded any text logo will be ignored.

After finishing the upload click the Save Setting button.

Retina logo upload

To upload your logo, go to Theme Panel > Header and open the Logo & Favicon section. Retina logo upload is the section where you add a logo for retina ready devices. Logo must be a .png or .jpg file.

  • If you do not set any retina logo, the site will load the normal logo on retina displays.
  • The retina logo must have the same file format and to be double in size with the normal logo.
  • After finishing the upload click the Save Setting button.

Logo Size

There are several Logo Size variations depending on what Header Style you want to use.

Header Style 1, 2, 3

For best results use this logo size:

  • Logo Upload: 272 x 90px
  • Retina Logo Upload: 544 x 180px

Header Style 1

header-style-01

Header Style 2

header-style-02

Header Style 3

header-style-03

Header Style 4, 5

For best results use this logo size:

  • Logo Upload: 132 x 42px
  • Retina Logo Upload: 264 x 84px

Header Style 4

header-style-04

Header Style 5

header-style-05

Header Style 6

For best results use this logo size:

  • Logo Upload: 132 x 74px
  • Retina Logo Upload: 264 x 148px

Header Style 6

header-style-06

Header Style 7

For best results use this logo size:

  • Logo Upload: 240 x 94px
  • Retina Logo Upload: 480 x 188px

Header Style 7

header-style-07

Header Style 8

For best results use this logo size:

  • Logo Upload: 238 x 86px
  • Retina Logo Upload: 476 x 172px

Header Style 8

header-style-08

Header Style 9, 10, 11

For this header styles you can use full width header logo, for example a full width image.

In our Classic Blog Demo we are using Header Style 11 and our logo image has: 500 x 234px.

Your Retina Logo size should be double size: in our case 1000 x 468px

  • Logo Upload: 500 x 234px
  • Retina Logo Upload: 1000 x 468px

Header Style 9

header-style-09x

Header Style 10

header-style-10

Header Style 11

header-style-11

Header Style 12

For best results use this logo size:

  • Logo Upload: 190 x 60px
  • Retina Logo Upload: 380 x 120px

Header Style 12

header-style-12

Logo for mobile

1. You can optionally load a different logo on mobile phones and small screens. Usually the logo is smaller so that it can fit in the smart affix menu.

  • To upload your logo for mobile, go to Theme Panel > Header and open the Logo for mobile section. Logo mobile is the section where you add a logo for the mobile.

2. iPhone, iPad, Samsung S3 S4 S5 and a lot of phones use the Retina Logo.

  • To upload your Retina Logo for mobile, go to Theme Panel > Header and open the Logo for mobile section. Retina logo Mobile is the section where you add a logo for version for retina ready devices.

Mobile Logo Size

For best results use this logo size:

  • Logo Mobile: 132 x 42px
  • Retina Logo Mobile: 264 x 84px

Notices:

  • If you don’t upload any Logo Mobile the default one will be used (the one you set on the Logo & Favicon section). This option is recommended when the default logo doesn’t scale perfectly on mobile devices.
  • Don’t upload a logo for Mobile if you use Header Style: Style 4, Style 5, Style 6, Style 7, Style 8 or Style 12. It’s not necessary.

Favicon Upload

The Favicon is an icon associated with a URL that is variously displayed, such as in a browser’s address bar or next to the site name in a bookmark list.

To add a favicon to your website go to Theme Panel > Header and open the Logo & Favicon section, select the favicon file you would like to use and click Upload. Your Favicon must be a .png file.

  • Recommended size for Favicon image is 16px x 16px.
  • After finishing the upload click the Save Setting button.

iOS Bookmarklet

The bookmarklets work on iOS and Android. When a user adds your site to the home screen, the phone will download one of the icons from here (based on the screen size and device type) and your site will appear with that icon on the home screen.

In this section you can upload the icon you would like to be displayed. The icon must be a .png file.