How to Create a Logo for your Website
-
1
Start with a Template
- Use a vector-based program such as Adobe Illustrator to create your design.
- Save the file as a Scalable Vector Graphics (.svg) file. You could also use an Encapsulated PostScript (.eps) file, however are better for print. Both file types can be scaled larger without losing quality.
Need Help?
LinkedIn Learning has courses on logo design, and Digital Services can offer feedback on your logo or create a website logo for you.
-
2
Use a Style Guide
Your agency or department may have a style guide defined by your communications office that governs the colors and fonts used in logos, graphics, presentations, etc. If so, defer to the agency style guide.
Color
If there is no style guide and you would like guidance, the Digital Commons Style Guide provides hex code values for each of the color palettes our platform offers.
Font
The font used is Adobe Source Sans Pro, which comes in several weights. Google Source Sans 3 is comparable. Use little text and make it large enough to be readable.
Mobile
Remember that your logo will appear to be more prominent when displayed on mobile devices compared to a desktop or laptop computer.
The ncarts.org website as viewed on both a mobile device and laptop screen. -
3
Avoid Acronyms
Acronyms may have more than one meaning and visitors may not be familiar with yours. Spell out all important words. Do not use acronyms in logo text.
A Logo A Better Logo An old logo uses the acronym NCLDS which is unclear to visitors.
The new logo spells out North Carolina Longitudinal Data Service.
-
4
Create Artwork that Fills the Available Space
Use a 10:3 ratio. Create a logo that fills the available 250 W X 75 H area. You can create a larger design with a 10:3 ratio, if you like. For example, your logo could be 500 w x 150 h which will be scaled down online. If you want to use an existing logo, you might need to make a variation of it to take full advantage of the space provided.
A Logo A Better Logo This round logo appears very small at 75 x 75 and does not use the entire width available. There is a lot of very small text that is difficult to read. Example: N.C. National Guard
Logo compared to the logo area. This logo makes better use of the available space because, while the circle is still small at 75 x 75, the text fills in the rest of 250 pixel width. Example: N.C. Land and Water Fund
Logo compared to the logo area. -
5
Submit a Support Request
When you are satisfied with your design, the Web Manager will:
- Open a Digital Commons Website Support request.
- Under Type of Request, select Update Logo or Color Palette.
- Provide your website URL.
- Attach the artwork to the support request and submit.
Digital Services will upload the new logo to your website. The platform converts it to a Portable Networks Graphic (.png) file with a transparent background.