Icons

Animierte Favicons

Posted in Development, Icons, Tutorial, Webdevelopment on October 7th, 2010 by admin – Be the first to comment

Es gibt nichts schlimmeres als nervige Gif-Animationen. Es sei, ich setzte sie ein.

Daher habe ich mir überlegt, statt einem langweiligen Favicon mal was bewegtes zu verwenden. Leider musste ich mir sagen lassen, dass nur Opera und Firefox diese unterstützen. Google und Apple meinen es wohl gut mit unserem Sehnerv und akzeptieren nur unbewegte Bilder.

So dachte ich auf jeden Fall, bis ich auf “Defender of the Favicon” stieß. Dort hat jemand wirklich Defender in einem Favicon spielbar gemacht – was sowohl in Chrome und Opera funktioniert.

Die Idee ist eigentlich relativ einfach: Man nehme ein 16x16px Canvas, male beliebigen Inhalt darauf, lese das PNG als Data-URL aus und weise es dem passenden <link>-tag zu.

Auf HTML-Seite sieht das ganze so aus:

<head>
...
<link rel="shortcut icon" href="favicon.png" id="favicon" type="image/png" />
...
</head>
<body>
...
<canvas id="favicon_canvas" width="16" height="16" style="display: none;"></canvas>
</body>

Das Javascript sieht folgendermaßen aus:

var ctx = document.getElementById('favicon_canvas').getContext('2d'); 
var icon = document.getElementById('favicon');
 
 
function setFavicon() {
	ctx.fillStyle = 'blue';  
	ctx.fillRect (0, 0, 16, 16);
	// Die Ecken "abrunden"
	ctx.clearRect(0,0,1,1); 
	ctx.clearRect(15,0,1,1);
	ctx.clearRect(0,15,1,1);
	ctx.clearRect(15,15,1,1);
	icon = document.getElementById('favicon');
	(newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
	icon.parentNode.replaceChild(newIcon,icon);
}

Und schon hat man ein blaues Favicon mit leicht abgerundeten Ecken. Packt man das ganze jetzt noch in ein setInterval() hat man ein ähnlichen Effekt wie bei dem animierten GIF im Firefox.

Auf marekventur.de habe ich jetzt alle drei Favicon-Arten kombiniert: Der IE sieht nur ein statisches Bild, Firefox spielt ein animiertes GIF und Opera und Chrome zeigen eine Welle, die wie der Schriftzug die Farbe und den “Wasserstand” wechselt. Safari macht leider gar nichts. C’est la vie.

Icons einbinden via @font-face

Posted in Development, Icons, Resourcen, Typographie, Webdevelopment on September 19th, 2010 by admin – Be the first to comment

Icons PreviewUPDATE: Aus irgendeinem unerklärlichen Grund fehlen 4 Icons, die in dem Originalset dabei waren. Ich habe keine Lust, alles neu zu machen, also bleiben sie wohl noch eine Weile verschollen…

Ich habe mich vorgestern mal hingesetzt und das Iconset Raphaël (eigentlich als Beigabe für die JavaScript-Library RaphaëlJS gedacht) in einen @font-face-kompatiblen Webfont konvertiert. Das bedeutet, dass 120 Zeichen der Schriftart keine Buchstaben darstellen, sondern Symbole. Eingebunden werden diese dann via CSS (JavaScript ist nicht nötig) und ein wenig HTML:

<span class="icon">M</span> Send me an email!

Das ist zwar zugegebenerweise nicht semantisch korrekt oder besonders Barrierefrei (dazu hier eine Notiz von dem Pictos-Macher), macht das Einbinden aber ziemlich einfach, ist beliebig skalierbar und funktioniert in fast alle Browsern (Safari in iOS spielt komischerweise nicht mit). Einfärben geht intuitiv mit “color” und man kann beliebige CSS3-Effekt auf die Zeichen anwenden. Außerdem ist der gesamte Font relativ klein, 47kb reichen den meisten Browsern.

Die Idee dahinter ist nicht neu, als Vorbild kann Pictos gelten – die aber leider nicht kostenlos sind und sich somit für kleinere Projekte und zum Experimentieren disqualifizieren.

In natura zu bewundern ist das ganze hier. Dort könnt Ihr auch die Dateien (die wie die original Icons unter MIT stehen) runterladen und sie für eure Projekte verwenden.

Icons unter freier Lizenz

Posted in Icons, Resourcen, Webdevelopment on September 3rd, 2010 by admin – 2 Comments

Wer -wie ich- nicht mit dem Geschick gesegnet ist, gut in Icon-Designing zu sein, der muss bei Webprojekten oder ähnlichem auf freie Icons zurückgreifen. Schließlich will man nicht irgenwann wegen ein paar Pixeln über tausende von Euro abgemahnt werden. Wenn man dann noch im Hinterkopf hat, irgendwann mal mit dem Ergebnis Geld verdienen zu wollen, sollte man zwei mal hinschauen; Die meisten Creativ-Common-Iconsets verbieten nämlich kommerzielle Nutzung. Ein guter Anlaufpunkt für Recherchen ist IconFinder.

Daher hier eine kleine Linksammlung von brauchbaren, weil umfangreichen (daran scheitert es oft, wer will schon verschiedene Icons kombinieren müssen) Sets, die nicht nur unter einen freien Lizenz stehen, sondern auch kommerzielle Nutzung erlauben (natülich nur im Rahmen der entsprechenden Open-Source-Bestimmungen):