Costom Marker

index.html

       <script src="/Leaflet/dist/leaflet.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <div id="map" style="height: 700px"></div>
            <script>
            var map = new L.Map('map');
            var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/4a94630d171f47a9a62cf3c7fc99de47/997/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 18
            });

            var sanFrancisco = new L.LatLng(37.7935790, -122.45192); // geographical point (longitude and latitude)
            map.setView(sanFrancisco, 13).addLayer(cloudmade);
            
            var iconPic = new L.Icon({
                iconUrl: "http://icons-ak.wxug.com/i/c/k/partlycloudy.gif"
            });
	          var markerRichmond = new L.Marker(new L.LatLng(37.782398, -122.471497), {icon: iconPic});
            map.addLayer(markerRichmond);
            markerRichmond.bindPopup("Hello World!").openPopup();
            </script>