Image Tool — Crop, Convert & Icon Studio

Crop & Resize Settings

Image Source

Target Width (px)

Target Height (px)

Lock Selection to Target Aspect Ratio Scale Cropped Selection to Target Dimensions (Optional Resizing)

Output Format Quality: 92%

Selection Coordinates (Source Image Pixels)

Left (X)

Top (Y)

Width

Height

Upload an image to start cropping.

Interactive Crop Preview

Upload an image to preview and drag a crop selection.

Interactive Cropping: Click and drag inside the blue selection frame to move it over any area (e.g. a logo on the left). Drag the corner handles or drag across the image to redraw the selection area.

PNG → ICO

Source imageIcon sizes

No package generated.

Generates one PNG for every requested size and one combined ICO containing every requested size. The ZIP contains all PNG files plus the ICO.

Preview

SVG → PNG

SVG fileOutput widthOutput height

No SVG loaded.

The PNG uses the SVG's native dimensions and preserves its original appearance and transparency.

Preview

Choose an SVG.

Chrome Extension Icon Generator

Source imageIcon shapePadding: 8%

Creates icon128.png, icon16.png, icon32.png, and icon48.png. All four icons are packaged into one ZIP file.

Generated Icons

Copy this code into your manifest.json file.

After putting the icons folder into your project.

        "icons": {
              "16": "icons/icon16.png",
              "32": "icons/icon32.png",
              "48": "icons/icon48.png",
              "128": "icons/icon128.png"
            },

SVG Generator / Editor

Canvas widthCanvas heightSVG markup

<linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#7a9bb0" />
      <stop offset="25%" stop-color="#c8dbec" />
      <stop offset="50%" stop-color="#506a80" />
      <stop offset="75%" stop-color="#98b4cb" />
      <stop offset="100%" stop-color="#3d5468" />
    </linearGradient>

<linearGradient id="metalGradCross" x1="100%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#91abc0" />
      <stop offset="30%" stop-color="#d6e6f5" />
      <stop offset="55%" stop-color="#5c768c" />
      <stop offset="80%" stop-color="#a2bdce" />
      <stop offset="100%" stop-color="#476075" />
    </linearGradient>

<linearGradient id="bevelHighlight" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.85" />
      <stop offset="100%" stop-color="#3a5266" stop-opacity="0.2" />
    </linearGradient>

<linearGradient id="neonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#c2ffff" />
      <stop offset="40%" stop-color="#00f0ff" />
      <stop offset="80%" stop-color="#00a8e8" />
      <stop offset="100%" stop-color="#006699" />
    </linearGradient>

<filter id="glowFilter" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="6" result="blur1" />
      <feGaussianBlur stdDeviation="15" result="blur2" />
      <feMerge>
        <feMergeNode in="blur2" />
        <feMergeNode in="blur1" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

<filter id="dropShadow" x="-30%" y="-30%" width="160%" height="160%">
      <feDropShadow dx="-10" dy="18" stdDeviation="20" flood-color="#000000" flood-opacity="0.85" />
    </filter>
  </defs>

<rect width="1000" height="1000" fill="url(#bgGrad)" />

<g opacity="0.25">
    <circle cx="500" cy="500" r="420" fill="none" stroke="#00e5ff" stroke-width="1.5" stroke-dasharray="8 8" />
    <circle cx="500" cy="500" r="340" fill="none" stroke="#00f0ff" stroke-width="2" />
    <circle cx="500" cy="500" r="260" fill="none" stroke="#0088cc" stroke-width="1.5" stroke-dasharray="16 8" />
    <circle cx="500" cy="500" r="180" fill="none" stroke="#00e5ff" stroke-width="1" />
    
    <line x1="80" y1="500" x2="920" y2="500" stroke="#00e5ff" stroke-width="1" stroke-dasharray="4 8" />
    <line x1="500" y1="80" x2="500" y2="920" stroke="#00e5ff" stroke-width="1" stroke-dasharray="4 8" />
    <line x1="200" y1="200" x2="800" y2="800" stroke="#00f0ff" stroke-width="1" stroke-dasharray="6 6" />
    <line x1="800" y1="200" x2="200" y2="800" stroke="#00f0ff" stroke-width="1" stroke-dasharray="6 6" />
  </g>

