Tips and Snips: Creative Website Hacks for Creative People
Browsing Tag
html
HTML•WordPress

Create a tiny browser icon for your site ID

tabbed browser icon or favicon
August 19, 2020 by Diane Metcalf, M.S.I.T. 1 Comment

A browser icon or favicon is not just a cute decoration for a website. It’s a cool way to create a unique website identity and keep website visitors aware of the sites they’re on. It makes your site stand-out in a browser full of open tabs and bookmarks.

When a page or site is bookmarked or “favorited” the browser icon or favicon will be displayed in the bookmarks list as well.

Web designers and developers can create a browser icon or favicon for a site or page, by using HTML or WordPress.

To create a browser icon or favicon

One way os to make it from scratch with a program such as Canva, or drawing it with an online app like Favicon.cc. It has a preview feature which is great for seeing progress as you go.

I’ve recently learned from one of my readers that while favicon.cc does a good job, it’s limited in that it doesn’t allow for generating favicons for various screen sizes and resolutions at the same time.  She found a pretty sweet, free, online favicon generator at Websiteplanet and suggested that I mention it. With this particular tool, you can create favicons from JPG, PNG, GIF (or even from a gallery) that are up to 5 MB in size, and it also has the capability to generate favicons for different resolutions and screen sizes at the same time. (Thanks, Paola!)

Another way you can convert an existing image into an icon is by using FavIcon from Pics, another free online favicon generator. It’s also one I’ve tried, and works well, even when using it on a Smartphone.

Use a simple image along with the organization’s brand colors, to give the site some brand recognition. The logo might work as an icon image if it’s not too complicated. Since these icons are tiny, logo details won’t show.

PNG favicons are supported by most browsers.  For backwards compatibility, use ICO favicons.

Using HTML

To add a browser icon or favicon to a website by using HTML:

  1. Save the icon image as imagename.ico, or imagename.jpg
  2. Save imagename.ico or imagename.jpg to the root directory of the website.
  3. To identify the favicon to web browsers, so they can display it correctly, you’ll need to add this code to the head tag:

<head>

<link rel=”icon” href=”http://website.com/imagename.jpg” />

Using WordPress

Prepare the image

The image needs to be 500 x 500 px in width and height. As mentioned before, keep the image simple.

Open Customizer in the WordPress Admin area

Go to Appearance > Customize.

Click “Site Identity” 

This is the area where you can edit the site title, description and also upload the browser icon.

Click “Select Image”

From Media Library > Upload Files, browse for the prepared image on your computer and upload it to the Media Library. WordPress allows cropping, but I think it works out best if  the image is already the recommended size before uploading.

Publish

Click Save & Publish.

Enjoy and let me know how it goes!

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 Create a tiny browser icon for your site ID

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
Bootstrap•CSS•HTML

The correct order for using Bootstrap tags

bootstrap logo
October 4, 2019 by Diane Metcalf, M.S.I.T. No Comments

If you notice that your page isn’t displaying properly; like maybe Bootstrap is using its’ default styles
instead of your custom css, or maybe your drop-down menu isn’t working, it could be that you need to
check the order of your Bootstrap tags.

The order of the tags is very important for your page to look and work like you want it to.

Check the head and make sure you have the meta tags correct. (The 3rd tag is necessary to display the page on mobile devices.)

<head>

<meta charset=”utf-8″>
<meta content=”IE=edge” http-equiv=”X-UA-Compatible”>
<meta content=”width=device-width, initial-scale=1″ name=”viewport”>

The above 3 meta tags must come first in the head; the other head content comes after them.

<title>Page Title Here</title>

Next is the Bootstrap core css:
<link href=”css/bootstrap.css” rel=”stylesheet”> OR
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Your own style sheets come next
<link href=”css/mystyle.css” rel=”stylesheet” />
</head>

The Bootstrap Core JavaScript files (jquery.min.js and bootstrap.js) are at the end, right before the closing body tag, so the pages will load faster.

Which Bootstrap css version should you use? It depends whether you want to be able to read it or not. Bootstrap.min.css is a mini version of bootstrap.css. All of the white space and other extra characters have been removed, to decrease the file size. This version is usually used in production. When you’re developing, it’s helpful to use the regular version because it’s legible.

Read more at https://getbootstrap.com/docs/3.3/getting-started/

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 The correct order for using Bootstrap tags

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 2 min
HTML

Basic HTML (Hypertext Markup Language) Vocabulary Rules
September 4, 2019 by Diane Metcalf, M.S.I.T. No Comments

Element: an individual component of an HTML document. HTML documents are comprised of elements called “tags” and “attributes”.

 

Tag:  Tags identify the different parts of an HTML document so a web browser will know how to display the page.

Tags are always contained inside of a set of tag brackets: <the open tag> </this tag is now closed>. A closing tag is exactly the same as the opening tag but it has a  “/”.
  
There are two basic types of tags in HTML: Semantic tags and Structural tags
Semantic tags give meaning to the content they enclose. So, an example would be  the paragraph tag, used for creating…wait for it….PARAGRAPHS in the web page! This <p> is a  paragraph tag. The tag identifies the type of content it contains (a paragraph). You would create a paragraph like this:
<p> This is my paragraph. This is my paragraph. This is my paragraph. </p>
 
Remember: we must add a </p> to close the tag. An element that is not closed may not display properly.
 
Structural tags are used to organize the HTML document. For example, using  a <div> </div>tag will divide the page into logical subsets of content.
  

HTML tags are either “block”  level elements or “inline”  level elements.

 
Block level elements have a line break after the closing tag. Block level elements can contain other tags and elements as well. Example: <ul><li></li></ul>
 
 Inline level elements are placed next to each other (like they’re on the same line) and  they do not have a line break after the closing tag.
 Inline level elements cannot contain other tags.
