Have any logical order for head tags elements or matter?

<head>
<meta charset="utf-8" />
<title>blabla</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="blabla" />
<meta name="keywords" content="blabla" />
<meta content="" name="author" />
<!-- FAVICON -->
<link rel="shortcut icon" href="[images/favicon.ico](http://.in/bizzcane/images/favicon.ico)">
<!-- BOOTSTRAP -->
<link href="[css/bootstrap.min.css](http://.in/bizzcane/css/bootstrap.min.css)" rel="stylesheet" type="text/css" />
<!-- MAGNIFIC POPUP -->
<link href="[css/magnific-popup.css](http://.in/bizzcane/css/magnific-popup.css)" rel="stylesheet" type="text/css" />
<!-- ICON -->
<link href="[css/materialdesignicons.min.css](http://.in/bizzcane/css/materialdesignicons.min.css)" rel="stylesheet" type="text/css" />
<link href="[css/fontawesome.css](http://.in/bizzcane/css/fontawesome.css)" rel="stylesheet" type="text/css" />
<link href="[css/pe-icon-7-stroke.css](http://.in/bizzcane/css/pe-icon-7-stroke.css)" rel="stylesheet" type="text/css" />
<!--OWL SLIDER-->
<link rel="stylesheet" href="[css/owl.carousel.min.css](http://.in/bizzcane/css/owl.carousel.min.css)"/>
<link rel="stylesheet" href="[css/owl.theme.css](http://.in/bizzcane/css/owl.theme.css)"/>
<link rel="stylesheet" href="[css/owl.transitions.css](http://.in/bizzcane/css/owl.transitions.css)"/>
<link rel="stylesheet" href="[css/slick-theme.css](http://.in/bizzcane/css/slick-theme.css)"/>
<link rel="stylesheet" href="[css/slick.css](http://.in/bizzcane/css/slick.css)"/>
<!-- Custom Css -->
<link href="[css/style.css](http://.in/bizzcane/css/style.css)" rel="stylesheet" type="text/css" />
<link href="[css/colors/default.css](http://.in/bizzcane/css/colors/default.css)" rel="stylesheet" id="color-opt">
</head>

Is matter what is first? I mean charset i thnk need be first after metas? after that link? or vice versa? viewport can be last?

Thanks!