Favicon Generator — PNG Icons from Any Image

← Palette AtollThe Creative Island · Island 09

Upload once — download every favicon size: 16, 32, 48 and 180 (Apple touch icon).

Upload an image (PNG/JPG — square works best)

Your image is opened and resized by your own browser — it is never uploaded anywhere.

How to use this tool

1. Upload a square-ish image — a logo mark works best (small text will vanish at 16px).
2. Four icons are generated on your device: 16, 32, 48 and 180 pixels.
3. Download the sizes you need; 180 is the Apple touch icon, the rest are favicons.

Example

A 512×512 logo mark produces favicon-16.png through favicon-180.png — then declare them: <link rel="icon" sizes="32x32" href="/favicon-32.png">

The formula

square-crop the center, then draw to a canvas at each target size

What the result means

The center square of your image is scaled to each standard size — 16px for browser tabs, 32 for taskbars and retina tabs, 48 for desktop shortcuts, 180 for iOS home screens. At 16 pixels, only bold simple shapes survive; if the icon turns to mush, the logo needs a simplified mark, not a bigger upload.

Frequently asked questions

Is my logo uploaded to a server?

No — the image is opened by your browser, resized on a canvas element and turned into download links locally. The file never leaves your device.

What about .ico files?

Modern browsers happily use PNG favicons, which are smaller and simpler. Legacy .ico is only needed for very old browsers.

Why does my detailed logo look muddy at 16px?

16 pixels is 256 dots total — detail is mathematically impossible. Use a single bold shape or letter; full logos go in the 180 icon.

Can I use a photo?

You can, but it becomes an unrecognizable smudge. Favicons are logo territory.

More tools from Palette Atoll

Aspect Ratio CalculatorResize, keep the shapeImage ResizerOn Darkroom IsleImage CompressorOn Darkroom IsleColor PickerHEX, RGB & HSL together

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer

Aspect Ratio Calculator — Resize, Keep the Shape

← Palette AtollThe Creative Island · Island 09

Know your ratio, keep it — resize images and video without distortion.

Width (px)

Height (px)

New width → matching height

How to use this tool

1. Enter your original width and height — the simplified ratio appears (e.g. 16:9).
2. Enter a new width to get the matching height — or the reverse.
3. The result keeps the exact shape; no stretching, no cropping.

Example

1920 × 1080 → 16:9. New width 1280 → height 720. For a 1080-wide version: 1080 × 608 (rounded from 607.5) — always re-round at the end, never mid-way.

The formula

ratio = width ÷ gcd × ':' × height ÷ gcd  |  new height = new width × (height ÷ width)

What the result means

The simplified ratio (dividing both numbers by their greatest common divisor) is the shape's true name — 1920×1080 and 1280×720 are the same 16:9 shape. Resizing that keeps the ratio preserves composition; breaking it stretches faces and circles, the two things viewers notice first.

Frequently asked questions

My ratio comes out weird, like 683:384 — why?

The numbers share no common divisor (683 is prime). The shape is still valid — it is simply not one of the famous ratios; the decimal form is often more useful.

What ratio should YouTube thumbnails use?

16:9 (1280×720 is the standard) — enter those numbers here to verify any custom size.

Why does 1080 wide give 608 high, not 607.5?

Pixels are whole; the tool rounds to the nearest integer. For print and print-quality work, keep the fraction through the pipeline instead.

Is anything uploaded?

No — pure arithmetic in your browser.

More tools from Palette Atoll

Print Size CalculatorOn Darkroom IsleImage ResizerOn Darkroom IsleColor PickerHEX, RGB & HSL togetherFavicon GeneratorIcons from any image

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer

Contrast Checker — WCAG AA & AAA Color Testing

← Palette AtollThe Creative Island · Island 09

Will real humans be able to read this? Test any text/background pair against WCAG AA and AAA.

Text color

Background color

Readability is respect.

How to use this tool

1. Pick your text color and your background color.
2. Check the ratio against the thresholds: 4.5:1 for AA normal text, 3:1 for large text, 7:1 for AAA.
3. The live preview shows exactly how the pair reads.

Example

