Maak een favicon in Photoshop

Favicon Photoshop plugin

Om een favicon te kunnen maken, rechtstreeks in Photoshop heb je een plugin nodig.
Na installatie van deze plugin is het mogelijk om een bestandje op te slaan in het .ico formaat.
Download eerst de plugin (http://www.telegraphics.com.au/sw)

Nadat je de plugin hebt gedownload en uitgepakt moet het bestand ICOFormat.8bi worden gekopieerd naar de plugis directory van Photoshop (in de map extensies).
Bijv.

C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats

Photoshop herstarten en je kunt aan de slag.

Hoe maak je een Favicon in Photoshop?

Om een mooie favicon te maken met de afmeting 16x16px is wat lastig daarom is het beter een nieuw bestand te maken van 64×64.
Ontwerp nu je favicon door je bijv. je logo te plaatsen of maakt iets creatiefs.

Wanneer je klaar bent met het ontwerp selecteer Image> Image size en voer in 16 x 16px. Klik op onderste dropdown menu en kies voor “Bicubic Sharper” .
Dit is de beste instelling om ervoor te zorgen dat een afbeelding niet zal vervagen als hij wordt aangepast.
Als het nog niet scherp genoeg is, ga terug en oversharpen, oversaturate en/of heighten the contrast  van het bestand en vervolgens resize je het formaat weer.

Het opslaan
Ga naar File> Save As en zorg ervoor dat je de naam van het bestand favicon.ico noemt. Onder Formaat moet je Windows Icon (ICO) kiezen in het vervolgkeuzemenu.
Dit formaat is alleen beschikbaar in Photoshop nadat je het downloaden en installeren van de plugin.

Het uploaden van het bestand favicon.ico
Verbinding te maken met je server en upload je favicon.ico bestand naar je website.

Sommige browsers kijken naar een directe link in de HTML-broncode van de site naar het favicon.ico bestand.
Je kan nu in het head-gedeelte van elke pagina waarop je wilt dat de favicon.ico moet verschijnen de volgende code plaatsen.
Code:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Nadat je deze code hebt toegevoegd, moet je de gewijzigde pagina’s uploaden.

Als je gebruik wilt maken van een GIF-of PNG-bestand, gebruik dan deze code (zal werken in IE):

<link rel="icon" href="/favicon.png" type="image/png">

of

<link rel="icon" href="/favicon.gif" type="image/gif">

Testen
Als jenieuwe Favicon niet meteen ziet probeer dan de pagina te verversen of wis het cachegeheugen – of type een “?” aan het eind van de url,
dit is een foefje om de browser te laten denken dat de pagina nieuw is en niet is gecached.