Mac и Unix | Создаем favicon

Задумал нарисовать favicon для сайта. Как же так? У других уже есть, а у меня до сих пор нет?! :-) Покопал в Гугле. Как и следовало ожидать, нашлось несколько решений этой задачи.

Самое простое — воспользоваться специальным сетевым генератором favicon, коих в сети великое множество на любой вкус. Загружаешь на страничку рисунок в распространенном графическом формате и получаешь готовый favicon.

Другой вариант — сделать все с помощью своего же компьютера. Лично мне он по духу куда интереснее. О нем я и хочу рассказать.

Потребуется небольшая утилита png2ico. Можно скомпилировать самому (я на Mac этим пока не баловался), а можно воспользоваться уже готовым установщиком. Я смог найти готовую png2ico только для Mac OS X 10.4 (tiger). Тем не менее, программа прекрасно установилась и заработала и на Леопарде (OSX 10.5.x).

Итак, наши действия (вкратце)

1. Скачиваем, разархивируем и устанавливаем пакет png2ico.pkg.
2. Готовим иконку сайта: 16x16 пкс на 16 цветов. Называем fi16x16.png.
3. В терминале вводим:

   $ png2ico favicon.ico fi16x16.png

4. Полученный favicon.ico кладем в корневую папку сайта.

Теперь более спокойно, расширенно и по пунктам

1. Устанавливается пакет стандартным образом. Для разархивирования может потребоваться установка дополнительных программ. С такими задачами замечательно справляется бесплатный StuffIt Expander.
2. Иконку можно сделать в растровом редакторе. Подойдут, например, Adobe® Photoshop® или горячо любимый мной GIMP. Возможно есть уже готовое изображение. Главные требования — размер картинки должен быть 16x16 пикселей; цвета индексированные, желательно не больше 16-ти; тип — PNG. Назовем ее, скажем, fi16x16.png. Сохраним в домашнюю папку пользователя. В моем примере это ⌂ ivan.
3. Терминал спрятан в папке Служебные программы (Shift+Command+U в окне Файндера). В открытом терминале переходим в домашнюю папку:

   $ cd /Users/ivan

   и преобразуем fi16x16.png в favicon.ico командой:

   $ png2ico favicon.ico fi16x16.png

4. Полученный в домашней папке favicon.ico кладем в корневую папку сайта — то место, где лежит главный index.html.

Обычно этого достаточно для появления иконки на всех страничках сайта. Если есть желание сделать свой favicon для разных страничек одного сайта, можно размещать иконки где угодно, нужно только в заголовке каждой странички указать путь к требуемой favicon. В случае корневой папки сайта код следующий:

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

Несколько дополнений

Автоматически урезать цветность исходной PNG-иконки до 16-ти цветов можно командой:

$ png2ico --colors 16 favicon.ico fi16x16.png

В favicon можно дополнительно закодировать изображения большего разрешения (чему я не смог найти применения), например 32x32, 48x48 точек. Нужно только помнить, что это заметно увеличивает размер файла favicon.ico и замедляет открытие страниц. Команда:

$ png2ico --colors 16 favicon.ico fi16x16.png fi32x32.png

И последнее: не смотря на то, что браузер обычно сам пытается найти иконку, имеет смысл явно указывать на положение favicon в заголовке любой страницы.