Вы просматриваете: Главная > CMS Wordpress & CMS Joomla > Анимированный favicon для сайта при помощи Gimp

Анимированный favicon для сайта при помощи Gimp


Всё чаще в сети попадаются сайты с иконками в результатах поиска и строке браузера. Было решено сделать себе такую же. Но, как всегда, дурная голова ногам/рукам (у кого как) покоя не даёт! 🙂

Поставим несколько дополнительных условий создания favicon‘а:

  • Делаем иконку в Gimp‘е
  • Делаем, чтоб всем на зависть — анимированную
  • Создаём иконку с «нуля»
  • Создаём иконку «за 5 (пять) минут» 🙂

Но есть и подводные камни:

  • Художник из меня от слова «худо». 🙂
  • После создания иконки будем писать статью на тему «Как создать и прикрутить иконку к сайту».
  • Создадим анимированный .gif для иллюстрации процесса рисования.

Итак, начнём:

Что такое favicon?

  • favicon — это графический файл формата ico или gif, хотя, наверное ,можно и .png, кому охота могут поэкспериментировать.
  • Чтобы наш favicon начал работать, достаточно положить файл «favicon.ico» в корень сайта, некоторым браузерам и программам этого достаточно.
  • Но для особо придирчивых программ и роботов во всех файлах сайта между тегами <head> и </head> необходио вставить следующий код:
<link rel="icon" href="http://mycoolsite.tld/favicon.ico" type="image/x-icon">
<link rel=”shortcut icon” href=”http://mycoolsite.tld/favicon.ico” type=”image/x-icon”>
  • Если необходимо (очень хочется) сделать иконку анимированной, то вместо «favicon.ico» необходимо вставить «favicon.gif«. Имя файла не имеет значения, если в текст страницы вставлен код из предыдущего пункта, в котором указано имя файла, содержащего иконку.
  • С учётом вышеизложенного теоритически сайт может иметь две иконки: одну «стандартную» — favicon.ico и другую любую, указанную в коде <head>. Даже каждая отдельная страница может иметь свою иконку.
  • Анимированную иконку поддерживают не все браузеры.
  • Для того, чтобы иконка подключилась в WordPress‘е, достаточно положить файл «favicon.ico» в корень темы. В некоторых темах может потребоваться дополнительная настройка.

Рисуем иконку в Gimp.

Как рисовать в Gimp, желающие могут узнать у Гоши, Яши или у любых других специалистов по сети.

Используемые инструменты: градиент, кисть, заливка.

Также используются следующие кисти (выделены черным по границе):

Используемые кисти

Что получилось в результате (слои):

Результат работы

Результат, или «Что в итоге получилось»:

Дерево и крылатое летящее создание

Увеличенная копия истории создания анимации с короткими пояснениями происходящего.

Понравилось? Сохраняем творение: иконку в gif формате. При сохранении файла GIMP спросит, как сохранять, выбирайте “Сохранить как анимацию” и сохраняйте. Вот и все! Главное не останавливаться на достигнутом. А там, глядишь, и шедевры начнут получаться. 🙂


Оставить отзыв