Как сделать фавикон – иконку для сайта

Фавикон – это такая маленькая иконка, которая показывается в некоторых браузерах в адресной строке рядом с урлом сайта и в поисковиках – опять же в некоторых – пользователь тоже видит эту иконку напротив имени сайта.

При прочих равных подсознательно сайт с картиночкой вызывает чуть больше доверия, чем стоящий рядом в выдаче без картинки. А уж если еще и картиночка тематическая…

Например, на сайте женского журнала “Мадам Анин” фавикон – это маленькая симпатичная розочка.

Наверняка, когда пользовательницы видят этот сайт в выдаче, они отдают предпочтение именно ему, а не рядом стоящим безликим строчкам.

Опишу, как я делаю фавиконы.

Не обошлось без нарушения авторских прав, но все же думаю из-за такого микробного изображения вряд ли кто-то обидится.

Шаг 1. Выбираем изображение

Можете искать в интернете. В гугле есть для этого удобная опция поиска по картинкам – поиск по типу изображение, нужно выбрать “клип-арт”.

Но я ищу по-другому. Более целенаправленно. Иду на фотосток. Для примера я пойду на западный фотосток Dreamstime (поищите его в гугле по названию). Там в поле поиска набираю слово “icon”. Можно сузить поиск, если вы например, ищете иконку с собакой, напишите “dog icon”. Ну, а я буду искать картинку для иконки этого сайта.

Совет для выбора иконки – выбирайте что-то с четкими контурами, без мелких деталей и линий, желательно однотонное. В противном случае на уменьшенном изображении невозможно будет разобрать, что там за картинка – ведь размер будет всего-навсего 16*16.

Нашли что-то симпатичное? Сохраняем выбранное изображение.

Шаг 2. Вырезаем нужную картинку

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

Я открыла картинку в фотошопе, затем выбрала инструмент прямоугольного выделения (сбоку на панели, показан стрелкой). После этого я поставила стиль Fixed Size и задала фиксированные размеры (панель сверху). Почему бы просто не обрезать? Потому что иконка должна быть квадратная, а если она будет прямоугольной, тогда она в дальнейшем автоматически обрежется до квадратных размеров. При этом наверняка обрежется что-то лишнее, а это ни к чему.

У меня фиксированные размеры квадрата получились 54*54, а вам нужно будет подобрать свои, чтобы иконка была вписана в этот квадрат, и оставалось минимум свободного белого места.

Дальше в меню выбираем Image → Crop. Картинка обрезалась, и сохраняем ее.

Шаг 3. Делаем фавикон из картинки

В интернете много онлайновых сервисов, которые умеют преобразовывать картинку формата *.jpg в картинку, пригодную для фавикона в формате *.ico.

Я пользуюсь сервисом http://favicon.ru/ .

Итак, открываем страницу.

Нажимаем кнопку “Обзор”, выбираем свою картинку (1). Дальше жмем на “Создать favicon.ico” (2).

Сайт создаст иконку из вашей картинки. В принципе она готова, и ее можно скачать (“Скачать favicon.ico!”). Но сейчас она на белом фоне. То есть в тех браузерах, где адресная строка подсвечена серым или другим цветом, напротив адреса сайта будет стоять некрасивый белый прямоугольник, а на нем изображение.

Поэтому сделаем фон нашего фавикона прозрачным.

Для этого жмем “Редактировать иконку”, и нас перенаправляют в окошко онлайнового графического редактора.

Мы видим в редакторе изображение на белом фоне. Нам нужно удалить весь этот фон, сделать прозрачным. По умолчанию инструмент в этом редакторе – карандаш, а текущий цвет как раз прозрачный (меню слева). Закрашиваем на картинке все белые клеточки.

После этого нажимаем сначала кнопку “Сохранить изменения”, а потом “Create favicon”.

После этого появится экран, на котором большими синими буквами будет написано “Скачать favicon.ico!”. Скачиваем.

Шаг 4. Загружаем фавикон на сайт

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

Если не умеете ковыряться с кодом, то положите favicon.ico в корневую папку сайта, в большинстве случаев он будет появляться автоматически.

Теперь пропишем путь к иконке. Путь к фавикону прописывается в хедере. Для wordpress – файлик в текущей теме, который вам нужен, называется header.php.

Между тегами <head> </head> вам нужно написать следующие две строчки.

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

То, что выделено красным – путь к иконке. Если вы положили ее не в корень сайта, а в какую-то другую папку на сервере, укажите полный путь к ней.

Шаг 5. Ждем-с

Если вы пользуетесь Firefox, то вам нужно закрыть браузер и снова открыть его – новоиспеченная иконка появится рядом с урлом вашего сайта. В некоторых версия Explorer иконка тоже появляется (иногда для этого нужно занести сайт в закладки).

Что касается поисковиков – вашу иконку они загрузят при очередном обновлении базы. То есть, если с индексацией вашего сайта все в порядке, то вы увидите ваш фавикон рядом с названием сайта через одну- две недели. Гугл фавиконы не показывает, а вот Яндекс – очень даже показывает.