[{"data":1,"prerenderedAt":1736},["ShallowReactive",2],{"/blog/what-favicon-your-website-needs-one-make-it":3,"recommended-/blog/what-favicon-your-website-needs-one-make-it":412},{"id":4,"title":5,"author":6,"body":7,"category":398,"date":399,"description":400,"draft":401,"extension":402,"image":403,"meta":404,"navigation":405,"path":406,"seo":407,"stem":408,"tags":409,"__hash__":411},"blog/blog/what-favicon-your-website-needs-one-make-it.md","What Is a Favicon? Why Your Website Needs One & How to Make It",null,{"type":8,"value":9,"toc":383},"minimark",[10,14,22,27,30,49,53,64,70,76,80,83,153,157,182,196,200,203,230,234,237,243,255,261,266,269,274,278,281,317,321,326,333,338,344,349,352,357,360,365,376],[11,12,13],"p",{},"It is the smallest element of your website—typically just 16 by 16 pixels—yet it does an enormous amount of work for your brand. When a user looks at their browser and sees a generic grey globe icon next to your site title, it subconsciously signals \"unfinished\" or \"untrustworthy.\"",[11,15,16,17,21],{},"When they see a sharp, branded icon, it signals \"professional.\" That tiny icon is the ",[18,19,20],"strong",{},"Favicon",". In 2026, it is not just a nice-to-have; it is a critical part of your user experience and SEO presence.",[23,24,26],"h2",{"id":25},"what-is-a-favicon","What Is a Favicon?",[11,28,29],{},"A favicon (short for \"favourite icon\") is a small square image associated with a specific website. You see them everywhere:",[31,32,33,37,40,43,46],"ul",{},[34,35,36],"li",{},"On browser tabs (next to the page title)",[34,38,39],{},"In browser bookmarks and history lists",[34,41,42],{},"On mobile home screens (when you \"Add to Home Screen\")",[34,44,45],{},"In Google Search results (on mobile and increasingly on desktop)",[34,47,48],{},"In browser toolbar apps and password managers",[23,50,52],{"id":51},"why-favicons-matter-for-your-brand","Why Favicons Matter for Your Brand",[11,54,55,58,59,63],{},[18,56,57],{},"1. Tab Recognition:"," The average user has dozens of tabs open. When tabs get small, the text disappears, and the favicon is the ",[60,61,62],"em",{},"only"," identifier left. If your favicon is missing or generic, users can't find your site to click back to it. A distinct favicon anchors your site in the user's browser.",[11,65,66,69],{},[18,67,68],{},"2. Trust Signals:"," Internet users are wary of scams. A website without a custom favicon looks like a generic template or a fly-by-night operation. A custom favicon indicates that attention to detail has been paid to the site's construction.",[11,71,72,75],{},[18,73,74],{},"3. SEO & Click-Through Rate:"," Google displays favicons next to search results, particularly on mobile. A recognisable, high-contrast favicon can draw the eye and improve your click-through rate (CTR) compared to a generic result.",[23,77,79],{"id":78},"favicon-sizes-the-complete-set-for-2026","Favicon Sizes: The Complete Set for 2026",[11,81,82],{},"In the early days of the web, you only needed one size. Today, with high-resolution Retina screens, iOS icons, and Windows tiles, you need a set of sizes to look crisp everywhere.",[84,85,86,99],"table",{},[87,88,89],"thead",{},[90,91,92,96],"tr",{},[93,94,95],"th",{},"Size (px)",[93,97,98],{},"Where It Is Used",[100,101,102,113,123,133,143],"tbody",{},[90,103,104,110],{},[105,106,107],"td",{},[18,108,109],{},"16 × 16",[105,111,112],{},"Standard browser tabs",[90,114,115,120],{},[105,116,117],{},[18,118,119],{},"32 × 32",[105,121,122],{},"Retina screens, Windows taskbar",[90,124,125,130],{},[105,126,127],{},[18,128,129],{},"180 × 180",[105,131,132],{},"Apple Touch Icon (iPhone/iPad home screen)",[90,134,135,140],{},[105,136,137],{},[18,138,139],{},"192 × 192",[105,141,142],{},"Android Chrome home screen icon",[90,144,145,150],{},[105,146,147],{},[18,148,149],{},"512 × 512",[105,151,152],{},"PWA (Progressive Web App) splash screen",[23,154,156],{"id":155},"favicon-file-formats-in-2026","Favicon File Formats in 2026",[31,158,159,170,176],{},[34,160,161,164,165,169],{},[18,162,163],{},"ICO:"," The legacy format. A single ",[166,167,168],"code",{},".ico"," file can actually contain multiple sizes (16, 32, 48) inside it. It is still the most compatible format for older browsers.",[34,171,172,175],{},[18,173,174],{},"PNG:"," Modern browsers support standard PNG files. They are easy to create and support transparency.",[34,177,178,181],{},[18,179,180],{},"SVG:"," The future standard. SVG favicons scale infinitely without losing quality and—crucially—support CSS dark mode media queries, meaning your icon can change colour depending on whether the user is in Light or Dark mode.",[11,183,184,187,188,191,192,195],{},[18,185,186],{},"Recommended Stack:"," Use ",[166,189,190],{},"favicon.ico"," for legacy fallback and ",[166,193,194],{},"favicon.svg"," for modern browsers.",[23,197,199],{"id":198},"how-to-design-a-good-favicon","How to Design a Good Favicon",[11,201,202],{},"Designing for 16 pixels is hard. Here are the golden rules:",[204,205,206,212,218,224],"ol",{},[34,207,208,211],{},[18,209,210],{},"Don't use your full logo:"," Complex text or taglines will turn into unrecognisable mush at small sizes.",[34,213,214,217],{},[18,215,216],{},"Use a symbol or initial:"," Use your logo mark (like Nike's swoosh) or the first letter of your brand name (like Facebook's 'f' or Google's 'G').",[34,219,220,223],{},[18,221,222],{},"Maximize Contrast:"," Use bold shapes and solid colours. Thin lines disappear.",[34,225,226,229],{},[18,227,228],{},"Use Transparent Backgrounds:"," A square white box looks cheap on grey browser tabs. Use transparency (PNG/ICO) so the icon floats naturally.",[23,231,233],{"id":232},"how-to-create-a-favicon-for-free-in-3-steps","How to Create a Favicon for Free in 3 Steps",[11,235,236],{},"You don't need a designer to make a professional favicon set. You can do it with CampaignMorph:",[11,238,239,242],{},[18,240,241],{},"Step 1:"," Prepare your logo image (ideally a square PNG at least 512x512px).",[11,244,245,248,249,254],{},[18,246,247],{},"Step 2:"," Go to the ",[250,251,253],"a",{"href":252},"/tools/favicon-generator","Favicon Generator"," and upload your image.",[11,256,257,260],{},[18,258,259],{},"Step 3:"," The tool will automatically crop, resize, and convert your image into all the necessary formats (ICO, PNGs for Apple/Android). Download the zip file.",[262,263,265],"h3",{"id":264},"need-a-favicon-fast","Need a favicon fast?",[11,267,268],{},"Generate all required sizes for Apple, Android, and Web instantly.",[11,270,271],{},[250,272,273],{"href":252},"Open Favicon Generator",[23,275,277],{"id":276},"how-to-add-a-favicon-to-your-website","How to Add a Favicon to Your Website",[11,279,280],{},"Once you have your files, here is how to install them:",[31,282,283,299,305,311],{},[34,284,285,288,289,292,293,296],{},[18,286,287],{},"HTML:"," Upload the files to your root directory and add this code to your ",[166,290,291],{},"\u003Chead>"," section: ",[294,295],"br",{},[166,297,298],{},"\u003Clink rel=\"icon\" type=\"image/x-icon\" href=\"/favicon.ico\">",[34,300,301,304],{},[18,302,303],{},"WordPress:"," Go to Appearance > Customize > Site Identity > Site Icon. Upload your 512x512 image, and WordPress handles the rest.",[34,306,307,310],{},[18,308,309],{},"Webflow:"," Go to Project Settings > General > Icons. Upload the 32x32 pixel version for Favicon and 256x256 for Webclip.",[34,312,313,316],{},[18,314,315],{},"Squarespace:"," Go to Design > Browser Icon and upload your image.",[23,318,320],{"id":319},"frequently-asked-questions","Frequently Asked Questions",[11,322,323],{},[18,324,325],{},"What size should a favicon be?",[11,327,328,329,332],{},"For the source file, design at ",[18,330,331],{},"512x512 pixels",". This ensures high quality for the largest use case (PWA splash screens). Your generator tool will scale this down to the tiny 16x16 and 32x32 sizes needed for browsers.",[11,334,335],{},[18,336,337],{},"What file format should I use?",[11,339,340,341,343],{},"For maximum compatibility, provide a ",[166,342,190],{}," file in your site's root directory. For modern best practices, also provide PNG versions for mobile devices.",[11,345,346],{},[18,347,348],{},"Why isn't my favicon showing up?",[11,350,351],{},"Browsers cache favicons aggressively. If you updated it but don't see the change, try clearing your browser cache or opening your site in an Incognito window. Also, verify that the file path in your HTML code is correct.",[11,353,354],{},[18,355,356],{},"Can I use my full logo as a favicon?",[11,358,359],{},"Technically, yes, but it is not recommended. Full logos usually contain text, which becomes unreadable at 16 pixels wide. It is better to create a simplified \"mark\" or use the first letter of your brand name.",[11,361,362],{},[18,363,364],{},"How do I add a favicon in WordPress?",[11,366,367,368,371,372,375],{},"You don't need code. Log in to your dashboard, go to ",[18,369,370],{},"Appearance > Customise"," . Click on ",[18,373,374],{},"Site Identity",". Look for the \"Site Icon\" section and upload your image there. WordPress will crop and publish it for you.",[11,377,378],{},[60,379,380],{},[18,381,382],{},"Don't let a missing icon undermine your brand's credibility. Create your custom favicon today and look professional in every tab.",{"title":384,"searchDepth":385,"depth":385,"links":386},"",2,[387,388,389,390,391,392,396,397],{"id":25,"depth":385,"text":26},{"id":51,"depth":385,"text":52},{"id":78,"depth":385,"text":79},{"id":155,"depth":385,"text":156},{"id":198,"depth":385,"text":199},{"id":232,"depth":385,"text":233,"children":393},[394],{"id":264,"depth":395,"text":265},3,{"id":276,"depth":385,"text":277},{"id":319,"depth":385,"text":320},"Marketing","2026-04-10","Everything you need to know about favicons in 2026 — what they are, why they matter for branding and UX, and how to create one for free in minutes.",false,"md","/blog/what-favicon-your-website-needs-one-make-it.webp",{},true,"/blog/what-favicon-your-website-needs-one-make-it",{"title":5,"description":400},"blog/what-favicon-your-website-needs-one-make-it",[410,20],"Digital Marketing","rR6J05WOExcPMT5xAdyBAGkiXQthx6GlOwFetekvaK8",[413,813,1312],{"id":414,"title":415,"author":6,"body":416,"category":398,"date":803,"description":804,"draft":401,"extension":402,"image":805,"meta":806,"navigation":405,"path":807,"seo":808,"stem":809,"tags":810,"__hash__":812},"blog/blog/choose-brand-colours-that-actually-work-psychology.md","How to Choose Brand Colours That Actually Work (With Psychology)",{"type":8,"value":417,"toc":793},[418,421,432,435,439,446,466,470,473,618,622,625,651,662,666,673,693,704,708,711,731,735,738,744,746,751,754,759,762,767,770,775,778,783,786],[11,419,420],{},"Choosing your brand colours often feels like a matter of personal taste. You might think, \"I like purple, so my logo should be purple.\" But in the world of marketing, colour is data, not just decoration.",[11,422,423,424,427,428,431],{},"Studies show that colour increases brand recognition by up to ",[18,425,426],{},"80%",". More importantly, up to ",[18,429,430],{},"85%"," of purchasing decisions are influenced by colour alone. When a customer scans a shelf or a search result, the colour is the very first signal their brain processes—faster than text, faster than shape.",[11,433,434],{},"The right colour palette can instantly make your brand feel trustworthy, exciting, or premium. The wrong one can make you look cheap, confusing, or invisible. Choosing your brand colours is a strategic business decision, and there is a science to getting it right.",[23,436,438],{"id":437},"why-brand-colours-matter-more-than-you-think","Why Brand Colours Matter More Than You Think",[11,440,441,442,445],{},"Psychologists have found that people form a first impression of a product or brand within ",[18,443,444],{},"90 seconds"," of initial viewing. Up to 90% of that assessment is based on colour alone.",[31,447,448,454,460],{},[34,449,450,453],{},[18,451,452],{},"Brand Recognition:"," Think of a soft drink can that is red. You immediately think \"Coca-Cola\". That is the power of owning a colour.",[34,455,456,459],{},[18,457,458],{},"Trust Signals:"," Would you trust a bank that used neon pink and lime green? Probably not. We have subconscious expectations for what \"reliability\" looks like.",[34,461,462,465],{},[18,463,464],{},"Differentiation:"," If every competitor in your niche uses blue, choosing orange instantly makes you the visible alternative.",[23,467,469],{"id":468},"colour-psychology-what-each-colour-communicates","Colour Psychology: What Each Colour Communicates",[11,471,472],{},"Every colour triggers specific psychological associations. While these can vary by culture, here are the standard meanings in Western marketing:",[31,474,475,493,513,529,545,561,577,593,602],{},[34,476,477,480,481,484,485,488,489,492],{},[18,478,479],{},"Red:"," Energy, urgency, passion, hunger. Used by ",[60,482,483],{},"Netflix"," (excitement), ",[60,486,487],{},"Coca-Cola"," (happiness), ",[60,490,491],{},"YouTube"," (action). Excellent for clearance sales and food brands.",[34,494,495,498,499,502,503,502,506,502,509,512],{},[18,496,497],{},"Blue:"," Trust, stability, logic, calm. The most popular colour in branding. Used by ",[60,500,501],{},"Facebook",", ",[60,504,505],{},"PayPal",[60,507,508],{},"Samsung",[60,510,511],{},"Ford",". Standard for finance, tech, and healthcare.",[34,514,515,518,519,502,522,502,525,528],{},[18,516,517],{},"Green:"," Growth, health, nature, money. Used by ",[60,520,521],{},"Spotify",[60,523,524],{},"Whole Foods",[60,526,527],{},"Starbucks",". Essential for sustainability and wellness brands.",[34,530,531,534,535,502,538,502,541,544],{},[18,532,533],{},"Yellow/Gold:"," Optimism, warmth, caution, speed. Used by ",[60,536,537],{},"McDonald’s",[60,539,540],{},"IKEA",[60,542,543],{},"Snapchat",". High visibility, but can be fatiguing to eyes if overused.",[34,546,547,550,551,502,554,502,557,560],{},[18,548,549],{},"Orange:"," Friendliness, value, creativity, enthusiasm. Used by ",[60,552,553],{},"Amazon",[60,555,556],{},"Fanta",[60,558,559],{},"Harley-Davidson",". Often seen as a \"budget-friendly\" or \"fun\" alternative to aggressive red.",[34,562,563,566,567,502,570,502,573,576],{},[18,564,565],{},"Purple:"," Luxury, wisdom, creativity, royalty. Used by ",[60,568,569],{},"Cadbury",[60,571,572],{},"Hallmark",[60,574,575],{},"Twitch",". Bridges the gap between stimulating red and calm blue.",[34,578,579,582,583,502,586,502,589,592],{},[18,580,581],{},"Black:"," Elegance, power, sophistication, exclusivity. Used by ",[60,584,585],{},"Apple",[60,587,588],{},"Chanel",[60,590,591],{},"Nike",". The standard for luxury fashion and premium tech.",[34,594,595,598,599,601],{},[18,596,597],{},"White:"," Purity, simplicity, modernism, hygiene. Used by ",[60,600,585],{}," products, minimalist skincare brands. Requires careful use of whitespace.",[34,603,604,607,608,502,611,502,614,617],{},[18,605,606],{},"Pink:"," Care, femininity, playfulness, romance. Used by ",[60,609,610],{},"Barbie",[60,612,613],{},"Victoria's Secret",[60,615,616],{},"T-Mobile",". Increasingly used in tech to signal \"friendliness\" (e.g., Lyft).",[23,619,621],{"id":620},"industry-colour-conventions","Industry Colour Conventions",[11,623,624],{},"Before you pick a colour, look at your industry. There are usually unwritten rules:",[31,626,627,633,639,645],{},[34,628,629,632],{},[18,630,631],{},"Finance & Tech:"," Dominated by Blue (trust) and Grey (logic).",[34,634,635,638],{},[18,636,637],{},"Healthcare:"," Dominated by Blue (cleanliness) and Green (health).",[34,640,641,644],{},[18,642,643],{},"Fast Food:"," Dominated by Red and Yellow (appetite stimulation).",[34,646,647,650],{},[18,648,649],{},"Sustainability:"," Almost exclusively Green and Earth Tones.",[11,652,653,654,657,658,661],{},"You have two choices: ",[18,655,656],{},"Follow the convention"," to fit in and gain instant trust (e.g., a blue bank feels safe), or ",[18,659,660],{},"break the convention"," to stand out (e.g., a purple bank like Nubank signals disruption). Both are valid strategies, but be intentional about it.",[23,663,665],{"id":664},"how-to-build-a-3-colour-brand-palette","How to Build a 3-Colour Brand Palette",[11,667,668,669,672],{},"A brand needs more than just one colour. The most effective palettes follow the ",[18,670,671],{},"60-30-10 Rule"," used by interior designers:",[204,674,675,681,687],{},[34,676,677,680],{},[18,678,679],{},"Primary Colour (60%):"," This is the dominant colour of your visual space. In modern web design, this is usually a neutral—White, Light Grey, or Dark Charcoal. It sets the stage.",[34,682,683,686],{},[18,684,685],{},"Secondary Colour (30%):"," This is your \"Brand\" colour. It is used for headers, logos, graphics, and backgrounds. It provides the personality.",[34,688,689,692],{},[18,690,691],{},"Accent Colour (10%):"," This is your \"Action\" colour. It is used for buttons, links, and alerts. It must contrast sharply with the other two to draw the eye.",[11,694,695,698,699,703],{},[18,696,697],{},"Pro Tip:"," If you are struggling to find colours that look good together, find a photo that embodies the \"vibe\" of your brand (e.g., a forest, a cityscape, a neon sign). Upload it to our ",[250,700,702],{"href":701},"/tools/color-palette-extractor","Color Palette Extractor"," to instantly pull a harmonious colour scheme from reality.",[23,705,707],{"id":706},"testing-your-brand-colours","Testing Your Brand Colours",[11,709,710],{},"Before you commit to a palette, you must stress-test it:",[31,712,713,719,725],{},[34,714,715,718],{},[18,716,717],{},"The Monochrome Test:"," Does your logo still look good in black and white? If it relies entirely on colour to be readable, it will fail on receipts or photocopies.",[34,720,721,724],{},[18,722,723],{},"The Contrast Test:"," Do your colours have enough contrast for readability? Web accessibility standards (WCAG) require a contrast ratio of at least 4.5:1 for normal text.",[34,726,727,730],{},[18,728,729],{},"The Dark Mode Test:"," Does your brand blue look vibrant on a dark background, or does it disappear? You may need a lighter variant for dark-mode interfaces.",[262,732,734],{"id":733},"found-your-perfect-colours","Found your perfect colours?",[11,736,737],{},"Save them in every format (HEX, RGB, HSL) instantly.",[11,739,740],{},[250,741,743],{"href":742},"/tools/color-converter","Open Color Converter",[23,745,320],{"id":319},[11,747,748],{},[18,749,750],{},"How many brand colours should I have?",[11,752,753],{},"Keep it simple. Start with 3 core colours: a background neutral, a primary brand colour, and an accent action colour. You can add shades (lighter/darker versions) of these later, but a core palette of 3 ensures consistency.",[11,755,756],{},[18,757,758],{},"Can I change my brand colours after launch?",[11,760,761],{},"Yes, but be careful. \"Rebranding\" is expensive and risks confusing current customers. If you must change, try to evolve the colour (e.g., making your blue brighter) rather than changing the hue entirely, unless you are signalling a complete strategic pivot.",[11,763,764],{},[18,765,766],{},"What colours should I avoid?",[11,768,769],{},"Avoid neon colours for body text (hard to read). Avoid vibrating colour combinations (like pure red text on pure blue background), which cause eye strain. Avoid pale yellow on white backgrounds (invisible).",[11,771,772],{},[18,773,774],{},"How do I make brand colours accessible?",[11,776,777],{},"Focus on contrast. Ensure your text colour stands out clearly against your background colour. Use free online contrast checkers to verify your palette meets WCAG AA standards.",[11,779,780],{},[18,781,782],{},"What colour makes people trust a brand?",[11,784,785],{},"Blue is universally cited as the colour of trust, intelligence, and stability. This is why it is the default choice for banks, insurance companies, and social networks handling personal data.",[11,787,788],{},[18,789,790],{},[60,791,792],{},"Colour is a tool, not just a decoration. Choose wisely, use consistently, and your brand will build recognition with every interaction.",{"title":384,"searchDepth":385,"depth":385,"links":794},[795,796,797,798,799,802],{"id":437,"depth":385,"text":438},{"id":468,"depth":385,"text":469},{"id":620,"depth":385,"text":621},{"id":664,"depth":385,"text":665},{"id":706,"depth":385,"text":707,"children":800},[801],{"id":733,"depth":395,"text":734},{"id":319,"depth":385,"text":320},"2026-04-08","Learn how to choose the perfect brand colour palette using colour psychology, industry norms and practical design rules. Free colour tools included.","/blog/choose-brand-colours-that-actually-work-psychology.webp",{},"/blog/choose-brand-colours-that-actually-work-psychology",{"title":415,"description":804},"blog/choose-brand-colours-that-actually-work-psychology",[410,811],"Brand Colors","Deo0k1PUEU054GNx-fLMxDFHiJAaLJWkCj-TXv9V5IA",{"id":814,"title":815,"author":6,"body":816,"category":398,"date":1302,"description":1303,"draft":401,"extension":402,"image":1304,"meta":1305,"navigation":405,"path":1306,"seo":1307,"stem":1308,"tags":1309,"__hash__":1311},"blog/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet.md","HEX vs RGB vs HSL: The Web Designer's Colour Format Cheat Sheet",{"type":8,"value":817,"toc":1290},[818,831,834,837,841,844,885,889,898,905,925,948,962,968,972,979,985,999,1010,1016,1020,1027,1034,1054,1060,1066,1070,1077,1084,1088,1186,1190,1197,1200,1204,1207,1211,1213,1218,1229,1234,1246,1251,1258,1263,1274,1279,1285],[11,819,820,821,502,824,502,827,830],{},"It is every non-designer's frustration. You have a brand colour—let's say a nice, trustworthy blue. But when you look at your style guide, that single blue is described in four different ways: ",[166,822,823],{},"#4F46E5",[166,825,826],{},"rgb(79, 70, 229)",[166,828,829],{},"hsl(243, 75%, 59%)",", and maybe even a CMYK percentage.",[11,832,833],{},"Which one are you supposed to use? Why do we need so many different codes for the exact same colour? And what happens if you use the wrong one?",[11,835,836],{},"If you’ve ever felt confused by colour formats, you are not alone. This guide will end the confusion, explain exactly what each code means in plain English, and tell you when to use each one.",[23,838,840],{"id":839},"why-different-colour-formats-exist","Why Different Colour Formats Exist",[11,842,843],{},"The reason we have different codes isn't to be difficult—it's because different devices produce colour in different ways.",[31,845,846,856,866,875],{},[34,847,848,851,852,855],{},[18,849,850],{},"Screens use light:"," Your computer monitor creates colour by mixing Red, Green, and Blue light. This gave us the ",[18,853,854],{},"RGB"," model.",[34,857,858,861,862,865],{},[18,859,860],{},"Printers use pigment:"," Printers create colour by mixing Cyan, Magenta, Yellow, and Black inks. This gave us ",[18,863,864],{},"CMYK",".",[34,867,868,871,872,865],{},[18,869,870],{},"Web developers needed shorthand:"," Writing out full RGB numbers is tedious, so developers adopted a hexadecimal shorthand. This gave us ",[18,873,874],{},"HEX",[34,876,877,880,881,884],{},[18,878,879],{},"Humans need logic:"," None of the above models make intuitive sense to a human brain (e.g., \"make this red lighter\"). So, the ",[18,882,883],{},"HSL"," format was created to align with how humans perceive colour.",[23,886,888],{"id":887},"hex-colour-codes-explained","HEX Colour Codes Explained",[11,890,891,894,895],{},[18,892,893],{},"Example:"," ",[166,896,897],{},"#FF5733",[11,899,900,901,904],{},"The HEX code is the standard for the web. It always starts with a hashtag (",[166,902,903],{},"#",") followed by six characters. These characters are a mix of numbers (0-9) and letters (A-F). It might look random, but it is actually a code for RGB values.",[31,906,907,913,919],{},[34,908,909,910,865],{},"The first two characters represent ",[18,911,912],{},"Red",[34,914,915,916,865],{},"The second two represent ",[18,917,918],{},"Green",[34,920,921,922,865],{},"The final two represent ",[18,923,924],{},"Blue",[11,926,927,928,931,932,935,936,939,940,943,944,947],{},"The scale runs from ",[18,929,930],{},"00"," (no colour) to ",[18,933,934],{},"FF"," (maximum colour). So, ",[166,937,938],{},"#FF0000"," is maximum Red, zero Green, zero Blue—pure bright red. ",[166,941,942],{},"#000000"," is zero of everything (Black), and ",[166,945,946],{},"#FFFFFF"," is maximum of everything (White).",[11,949,950,953,954,957,958,961],{},[18,951,952],{},"Modern Trick:"," You can now use an 8-digit HEX code (e.g., ",[166,955,956],{},"#FF573380","). The last two characters represent opacity (alpha). ",[166,959,960],{},"80"," puts the colour at roughly 50% transparency.",[11,963,964,967],{},[18,965,966],{},"When to use HEX:"," Web design (HTML/CSS), digital design tools (Figma, Sketch, Canva), and sharing brand colours quickly. It is the most copy-paste-friendly format.",[23,969,971],{"id":970},"rgb-colour-codes-explained","RGB Colour Codes Explained",[11,973,974,894,976],{},[18,975,893],{},[166,977,978],{},"rgb(255, 87, 51)",[11,980,981,982,865],{},"RGB stands for Red, Green, Blue. It is the most direct representation of how a screen works. Each channel is defined by a number from ",[18,983,984],{},"0 to 255",[31,986,987,993],{},[34,988,989,992],{},[166,990,991],{},"rgb(0, 0, 0)"," is Black (screen off).",[34,994,995,998],{},[166,996,997],{},"rgb(255, 255, 255)"," is White (screen fully on).",[11,1000,1001,1002,1005,1006,1009],{},"The major advantage of RGB in web design is the ",[18,1003,1004],{},"Alpha"," channel, written as ",[166,1007,1008],{},"rgba(255, 87, 51, 0.5)",". That fourth number (0.5) sets the transparency to 0.5. This allows you to create see-through backgrounds and overlays easily.",[11,1011,1012,1015],{},[18,1013,1014],{},"When to use RGB:"," When you need transparency in CSS, or when working in video editing software and presentation software like PowerPoint, which often default to RGB sliders.",[23,1017,1019],{"id":1018},"hsl-colour-codes-explained","HSL Colour Codes Explained",[11,1021,1022,894,1024],{},[18,1023,893],{},[166,1025,1026],{},"hsl(9, 100%, 60%)",[11,1028,1029,1030,1033],{},"HSL stands for ",[18,1031,1032],{},"Hue, Saturation, Lightness",". This is the most \"human\" format because it describes colour the way we speak about it.",[31,1035,1036,1042,1048],{},[34,1037,1038,1041],{},[18,1039,1040],{},"Hue (0–360):"," Imagine a colour wheel. 0° is Red, 120° is Green, 240° is Blue. You just spin the wheel to pick the colour family.",[34,1043,1044,1047],{},[18,1045,1046],{},"Saturation (0–100%):"," How \"vivid\" is the colour? 0% is grey (dull), 100% is full vivid colour.",[34,1049,1050,1053],{},[18,1051,1052],{},"Lightness (0–100%):"," How much light is hitting the colour? 0% is Black, 100% is White, 50% is \"normal\".",[11,1055,1056,1059],{},[18,1057,1058],{},"Why designers love HSL:"," If you want to create a hover effect for a button that is slightly darker, you don't need to guess new HEX numbers. You just lowered the Lightness value by 10%. It makes creating colour variations programmatic and logical.",[11,1061,1062,1065],{},[18,1063,1064],{},"When to use HSL:"," CSS styling, creating colour themes, and when you need to generate tints and shades of a base colour.",[23,1067,1069],{"id":1068},"cmyk-briefly-explained","CMYK Briefly Explained",[11,1071,1072,894,1074],{},[18,1073,893],{},[166,1075,1076],{},"C=0 M=84 Y=83 K=0",[11,1078,1079,1080,1083],{},"CMYK (Cyan, Magenta, Yellow, Key/Black) is for ",[18,1081,1082],{},"print only",". Screens emit light (additive), but ink absorbs light (subtractive). If you send an RGB file to a professional printer, the colours will look muddy and dull because inks cannot reproduce the bright neon intensity of a screen. Never use CMYK for web design.",[23,1085,1087],{"id":1086},"colour-format-comparison-table","Colour Format Comparison Table",[84,1089,1090,1109],{},[87,1091,1092],{},[90,1093,1094,1097,1100,1103,1106],{},[93,1095,1096],{},"Format",[93,1098,1099],{},"Syntax Example",[93,1101,1102],{},"Where Used",[93,1104,1105],{},"Opacity Support",[93,1107,1108],{},"Human Readable?",[100,1110,1111,1130,1149,1168],{},[90,1112,1113,1117,1121,1124,1127],{},[105,1114,1115],{},[18,1116,874],{},[105,1118,1119],{},[166,1120,897],{},[105,1122,1123],{},"Web, Design Tools",[105,1125,1126],{},"Yes (8-digit)",[105,1128,1129],{},"No",[90,1131,1132,1136,1140,1143,1146],{},[105,1133,1134],{},[18,1135,854],{},[105,1137,1138],{},[166,1139,978],{},[105,1141,1142],{},"Web, Screens, Video",[105,1144,1145],{},"Yes (via rgba)",[105,1147,1148],{},"Moderate",[90,1150,1151,1155,1159,1162,1165],{},[105,1152,1153],{},[18,1154,883],{},[105,1156,1157],{},[166,1158,1026],{},[105,1160,1161],{},"CSS, Theming",[105,1163,1164],{},"Yes (via hsla)",[105,1166,1167],{},"Yes (Very)",[90,1169,1170,1174,1179,1182,1184],{},[105,1171,1172],{},[18,1173,864],{},[105,1175,1176],{},[166,1177,1178],{},"0, 84, 83, 0",[105,1180,1181],{},"Print Only",[105,1183,1129],{},[105,1185,1148],{},[23,1187,1189],{"id":1188},"how-to-convert-between-formats","How to Convert Between Formats",[11,1191,1192,1193,1196],{},"You generally don't need to do the math yourself. CampaignMorph offers a free ",[250,1194,1195],{"href":742},"Color Converter"," tool. You can simply paste a HEX code, and it will instantly give you the RGB and HSL equivalents (and vice versa).",[11,1198,1199],{},"This is useful when you have a brand guideline that only lists HEX codes, but your developer needs an RGB value for a transparent overlay. Simply pop the code in the tool and get the translation.",[262,1201,1203],{"id":1202},"need-to-convert-a-colour-code","Need to convert a colour code?",[11,1205,1206],{},"Switch between HEX, RGB, HSL, and more instantly.",[11,1208,1209],{},[250,1210,743],{"href":742},[23,1212,320],{"id":319},[11,1214,1215],{},[18,1216,1217],{},"Is HEX the same as RGB?",[11,1219,1220,1221,1224,1225,1228],{},"They represent the exact same colour value, just written in different languages. HEX is Base-16 counting, while RGB is Base-10 (decimal) counting. ",[166,1222,1223],{},"#FF"," in HEX is equal to ",[166,1226,1227],{},"255"," in RGB.",[11,1230,1231],{},[18,1232,1233],{},"What colour format should I use in CSS?",[11,1235,1236,1237,1239,1240,1242,1243,1245],{},"It depends on preference, but ",[18,1238,874],{}," is the most common for static colours. ",[18,1241,854],{}," (specifically \u003C strong> RGBA ) is best when you need transparency. ",[18,1244,883],{}," is best if you plan to manually adjust lightness or saturation directly in the code.",[11,1247,1248],{},[18,1249,1250],{},"Can I use HSL values directly in CSS?",[11,1252,1253,1254,1257],{},"Yes! All modern browsers support HSL. You can write ",[166,1255,1256],{},"background-color: hsl(200, 50%, 50%);"," and it will work perfectly.",[11,1259,1260],{},[18,1261,1262],{},"What is the difference between RGB and CMYK?",[11,1264,1265,1266,1269,1270,1273],{},"Physics. RGB is ",[60,1267,1268],{},"light"," (screens); combining all colours makes white. CMYK is ",[60,1271,1272],{},"ink"," (print); Combining all colours produces black (a muddy dark brown). RGB has a wider range of colours (gamut) than CMYK, which is why bright screen colours look dull when printed.",[11,1275,1276],{},[18,1277,1278],{},"How do I convert a HEX code to RGB manually?",[11,1280,1281,1282,1284],{},"It involves complex math (converting base-16 to base-10). For example, to convert #FF, you calculate (15 × 16) + 15 = 255. It is much faster and less error-prone to use a free ",[250,1283,1195],{"href":742}," tool.",[11,1286,1287],{},[18,1288,1289],{},"Understanding these formats gives you full control over your design workflow. Whether you're building a website or designing a slide deck, knowing which code to use ensures your brand looks consistent everywhere.",{"title":384,"searchDepth":385,"depth":385,"links":1291},[1292,1293,1294,1295,1296,1297,1298,1301],{"id":839,"depth":385,"text":840},{"id":887,"depth":385,"text":888},{"id":970,"depth":385,"text":971},{"id":1018,"depth":385,"text":1019},{"id":1068,"depth":385,"text":1069},{"id":1086,"depth":385,"text":1087},{"id":1188,"depth":385,"text":1189,"children":1299},[1300],{"id":1202,"depth":395,"text":1203},{"id":319,"depth":385,"text":320},"2026-04-06","Confused by HEX, RGB, HSL and CMYK colour codes? This plain-English guide explains each format, when to use them, and how to convert between them for free.","/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet.webp",{},"/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet",{"title":815,"description":1303},"blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet",[410,1310],"Color Palette","toA07RdSFMPdPY1X0JshGX2286QU7P4-ShIi7R5NQkk",{"id":1313,"title":1314,"author":6,"body":1315,"category":398,"date":1726,"description":1727,"draft":401,"extension":402,"image":1728,"meta":1729,"navigation":405,"path":1730,"seo":1731,"stem":1732,"tags":1733,"__hash__":1735},"blog/blog/how-to-write-meta-description.md","How to Write a Meta Description That Gets Clicked (With Examples)",{"type":8,"value":1316,"toc":1711},[1317,1320,1327,1330,1334,1337,1345,1349,1356,1363,1367,1370,1375,1378,1398,1416,1420,1424,1492,1496,1564,1568,1574,1588,1600,1604,1607,1618,1621,1625,1651,1655,1658,1664,1666,1671,1674,1679,1682,1687,1690,1695,1698,1703,1706],[11,1318,1319],{},"Your content might be ranking on page one, but if nobody clicks on it, that ranking is worthless. The meta description is your 160-character elevator pitch. It is the text that appears under your blue link in Google, and it is the deciding factor for millions of users every day.",[11,1321,1322,1323,1326],{},"Think of Google Search results as a busy high street. Your Title Tag is the shop sign, but your Meta Description is the person standing outside handing out flyers, convincing people why they should step inside ",[60,1324,1325],{},"your"," shop instead of the one next door.",[11,1328,1329],{},"In this guide, we'll cover exactly how to write meta descriptions that drive traffic, backed by real examples and a proven formula.",[23,1331,1333],{"id":1332},"what-is-a-meta-description","What Is a Meta Description?",[11,1335,1336],{},"A meta description is an HTML attribute that provides a brief summary of a web page. Search engines like Google often display the meta description in search results, which can influence click-through rates.",[11,1338,1339,1340,1342],{},"Code example:",[294,1341],{},[166,1343,1344],{},"\u003Cmeta name=\"description\" content=\"A brief summary of the page content goes here.\">",[23,1346,1348],{"id":1347},"does-the-meta-description-affect-seo-rankings","Does the Meta Description Affect SEO Rankings?",[11,1350,1351,1352,1355],{},"Google stated years ago that meta descriptions are ",[18,1353,1354],{},"not a direct ranking factor",". You cannot simply stuff keywords into your description and expect to jump to position #1.",[11,1357,1358,1359,1362],{},"However, they have a massive ",[18,1360,1361],{},"indirect"," impact. Google uses Click-Through Rate (CTR) as a quality signal. If more people click your result than the result above you, Google's algorithm notices. Over time, a high CTR can help move your page up the rankings. Therefore, a persuasive meta description is a powerful SEO tool.",[23,1364,1366],{"id":1365},"the-perfect-meta-description-formula","The Perfect Meta Description Formula",[11,1368,1369],{},"Writing a great description is part art, part science. Here is the formula that consistently performs best:",[11,1371,1372],{},[18,1373,1374],{},"[Primary Keyword] + [Key Benefit/Value Proposition] + [Secondary Info] + [Call to Action]",[11,1376,1377],{},"Let's break that down:",[204,1379,1380,1386,1392],{},[34,1381,1382,1385],{},[18,1383,1384],{},"Primary Keyword:"," Include it early. Google bolds the keywords in the description if they match the user's search, which draws the eye.",[34,1387,1388,1391],{},[18,1389,1390],{},"Key Benefit:"," Why should they click? What problem do you solve?",[34,1393,1394,1397],{},[18,1395,1396],{},"Call to Action (CTA):"," Tell them what to do. \"Learn more,\" \"Shop now,\" \"Read the guide.\"",[11,1399,1400,1403,1405],{},[18,1401,1402],{},"Example applying the formula:",[294,1404],{},[60,1406,1407,1408,1411,1412,1415],{},"\"Looking for the best ",[18,1409,1410],{},"running shoes","? (Keyword) Our lightweight sneakers reduce joint pain by 30%. (Benefit) Free shipping on all orders. (Secondary Info) ",[18,1413,1414],{},"Shop the sale now."," (CTA)\"",[23,1417,1419],{"id":1418},"_10-real-meta-description-examples-with-analysis","10 Real Meta Description Examples With Analysis",[262,1421,1423],{"id":1422},"strong-examples-do-this","Strong Examples (Do This)",[204,1425,1426,1440,1453,1466,1479],{},[34,1427,1428,894,1431,1434,1436,1439],{},[18,1429,1430],{},"Tesla:",[60,1432,1433],{},"\"Model 3 is designed for electric-powered performance, with dual motor AWD, quick acceleration, long range and fast charging.\"",[294,1435],{},[18,1437,1438],{},"Why it works:"," Pure benefit-driven. Hits all the key selling points (AWD, speed, range) efficiently.",[34,1441,1442,894,1445,1448,1450,1452],{},[18,1443,1444],{},"Ahrefs:",[60,1446,1447],{},"\"Everything you need to rank higher & get more traffic. Ahrefs is an all-in-one SEO toolset for growing search traffic and optimizing websites. Start a trial.\"",[294,1449],{},[18,1451,1438],{}," Clear value proposition (\"rank higher\") and a direct CTA (\"Start a trial\").",[34,1454,1455,894,1458,1461,1463,1465],{},[18,1456,1457],{},"HelloFresh:",[60,1459,1460],{},"\"HelloFresh is America’s #1 Meal Kit! Enjoy healthy, easy, and delicious meals delivered to your door. Get $80 off your first month.\"",[294,1462],{},[18,1464,1438],{}," Social proof (\"America's #1\") plus a hard-to-resist financial offer.",[34,1467,1468,894,1471,1474,1476,1478],{},[18,1469,1470],{},"Petco:",[60,1472,1473],{},"\"Shop Petco for a variety of pet food, supplies, and services. From grooming to training, we have everything you need for your pet. Order online today!\"",[294,1475],{},[18,1477,1438],{}," breadth of service + convenience + CTA.",[34,1480,1481,894,1484,1487,1489,1491],{},[18,1482,1483],{},"CampaignMorph:",[60,1485,1486],{},"\"Resize, compress, and convert images for free. No sign-up required. Secure client-side processing means your files never leave your device. Try it now.\"",[294,1488],{},[18,1490,1438],{}," Addresses pain points (free, no sign-up, security) immediately.",[262,1493,1495],{"id":1494},"weak-examples-avoid-this","Weak Examples (Avoid This)",[204,1497,1498,1512,1525,1538,1551],{},[34,1499,1500,894,1503,1506,1508,1511],{},[18,1501,1502],{},"Generic Corp:",[60,1504,1505],{},"\"Welcome to our home page. We are a company that sells widgets and we have been in business since 1990. Click here to enter.\"",[294,1507],{},[18,1509,1510],{},"Why it fails:"," \"Welcome to...\" is wasted space. No benefit. \"Click here\" is weak.",[34,1513,1514,894,1517,1520,1522,1524],{},[18,1515,1516],{},"Keyword Stuffer:",[60,1518,1519],{},"\"Buy shoes, cheap shoes, running shoes, blue shoes, red shoes, nike shoes, adidas shoes, best shoes for sale online store.\"",[294,1521],{},[18,1523,1510],{}," Looks like spam. Users won't trust it.",[34,1526,1527,894,1530,1533,1535,1537],{},[18,1528,1529],{},"The Cut-Off:",[60,1531,1532],{},"\"This is a comprehensive guide to SEO that will teach you everything you need to know about optimization including meta tags, title tags, link building, cont...\"",[294,1534],{},[18,1536,1510],{}," Too long. The most important info might be hidden.",[34,1539,1540,894,1543,1546,1548,1550],{},[18,1541,1542],{},"No Description:",[60,1544,1545],{},"\"Aug 12, 2024 ... lorum ipsum dolor sit amet... navigation menu... footer link...\"",[294,1547],{},[18,1549,1510],{}," Google scraped random text from the page because no description was provided.",[34,1552,1553,894,1556,1559,1561,1563],{},[18,1554,1555],{},"The Question Mark:",[60,1557,1558],{},"\"Do you want to know about SEO?\"",[294,1560],{},[18,1562,1510],{}," Too short. It wastes 130 characters of available ad space.",[23,1565,1567],{"id":1566},"meta-description-length-the-exact-rules","Meta Description Length: The Exact Rules",[11,1569,1570,1571,865],{},"There isn't a strict character limit where Google stops reading, but there is a visual limit where Google stops ",[60,1572,1573],{},"displaying",[31,1575,1576,1582],{},[34,1577,1578,1581],{},[18,1579,1580],{},"Desktop:"," ~160 characters (approx 920 pixels)",[34,1583,1584,1587],{},[18,1585,1586],{},"Mobile:"," ~120 characters (approx 680 pixels)",[11,1589,1590,1591,1594,1595,1599],{},"To be safe on all devices, aim for ",[18,1592,1593],{},"120–150 characters",". Always check your length using a ",[250,1596,1598],{"href":1597},"/tools/text-counter","Character Counter"," tool before publishing.",[23,1601,1603],{"id":1602},"when-google-ignores-your-meta-description","When Google Ignores Your Meta Description",[11,1605,1606],{},"Sometimes you write the perfect description, but Google shows something else. This happens about 70% of the time. Google generates its own snippet when:",[31,1608,1609,1612,1615],{},[34,1610,1611],{},"Your description doesn't answer the user's specific long-tail query.",[34,1613,1614],{},"Your description is keyword-stuffed or low quality.",[34,1616,1617],{},"There is a snippet of text in your body content that Google thinks is more relevant.",[11,1619,1620],{},"Don't be discouraged. Writing a high-quality description increases the odds of Google using it.",[23,1622,1624],{"id":1623},"common-meta-description-mistakes","Common Meta Description Mistakes",[31,1626,1627,1633,1639,1645],{},[34,1628,1629,1632],{},[18,1630,1631],{},"Duplicate Descriptions:"," Every page must be unique. Don't copy-paste the same description across 100 product pages.",[34,1634,1635,1638],{},[18,1636,1637],{},"Passive Voice:"," \"The guide can be read here\" vs \"Read the guide.\" Be active.",[34,1640,1641,1644],{},[18,1642,1643],{},"Boring \"Corporate Speak\":"," Avoid jargon. Speak like a human.",[34,1646,1647,1650],{},[18,1648,1649],{},"Missing CTA:"," Always invite the click.",[262,1652,1654],{"id":1653},"write-perfect-descriptions-every-time","Write Perfect Descriptions Every Time",[11,1656,1657],{},"Use our generator to preview exactly how your description will look in Google.",[11,1659,1660],{},[250,1661,1663],{"href":1662},"/tools/meta-tag-generator","Use Meta Tag Generator",[23,1665,320],{"id":319},[11,1667,1668],{},[18,1669,1670],{},"How long should a meta description be in 2026?",[11,1672,1673],{},"Aim for 140 to 160 characters. This length maximizes the available space on desktop results without getting cut off, while capturing enough detail to be persuasive.",[11,1675,1676],{},[18,1677,1678],{},"What should I include in my meta description?",[11,1680,1681],{},"Include your primary keyword, a clear benefit or value proposition, and a strong call-to-action (CTA). Treat it like an advertisement for your content.",[11,1683,1684],{},[18,1685,1686],{},"Does Google always use my meta description?",[11,1688,1689],{},"No. Google rewrites meta descriptions roughly 70% of the time to better match the specific search query of the user. However, writing a high-quality description increases the chance of it being used.",[11,1691,1692],{},[18,1693,1694],{},"Should every page have a unique meta description?",[11,1696,1697],{},"Yes. Duplicate meta descriptions confuse search engines and miss the opportunity to pitch the unique value of each specific page. If you have thousands of pages, prioritize your top traffic drivers.",[11,1699,1700],{},[18,1701,1702],{},"What is a good Click-Through Rate (CTR) for organic search?",[11,1704,1705],{},"CTR varies wildly by ranking position. Ranking #1 can get 30%+ CTR. Ranking #10 might get 1-2%. A \"good\" CTR is one that beats the average for your specific ranking position.",[11,1707,1708],{},[18,1709,1710],{},"The meta description is a small piece of text with a big job. It's the bridge between a searcher and your website. By following the formula - Keyword + Benefit + CTA - and keeping within the length limits, you can turn more impressions into clicks and more clicks into customers.",{"title":384,"searchDepth":385,"depth":385,"links":1712},[1713,1714,1715,1716,1720,1721,1722,1725],{"id":1332,"depth":385,"text":1333},{"id":1347,"depth":385,"text":1348},{"id":1365,"depth":385,"text":1366},{"id":1418,"depth":385,"text":1419,"children":1717},[1718,1719],{"id":1422,"depth":395,"text":1423},{"id":1494,"depth":395,"text":1495},{"id":1566,"depth":385,"text":1567},{"id":1602,"depth":385,"text":1603},{"id":1623,"depth":385,"text":1624,"children":1723},[1724],{"id":1653,"depth":395,"text":1654},{"id":319,"depth":385,"text":320},"2026-03-21","Write meta descriptions that increase click-through rates from Google. Includes the exact formula, 10 real examples, character counting tips and a free generator.","/blog/how-to-write-meta-description.webp",{},"/blog/how-to-write-meta-description",{"title":1314,"description":1727},"blog/how-to-write-meta-description",[410,1734],"Meta Description","I0C-sIIx_7JW_R3eweBM4FE5b7mWQeA3mNvU2Dg27-4",1775750160139]