Dark teal #22332f on pale mint #e6f2ee → about 10.9:1 — clears AAA comfortably. Grey #999 on white gives 2.85:1 — fails even large-text AA; that's the classic 'elegant but unreadable' footer.

The formula

contrast ratio = (L(lighter) + 0.05) ÷ (L(darker) + 0.05), where L = relative luminance from sRGB

What the result means

The ratio expresses how much brighter the lighter color is than the darker one. AA (4.5:1) is the legal accessibility floor in most jurisdictions; AAA (7:1) is the comfort standard for long reading. Large text gets a break because bigger glyphs tolerate lower contrast.

Frequently asked questions

Why 4.5:1 and not 50%?

WCAG ratios are computed through perceived luminance, not simple brightness — green contributes far more than blue to how bright a color looks. The math mirrors human vision.

My brand colors fail — what now?

Keep the brand color for accents, and derive a darker text variant of it for copy. Most brands fix this with one 'ink' version of their hue.

Does contrast matter for buttons and icons?

Yes — interactive elements need 3:1 against their surroundings so users can find them; this tool's large-text check is the same threshold.

Is my data private?

Yes — everything is computed in your browser.

More tools from Palette Atoll

Color PickerHEX, RGB & HSL togetherColor Palette GeneratorHarmonies from one colorGradient GeneratorCSS gradients liveHEX ↔ RGB ConverterConvert any color code

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer

CSS Gradient Generator — Two Colors, Live Preview

← Palette AtollThe Creative Island · Island 09

Two colors, one angle — live preview and ready-to-paste CSS.

Color A

Color B

Angle: 135°

How to use this tool

1. Pick color A (start) and color B (end).
2. Drag the angle slider — 0° points up, 90° points right, 135° is the classic top-left-to-bottom-right.
3. When the preview feels right, Copy CSS.

Example

135° from #1d7d78 to #f7c548: background: linear-gradient(135deg, #1d7d78, #f7c548); — the teal-to-gold wash used across this island's headings.

The formula

background: linear-gradient(angle, colorA, colorB);

What the result means

The angle is the direction of travel: 0° starts at the bottom and moves up; 90° moves left→right; 180° top→bottom. Browser support is universal for two-color linear gradients — this is one of the safest decorative techniques on the web.

Frequently asked questions

Can I make three-color gradients?

Not with this tool — it is deliberately two-color, the case 90% of designs need. Copy the CSS and add a third stop by hand if you must.

What's the difference between 135deg and 'to bottom right'?

Nothing — they are two ways of saying the same direction. The degree form is easier to animate and tweak.

Do gradients slow down a page?

Two-color CSS gradients are drawn by the GPU and cost essentially nothing — unlike gradient images, which cost a download.

Is my color choice uploaded?

No — everything is generated in your browser.

More tools from Palette Atoll

Color Palette GeneratorHarmonies from one colorColor PickerHEX, RGB & HSL togetherContrast CheckerReadable color pairsHEX ↔ RGB ConverterConvert any color code

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer

Color Palette Generator — Harmonies from One Color

← Palette AtollThe Creative Island · Island 09

One seed color → four ready-made palettes: complementary, analogous, triadic and monochrome.

Base color

Or HEX

How to use this tool

1. Pick or type your base color — usually your brand's main color.
2. Four palettes appear: complementary, analogous, triadic and monochrome.
3. Click any swatch to copy its HEX code — mix palettes freely; they all share your base's DNA.

Example

Seed #1d7d78 (island teal): complementary brings a soft coral (hue 357°) — teal-and-coral is exactly the atoll's own pairing, generated by the wheel, not by accident.

The formula

complementary = hue + 180° · analogous = ±30° · triadic = ±120° · monochrome = same hue, stepped lightness

What the result means

These four harmonies are the classical geometry of the color wheel: opposites for energy, neighbours for calm, triangles for playful balance, and a single hue stepped through lightness for elegance. When a palette feels 'off', it is usually fighting the geometry.

Frequently asked questions

Which harmony should I choose?

Monochrome for professional and minimal work; analogous for calm, natural schemes; complementary when something must pop (a button on a brand background); triadic for playful, balanced brands.

