Как создать фавикон с помощью графических редакторов: пошаговое руководство

Структура:

  1. Создаем фавикон с помощью Adobe Photoshop
  2. Создаем фавикон с помощью GIMP — GNU Image Manipulation Program
  3. Преимущества использования .ICO перед .PNG или .GIF
  4. Конвертируйте .PNG в .ICO с помощью онлайн-конвертеров
  5. Как установить фавикон на WordPress?

Фавикон — это маленький значок, который используется для визуальной идентификации вашего сайта в закладках, также его вы видите рядом с вашим сайтом или именем страницы на вкладках браузера. Как правило, фавикон представляет собой квадрат размером 16х16 пикселей в формате favicon.ico. В этой стате мы объясним какая “основа” вам нужна для начала работы, поможем вам создать фавикон с помощью графических редакторов и расскажем о способах добавления фавиконки на сайт.

Что нужно для начала работы?

  1. Ваш логотип в размере не меньше 512х512 пикселей (обязательно квадратный);
  2. .PNG формат изображения;
  3. Графический редактор Adobe Photoshop или GIMP.

Создаем фавикон с помощью Adobe Photoshop

 

Фавикон на прозрачном фоне:

1) Откройте логотип в формате PNG на прозрачном фоне в редакторе нажав: “Файл” — “Открыть” и выберите изображение на вашем компьютере.

2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.

3) Теперь, измените размер логотипа на 16х16 пикселей нажав: “Изображение” — “Размер изображения”.

4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть.

5) Сохраните изображение нажав “Файл” — “Сохранить как” и выберите тип файла “PNG”.

Если ваш логотип выглядит отлично, то переходите к шагу 4.

Фавикон на фоне с корпоративным цветом:

1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом.

2) Удалите текст и оставьте только иконку: воспользуйтесь инструментом “Пипетка”, чтобы выбрать цвет в соответствии с фоном — цвет на палитре автоматически измениться на нужный. Теперь, кликните на инструмент “Кисть” и зарисуйте текст.

3) Измените размер нажав “Изображение” — “Изменить размер”, и в соответствующем поле введите показатели 16х16 пикселей. Если изображение выглядит пропорционально — сохраните в формате .PNG и переходите к шагу 4.

Создаем фавикон с помощью GIMP — GNU Image Manipulation Program


GIMP — это графический редактор, который позволяет пользователям работать с векторной графикой. Преимущество данной программы в том, что вы можете создать фавикон в формате .ICO и не придется, как в случае с Adobe Photosop, использовать конвертеры изображений.

1) Откройте файл в программе, нажав “Файл” — “Открыть” и выбрав нужное изображение с компьютера.

2) Теперь нужно удалить текст, чтобы осталась только иконка: кликните по цветовой палитре и укажите цветовой код корпоративного фона. Если он вам не известен, просто кликните на инструмент “Пипетка”, наведите его на фон логотипа и кликните левой кнопкой мышки — цвет задастся автоматически. Теперь, используя инструмент “Кисть”, зарисуйте ненужный текст.

3) Уменьшите размер логотипа до стандартного размера фавиконки — 16х16 пикселей, нажав: “Изображение” — “Изменить размер изображения”.

4) Экспортируйте лого нажав “Файл” — “Экспортировать как …”.

5) И выберите тип файла для экспорта — Значок Microsoft Windows с расширением ICO. и кликните “Экспортировать”.

Готово! Теперь, вы можете использовать фавикон на сайте!

Преимущества использования .ICO перед .PNG или .GIF

 

  1. Совместимость: все браузеры, включая IE 5.0, поддерживают формат .ico.
  2. Избежание ошибок сервера 404: все современные браузеры (протестированные с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать файл favicon.ico, поэтому лучше всегда иметь файл favicon.ico.
  3. Файл .ico может содержать более одного значка, поэтому не нужно создавать несколько файлов для значков размерамы 16×16 и 48×48 пикселей.

Конвертируйте .PNG в .ICO с помощью онлайн-конвертеров


Для того, чтобы конвертировать .PNG файл в .ICO вы можете использовать онлайн-конвертеры. Мы, для примера, выбрали online-convert.com, но вы можете выбрать любой другой из поисковой выдачи, принцип работы у них примерно одинаковый. Итак:

1) Войдите на сайт и в левом сайдбаре выберите: “Конвертер изображений” — “Конвертирование в ІСО”.

2) Выберите файлы для конвертации на компьютере, нажав кнопку “Выберите файлы”, или перетащив файлы в соответствующее поле, и нажмите кнопку “Начать конвертирование”.

3) Теперь, нажмите “Загрузить”, чтобы скачать ваш файл в формате .ico на компьютер. Также, есть возможность загрузить файл в облачное хранилище или скачать файл в виде ZIP.

Как установить фавикон на WordPress?


Загрузите ваш фавикон (favicon.ico) в основной (корневой) каталог сайта. Корневой каталог — это главная папка, в которой находятся все ваши WP-файлы, такие как index.php и папки wp-admin, wp-content + wp-includes. Обязательно разместите favicon.ico на одном уровне с этими папками и index.php.

1) На WordPress откройте “Административную панель”.

2) Войдите в раздел “Appearance”

3) Нажмите на “Theme Editor”.

4) Нажмите на файл, который называется “Header” или “Header.php”, чтобы редактировать.

5) Найдите строку кода, которая начинается с <link rel=»shortcut icon» и заканчивается на /favicon.ico «/>. Измените его, если он существует, или добавьте следующий код под HTML-тегом <head>. В примере мы используем название фавикона как “favicon.ico”. Вы же можете назвать ваш фавикон как угодно.

Код:  <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>;

6) Сохраните изменения.

Выводы:
При разработке вашего сайта вы должны быть уверенны, что не упустили важные детали, даже такие мелкие как фавикон. Добавить иконку действительно не сложно. Но эта крошечная вещь показывает, что вы продумали свой дизайн и позаботились о деталях. У вас остались вопросы, или вы хотите поделиться опытом создания фавикона для вашего сайта? Добро пожаловать в комментарии.