<g filter="url(#dropShadow)">

<polygon points="120,160 360,160 280,240 430,390 350,470 200,320 120,400" fill="#091520" />

<polygon points="140,140 380,140 300,220 450,370 370,450 220,300 140,380" fill="url(#metalGradCross)" stroke="#3d566e" stroke-width="2" />

<polygon points="140,140 380,140 360,160 160,160" fill="url(#bevelHighlight)" />

<polygon points="180,180 330,180 280,230 410,360 360,410 230,280 180,330" fill="#030c14" />

<path d="M 190 190 L 320 190 L 275 235 L 390 350 L 350 390 L 235 275 L 190 320 Z" fill="none" stroke="url(#neonGlow)" stroke-width="10" stroke-linejoin="round" filter="url(#glowFilter)" />
    <path d="M 190 190 L 320 190 L 275 235 L 390 350 L 350 390 L 235 275 L 190 320 Z" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round" />

<polygon points="880,840 640,840 720,760 570,610 650,530 800,680 880,600" fill="#091520" />

<polygon points="860,860 620,860 700,780 550,630 630,550 780,700 860,620" fill="url(#metalGradCross)" stroke="#3d566e" stroke-width="2" />

<polygon points="860,860 620,860 640,840 840,840" fill="url(#bevelHighlight)" />

<polygon points="820,820 670,820 720,770 590,640 640,590 770,720 820,670" fill="#030c14" />

<path d="M 810 810 L 680 810 L 725 765 L 610 650 L 650 610 L 765 725 L 810 680 Z" fill="none" stroke="url(#neonGlow)" stroke-width="10" stroke-linejoin="round" filter="url(#glowFilter)" />
    <path d="M 810 810 L 680 810 L 725 765 L 610 650 L 650 610 L 765 725 L 810 680 Z" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round" />

<path d="M 880 160
             L 640 160
             L 720 240
             L 240 720
             L 160 800
             L 240 880
             L 320 800
             L 800 320
             L 880 400 Z"
          fill="#08131e" />

<path d="M 860 140
             L 620 140
             L 700 220
             L 220 700
             L 140 780
             L 220 860
             L 300 780
             L 780 300
             L 860 380 Z"
          fill="url(#metalGrad)"
          stroke="#42586e"
          stroke-width="2" />

<polygon points="860,140 620,140 640,160 840,160" fill="url(#bevelHighlight)" />
    <polygon points="620,140 700,220 680,230 610,160" fill="url(#bevelHighlight)" opacity="0.6" />
    <polygon points="700,220 220,700 235,715 715,235" fill="url(#bevelHighlight)" opacity="0.5" />

<polygon points="810,190 660,190 710,240 240,710 190,760 220,790 250,760 760,250 810,300" fill="#040e16" />

<path d="M 660 190
             L 710 240
             L 245 705
             L 220 770
             L 255 770
             L 770 255
             L 810 295
             L 810 190 Z"
          fill="none"
          stroke="url(#neonGlow)"
          stroke-width="12"
          stroke-linejoin="round"
          filter="url(#glowFilter)" />
    <path d="M 660 190
             L 710 240
             L 245 705
             L 220 770
             L 255 770
             L 770 255
             L 810 295
             L 810 190 Z"
          fill="none"
          stroke="#ffffff"
          stroke-width="3"
          stroke-linejoin="round" />

</g>
</svg>

Image Manipulator

Crop & Resize Settings

Selection Coordinates (Source Image Pixels)

Interactive Crop Preview

PNG → ICO

Preview

SVG → PNG

Preview

Chrome Extension Icon Generator

Generated Icons

SVG Generator / Editor

SVG Preview