Can I combine palettes?

Yes — a common recipe: analogous background tones + one complementary accent. The 60-30-10 rule (dominant, secondary, accent) fits any of these sets.

Why does the tool change lightness in some swatches?

Extreme lightness values (near 0 or 100) hide the hue entirely; the generator nudges toward readable mid-tones so every swatch stays usable.

Are the HEX codes copied anywhere?

No — generation and copying happen in your browser.

More tools from Palette Atoll

Color PickerHEX, RGB & HSL togetherGradient GeneratorCSS gradients liveContrast CheckerReadable color pairsHEX ↔ RGB ConverterConvert any color code

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer

HEX to RGB Converter (and RGB to HEX)

← Palette AtollThe Creative Island · Island 09

HEX in, RGB out — or the reverse. HSL comes along for free.

R (0–255)

G (0–255)

B (0–255)

HEX code

How to use this tool

1. Enter R, G, B values (0–255 each) — the HEX updates as you type.
2. Or paste a HEX code into the bottom field — the RGB fills itself.
3. The swatch shows your color; HSL is included in the result.

Example

The atoll coral #ee6352 → rgb(238, 99, 82). Reverse: rgb(29, 125, 120) → #1d7d78, the island teal.

The formula

HEX pair = channel ÷ 16 (first digit), channel mod 16 (second); channel = first digit × 16 + second

What the result means

HEX is just RGB written in base-16: each two-character pair is one channel's 0–255 value. #FF = 255 (full), #00 = 0 (off). Once you see that, conversions stop being magic — and shorthand codes like #abc mean #aabbcc.

Frequently asked questions

Why do some HEX codes have only 3 characters?

It's the shorthand for doubled digits: #1a7 expands to #11aa77. Always safe to expand, only valid when both digits match.

What is the valid range for RGB?

Each channel is 0–255 (8 bits per channel, 16.7 million combinations). This tool rejects out-of-range values instead of guessing.

Does it convert CMYK or Pantone?

No — print color spaces involve device profiles and physical ink; honest CMYK conversion happens in design software with a profile, not in a quick web tool.

Is my input stored?

No — conversion happens entirely in your browser.

More tools from Palette Atoll

Color PickerHEX, RGB & HSL togetherColor Palette GeneratorHarmonies from one colorContrast CheckerReadable color pairsGradient GeneratorCSS gradients live

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer

Color Picker — HEX, RGB & HSL from Any Color

← Palette AtollThe Creative Island · Island 09

Pick a color — get HEX, RGB and HSL at once, with a strip of tints and shades beside it.

Or type a HEX code

How to use this tool

1. Click the big color square and choose visually, or type a HEX code.
2. All three web formats update together: HEX, RGB and HSL.
3. The strip shows seven steps from tints to shades of your color — hover any block for its HSL value.

Example

The island brand teal #1d7d78 = rgb(29, 125, 120) = hsl(177, 62%, 30%). Its 40%-lightness shade hsl(177, 62%, 40%) works well for hover states of the same brand color.

The formula

HEX = RGB as base-16 pairs; HSL = hue° (color wheel), saturation% , lightness% of the same color

What the result means

HEX and RGB say exactly which pixels light up; HSL says how the color feels — which is why designers build systems in HSL (one hue, many lightness steps) and ship them as HEX. The tints-and-shades strip is exactly that system, generated from your pick.

Frequently asked questions

Which format should I use in my project?

All three render identically — use HEX for compactness, rgb() when you need CSS opacity (rgba), HSL when you'll derive variants.

Why does my HEX look different on another screen?

Screens differ in gamut and calibration; the code is exact, the display is the variable. Test brand colors on at least one phone and one laptop.

What are tints and shades, exactly?

Tints mix toward white, shades toward black. Keeping the hue constant and stepping only lightness is the simplest way to build a coherent color system.

Is anything uploaded?

No — the picker runs entirely in your browser.

More tools from Palette Atoll

HEX ↔ RGB ConverterConvert any color codeColor Palette GeneratorHarmonies from one colorGradient GeneratorCSS gradients liveContrast CheckerReadable color pairs

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer