-
-
Notifications
You must be signed in to change notification settings - Fork 138
/
index.html
211 lines (172 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start cookieyes banner -->
<script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/ec103522738032704d6f0d31.js"></script>
<!-- End cookieyes banner -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no, maximum-scale=1.0"/>
<meta name="author" content="Lasse Rafn">
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@lasserafn"/>
<meta name="twitter:creator" content="@lasserafn"/>
<meta property="og:image" content="/assets/meta.png"/>
<meta name="twitter:image" content="/assets/meta.png"/>
<meta property="og:url" content="https://ui-avatars.com/"/>
<meta property="og:title" content="Free API to generate avatars with initials - User Initial avatars"/>
<meta name="twitter:title" content="Free API to generate avatars with initials - User Initial avatars"/>
<meta name="description" content="Generate image avatars with user initials for free, just specify name. No limits or registration."/>
<meta property="og:description" content="Generate image avatars with user initials for free, just specify name. No limits or registration."/>
<meta name="twitter:description" content="Generate image avatars with user initials for free, just specify name. No limits or registration."/>
<title>User Initial avatars</title>
<style>*,legend{max-width:100%}.footer,.promo,.stat{text-align:center}code,svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}figure{margin:1em 40px}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*{box-sizing:border-box}body{font:14px/1.5 'Open Sans',sans-serif;color:#222;background:#fff;margin:0;padding:0}.container{width:600px;margin:2em auto;padding:0 15px}.promo,h2{margin:2em 0 0}.footer{font-size:.875em;line-height:1.2}h1{font-size:3em;margin:0}h2{font-size:2em}h2.subtitle{font-weight:400;font-size:1.25em;margin:.25em 0 0}h3{font-weight:600;font-size:1.125em;margin:1em 0 .5em}hr{box-sizing:content-box;border:none;background:#d8d8d8;height:1px;margin:2em 0}a,a:visited{color:#568bbf}.stats{display:flex}.stat{margin:8px 0;width:50%;background:#f5f7f9;box-shadow:4px 4px 0 #e9ebed;padding:12px}.stat-value{font-size:32px;display:block}.stat-label{font-size:12px;display:block;color:#888}.stat:first-child{margin-right:8px}.stat:last-child{margin-left:8px}code{background:#f7f9fb;display:block;font-size:13px;margin-bottom:2em;padding:1em}code.inline{display:inline;padding:.25em;margin:0}code.get:before{color:#568bbf;content:'GET '}code.get:hover{cursor:pointer;background:#f2f4fd}code.get:hover:after{color:#568bbf;content:' TRY';float:right}code span.param{color:#A87847}code span.value{color:#6E9C40}@media all and (max-width:600px){code.get:hover:after{display:none}.stat-value{font-size:28px}.stat-label{font-size:11px}}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107354352-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments)
};
gtag('js', new Date());
gtag('config', 'UA-107354352-1');
</script>
</head>
<body>
<a href="https://github.com/LasseRafn/ui-avatars" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div class="container">
<div class="header">
<h1>UI Avatars</h1>
<h2 class="subtitle">Generate avatars with initials from names.</h2>
<p>UI Avatars has a simple-to-use API with no limiting or login. No usage tracking and no information is stored. The final images are cached, but nothing else. Just write name or surname, or both.</p>
<p><strong>NEW!</strong> Bold font weight option</p>
<p><strong>NEW!</strong> There is now a official <a href="https://github.com/Rackbeat/laravel-ui-avatars" target="_blank">Laravel Wrapper</a></p>
<div class="promo">
<img src="/assets/promo.png" width="651" alt="Example avatars"/>
</div>
</div>
<div class="stats">
<div class="stat">
<span class="stat-value"><span id="daily-requests">-</span></span>
<span class="stat-label">Daily Requests</span>
</div>
<div class="stat">
<span class="stat-value"><span id="response-time">-</span><small>ms</small></span>
<span class="stat-label">Avg. Response Time</span>
</div>
</div>
<div style="text-align: center; margin-top: 16px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6206742929853545"
data-ad-slot="3101365126"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<h2>Usage</h2>
<p>All requests returns a image stream to be used directly in a <code class="inline"><img/></code> tag.</p>
<h3>Generate a avatar with default settings, for user "John Doe".</h3>
<code class="get" onclick="window.open('/api/?name=John+Doe')">https://ui-avatars.com/api/?<span class="param">name</span>=<span class="value">John+Doe</span></code>
<h3>Generate a blue avatar</h3>
<code class="get" onclick="window.open('/api/?background=0D8ABC&color=fff')">https://ui-avatars.com/api/?<span class="param">background</span>=<span class="value">0D8ABC</span>&<span class="param">color</span>=<span
class="value">fff</span></code>
<h3>Generate a random background avatar.</h3>
<p>Avoid passing color as it will be automatically set between black and white.</p>
<code class="get" onclick="window.open('/api/?background=random')">https://ui-avatars.com/api/?<span class="param">background</span>=<span class="value">random</span></code>
<h2>Settings</h2>
<h3>Image Size (<code class="inline">size</code>)</h3>
<p>Avatar image size in pixels. Between: 16 and 512. Default: 64</p>
<code class="get" onclick="window.open('/api/?size=128')">https://ui-avatars.com/api/?<span class="param">size</span>=<span class="value">128</span></code>
<h3>Font Size (<code class="inline">font-size</code>)</h3>
<p>Font size in percentage of <code class="inline">size</code>. Between 0.1 and 1. Default: 0.5</p>
<code class="get" onclick="window.open('/api/?font-size=0.33')">https://ui-avatars.com/api/?<span class="param">font-size</span>=<span class="value">0.33</span></code>
<h3>Initial Characters (<code class="inline">length</code>)</h3>
<p>Length of the generated initials. Default: 2</p>
<code class="get" onclick="window.open('/api/?length=1')">https://ui-avatars.com/api/?<span class="param">length</span>=<span class="value">1</span></code>
<h3>Name (<code class="inline">name</code>)</h3>
<p>The name used to generate initials. You can specify the initials yourself as well. Default: John Doe</p>
<code class="get" onclick="window.open('/api/?name=Elon+Musk')">https://ui-avatars.com/api/?<span class="param">name</span>=<span class="value">Elon+Musk</span></code>
<h3>Rounded Image (<code class="inline">rounded</code>)</h3>
<p>Boolean specifying if the returned image should be a circle. Default: false</p>
<code class="get" onclick="window.open('/api/?rounded=true')">https://ui-avatars.com/api/?<span class="param">rounded</span>=<span class="value">true</span></code>
<h3>Bold (<code class="inline">bold</code>)</h3>
<p>Boolean specifying if the returned letters should use a bold font. Default: false</p>
<code class="get" onclick="window.open('/api/?bold=true')">https://ui-avatars.com/api/?<span class="param">bold</span>=<span class="value">true</span></code>
<h3>Background Color (<code class="inline">background</code>)</h3>
<p>Hex color for the image background, without the hash (#). Default: ddd</p>
<code class="get" onclick="window.open('/api/?background=a0a0a0')">https://ui-avatars.com/api/?<span class="param">background</span>=<span class="value">a0a0a0</span></code>
<h3>Font Color (<code class="inline">color</code>)</h3>
<p>Hex color for the font, without the hash (#). Default: 222</p>
<code class="get" onclick="window.open('/api/?color=ff0000')">https://ui-avatars.com/api/?<span class="param">color</span>=<span class="value">ff0000</span></code>
<h3 id="uppercase">Uppercase (<code class="inline">uppercase</code>)</h3>
<p>Decide if the API should uppercase the name/initials. Default: true</p>
<code class="get" onclick="window.open('/api/?uppercase=false&name=different+Case')">https://ui-avatars.com/api/?<span class="param">uppercase</span>=<span class="value">false</span>&<span
class="param">name</span>=<span class="value">different+Case</span></code>
<h3 id="format">Format (<code class="inline">format</code>)</h3>
<p>Decide if the API should return SVG or PNG. Default: svg if the <code class="inline">Accept</code> header includes <code class="inline">image/svg+xml</code>, png otherwise</p>
<code class="get" onclick="window.open('/api/?format=svg')">https://ui-avatars.com/api/?<span class="param">format</span>=<span class="value">svg</span></code>
<p>All settings above can be mixed together as you desire.</p>
<h2>With Gravatar or similar</h2>
<p>A good use-case would be using it as a fallback for Gravatar. Example:</p>
<code>https://www.gravatar.com/avatar/<span class="value">EMAIL_MD5</span>?<span class="param">d</span>=<span class="value">https%3A%2F%2Fui-avatars.com%2Fapi%2F/Lasse+Rafn/128</span></code>
<p>Because of limitations in Gravatar, we must pass in the parameters as sub-directories, instead of query-parameters. You should also consider urlencoding the name, in case it contains special characters. It's a
limitation by Gravatar, not UI Avatars.</p>
The order is as follows:
<ul>
<li>name</li>
<li>size</li>
<li>background</li>
<li>color</li>
<li>length</li>
<li>font-size</li>
<li>rounded</li>
<li>uppercase</li>
<li>bold</li>
<li>format</li>
</ul>
<h2>Retina</h2>
<p>I recommend using 1.5x or 2x sizes for your avatars, but keeping the img tag the original size, to ensure crisp avatars on high DPI screens.</p>
<h2 id="language-script-support">Language/Script support</h2>
<p>I have added support for some unicode scripts/languages that are not supported by the typical fonts. Current support:</p>
<ul>
<li>Arabic</li>
<li>Armenian</li>
<li>Bengali</li>
<li>Georgian</li>
<li>Hebrew</li>
<li>Chinese</li>
<li>Japanese</li>
<li>Mongolian</li>
<li>Thai</li>
<li>Tibetan</li>
</ul>
<h2>WordPress plugin</h2>
<p>It has WordPress plugin! If you have a WordPress site, you can use the <a href="https://wordpress.org/plugins/wp-initials-avatar/" rel="noopener">WordPress plugin</a>, which is also free.</p>
<h2>Regions</h2>
<p>Servers are setup in the following countries/cities:</p>
<ul>
<li>Frankfurt, Germany</li>
<li>San Francisco, CA, USA</li>
<!--<li>Bangalore, India <span style="padding: 3px 6px; background: #e7e9eb; border-radius: 2px; font-size: 0.8em; font-weight: bold;">NEW!</span></li>-->
</ul>
<h2 id="privacy">Privacy and Monitoring</h2>
<p>No data is being stored on our serveres. Monitoring & logging is entirely disabled.</p>
<hr>
<div class="footer">
<p>Made by <a href="https://twitter.com/lasserafn" rel="noopener" target="_blank">Lasse Rafn</a> with help of contributors</p>
<p><a href="https://github.com/LasseRafn/ui-avatars" rel="noopener" target="_blank">Code on GitHub</a></p>
</div>
</div>
</body>
</html>