Фотошоп уроки Как создать favicon в Фотошоп

Как создать favicon в Фотошоп

52

При посещении любого сайта вы можете заметить специальную иконку, расположенную слева от URL страницы. При добавлении в избранное она автоматически появляется рядом с выбранной страницей. Как создать favicon иконку в программе Adobe Photoshop и пойдет речь в данной статье…

16x16

Для того, чтобы создать иконку для web сайта нам понадобится плагин для Photoshop, который позволит сохранить полученное изображение в ico формат.

Скачиваем плагин и устанавливаем его, следуя приведенным ниже инструкциям:

  1. Распаковываем папку
  2. Перекидываем файл (ICOFormat или ICOFormat64 – зависит от версии Photoshop (32/64)) с расширением .8bi в папку X:\Program Files\Adobe\Photoshop \Plug-Ins\File Formats\ (где X – это имя диска, где установлена программа)
  3. Перегружаем программу Adobe Photoshop

Заметка: Для 64 битных систем, а также для других папок, в которые устанавливает программа все файлы, нужно найти папку X:\Photoshop \Plug-Ins\File Formats\ (где X – это имя диска, где установлена программа; Photoshop – папка с установленной программой Фотошоп; и папка File Formats обязательна – туда скидываем файл плагина, который скачиваем по вышеуказанной ссылке) .

После того, как вы совершили вышеуказанные действия, у вас должно появиться еще 2 расширения для сохранения файлов в программе: ICO, CUR. Можно прочитать про эти форматы в википедии.

Итак, открываем программу Adobe Photoshop и создаем документ 64×64 пикселя или менее, чтобы сохранить впоследствии наш файл с расширением ICO. Рабочий размер может быть любым, самое главное запомнить, что выходной файл должен быть с размерами 16×16 пикселей.

Теперь рисуем или создаем свой собственный логотип, или загружаем в документ, выбрав предварительно иконку с другого сайта – это ваше личное дело, как использовать ресурсы. 😉

Далее уменьшаем изображение, переходим в меню Image-Image Size и ставим значения 16×16 пикселей.

Затем выбираем пункт Save as и в меню формат находим значение *.ICO, переименовываем наш исходный файл в favicon, сохраняем.

ico

Идем дальше…

Теперь необходимо поместить готовый файл favicon.ico в папку на сервере, где расположен ваш сайт. А именно в то место, где находится основной файл (index.html/index.php).

Если вы сделали все правильно, то большинство браузеров автоматически найдут данную иконку и покажут ее слева от URL страницы. Однако, советую указать адрес favicon.ico вручную непосредственно в HTML коде между тегами <head></head>.

 <link rel="icon" href="http://ваш_сайт/favicon.ico" type="image/x-icon"></link> <link rel="shortcut icon" href="http://ваш_сайт/favicon.ico" type="image/x-icon"></link>

Очищаем кэш браузера и нажимаем F5, чтобы изменения вступили в силу.