Example:
<span>Content</span> 
<span>Content</span> 
These would actually display side by side.
 
HTML is not case sensitive, but is usually written in lower case.  HTML completely ignores line breaks, tabs and spaces, so if you want to use extra space to make your code more readable while you’re developing, that’s OK because the browser will just ignore the extra white space.
 
Attributes are additional values that configure the elements or adjust their behavior  to meet user needs.
The CLASS attribute gives us a way of classifying similar elements. It can be used for semantic purposes, or for presentations.

For example: <p class=”paragraph” > would give us a way to classify all of our paragraph presentation styles, so every paragraph is formatted the same way:

.paragraph{
font-family:
font-weight:
color:
}
 

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 Basic HTML (Hypertext Markup Language) Vocabulary Rules

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
Design•Entrepreneurs Creatives•HTML

What’s the difference between RENTING and OWNING your site?

Handing over the keys
July 22, 2019 by Diane Metcalf, M.S.I.T. No Comments

Renting or Owning: What’s the difference?

Many people don’t even realize that there is an issue of “ownership” to be considered when they think about building a website.

As with anything else, there are pros and cons to consider.

A big consideration is that when you own your site, you possess the “source code” that was used to develop the site. Without these code-files, (or WordPress files) it would not be possible for you or another developer to edit the pages, or to troubleshoot issues in the future.

To maintain control over your site, you need to have these source files.

When you contract with Image and Aspect, you always get your source files at the end of the project. You own them. Just sayin’.

Here are some pointers to help you learn the difference between renting and owning your site.

Renting

When you use a “hosted platform” package-solution, (Do-It-Yourself) it’s considered to be “Software as a Service” (SaaS) and you are renting your website from them. It’s usually a monthly or annual subscription and it has a lower up-front investment cost. Examples: Wix and Shopify.

Owning

Owning requires a custom solution, and there’s a higher up-front investment for this dedicated development. Owning allows for customization and integration with 3rd party services, provides greater flexibility plus there’s room for expansion. There is also less of a chance that you’ll pay for services that you’re not using. Basically you own your piece of web real estate and you can do what you want with it. Let’s think “keeping it within legal parameters .”


What Renters Can Expect

  • Easy for Do-It-Yourselfers.
  • Lower cost of entry.
  • Various paid subscription levels (free, starter, pro, etc.)
  • Add-on modules, plugins or extensions purchased from a dedicated “marketplace”.
  • One combined service for hosting, payment processing, and website administration.
  • Maintained infrastructure & automatic security updates.
  • New features introduced on a regular basis.
  • Technical support in articles, tutorials, videos.
  • A wide selection of design templates (some are free).

The Downside of Renting

  • No equity! When your subscription ends, the time, money and effort you put into building the website are lost.
  • Incremental costs add up. With every add-on, a new cost emerges that is often higher than the original subscription fee. There will be a monthly fee for that one item for the rest of the duration of the website.
  • Possibly little flexibility on the required services for payment processing, hosting, data warehousing.
  • Limited customization for design.
  • If you leave the platform, all the investment in design and development is lost. You can’t take it with you when you move to another hosting provider/webserver. You have to start over.


What Owners Can Expect

  • Customization tailored to specific business requirements.
  • Scalable for future growth.
  • Integration with external services.
  • Open architecture allows for development, the code is portable and not tied to an organization.
  • Freedom of choice for your web hosting, payment processing, and website administration.
  • Important as sales volume increases and competitive processing and transaction fees become critical.
  • Accommodates creative innovations as opposed to waiting for the hosted platform to release updates or fixes.

The Downside of Owning

  • A higher cost of entry.
  • Must be actively maintained – if the site is not maintained through a web developer, (or someone who knows how to code or how to develop with WordPress) there will be no innovation, no new features, no security patching. Eventually, a website will become obsolete as code and formats change over time.
  • Time constraints – building a custom site requires a collaborative effort and considerable thought and engagement from the site owner.

As with everything, there are costs either way. Financial costs, opportunity costs, perceived value costs. The best way to decide on whether to rent or own your website is to look at your long term business goals.

When you’re business takes off and you’re renting your site, will you want or be able to take the time to stay current on how to use the platform? Will you be able to set aside time to update the content, or be on the phone with technical support or Billing? Do you feel comfortable making scheduled full-backups and storing them off-site where they’ll be secure but still easy to find when you need them? Will you feel comfortable restoring your site from a backup if you make a mistake on the site and don’t know how to fix it? Will you have the time and the inclination to research the latest Google SEO changes or the newest security threats? Will you feel comfortable making these changes? Will you be able to quickly and easily find your log-in information, your API keys, and/or your font or photo licenses if a component of your site stops working? Will you keep up with all expiration dates for your domain name, SSL certificates, sub-domains, etc, so nothing accidentally expires? If something expires would you know what to do or who to contact? Do you feel comfortable troubleshooting and fixing text formatting, images, or email issues? If you can do these things, and more importantly you’d ENJOY doing them, well that’s just swell! 🙂

But do yourself a favor and hire a professional. You’re not a web developer already! (unless you are) LOL!

If you choose the DIY route and you get in over your head, you can always call me. I promise not to say I told you so. 🙂

Other articles you might like:

–Things to consider before building your website

–6 Ways to Use Storytelling in Your Blog Posts

–Balancing Consumer Personalization with GDPR Regulation

Questions?

[email protected]

My Contact Page

About the author

diane-author-300x181 What’s the difference between RENTING and OWNING your site?

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 5 min
Page 1 of 212

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Categories

Recent Posts

Older Posts

Tags

Image and Aspect on Instagram