Новости

Как создать фавикон (иконку) для сайта и установить на сайт

02.09.2018

Добрый день, всем читателя блога LoleknBolek.com. Сегодня поговорим о фавиконе сайта, как его создать с помощью онлайн генераторов , где скачать галерею и как установить favicon на свой сайт WordPress . Иконки сайта — это очень актуальная вещь, так как она улучшает зрительное восприятие и первое впечатление о Вашем сайте.

Что такое фавикон сайта?

Favicon — это небольшое изображение (размером 16х16 пикселей) и имеющее расширение .ico. Его можно наблюдать в левой части вкладки в браузере и в выдаче поисковой системы Яндекс (читайте также про фильтры Яндекса тут ). Покажу на фото ниже, что я имею ввиду. Вид фавикона в поисковой выдаче Яндекса: Иконка как бы казалось очень маленькая и особой пользы принести не сможет. Но это совсем не так. Наличие фавикона на сайте повышает кликабельность Вашего сайта, а соответственно увеличивает трафик и улучшает позиции Вашего сайта в поисковой выдаче . Помимо этого, иконка — это как логотип компании, только это логотип Вашего сайта. Не секрет, что все люди запоминают зрительно и ассоциациями. Так вот, если создать уникальный и интересный favicon, то люди больше будут запоминать Ваш сайт и соответственно больше ставить ссылок на него и чаще заходить. У Яндекса даже есть свой бот, который выкачивает фавиконы. Апдейты происходят не часто, но где-то раз в месяц бывают (что такое апдейты читайте здесь ). Создать его можно в Фотошопе, правда есть небольшие трудности. Photoshop не может сохранять фото с расширением .ico. Для того, что б он научился это делать, нужно ставить специальный плагин. Для создания иконки сайта есть онлайн-генераторы и целые галереи фавиконов. Это намного проще. Скачал галерею и выбрал для себя лучший и никаких проблем. Рассмотрим эти варианты подробнее.

Как создать фавикон для сайта?

Для создания фавикона для Вашего сайта есть 3 способа:

Создать с помощью Photoshop (как я писал выше, для сохранения в расширение .ico нужно установить плагин) Использовать онлайн генераторы Скачать галерею или коллекция и выбрать для себя подходящий

Онлайн генераторы favicon

Favicon.ru - очень удобный сервис. Тут Вы можете закачать любую картинку со своего компьютера и подредактировать ее, можно заказать разработку иконки у дизайнеров, а можно нарисовать самому. Как по мне, то самый лучший вариант — загрузить красивое фото и отредактировать ее в этом сервисе. Быстро, просто и красиво. Внизу есть просмотр того, что Вы нарисовали (или закачали). И большая кнопка «Скачать» с помощью который, Вы сможете сохранить иконку на свой компьютер. Favicon.cc - тут тоже можно загрузить фото и его редактировать онлайн. Соответственно можно и с нуля нарисовать собственный. Очень удобный онлайн генераторов фавиконов. Так же есть возможность предпросмотра Вашего творения Внизу есть кнопка «Download Favicon» с помощью которой можете скачать Вашу иконку. В приципе это 2 самых удобных и популярных онлайн генератора фавиконов. Существует еще больше их количество, некоторые из них приведу ниже с очень кратким описанием.

Как создать Фавикон для сайта онлайн?

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

Antifavicon - этот генератор не такой как остальные. В нем есть возможность добавить текст на иконку. А все остальное в принципе такое же. Загружаем фотку, редактируем и сохраняем.

Chami — простой онлайн сервис. Загружаешь фотку и потом ее сервис преобразует в формат .ico. Есть возможность создать фотку из аккаунта Twitter, но сколько я не пробовал у меня не получалось Попробуйте, может у Вас получится.

Есть еще куча сервисов, но в этом деле тяжело придумать что-то новое. По этому и не буду их приводить, выше приведенных 5 штук хватит с головой

Галереи и коллекции фавиконов

Существуют целый галереи фавиконов, где вы можете выбрать любой который Вам по душе и установить на свой сайт. Вот они эти галереи:

Favicon.cc - да, Вы правильно заметили. Этот сервис мы выше рассматривали как генератор, а теперь я говорю, что он галерея. Так и есть. У сайт имеется раздел (ссылку я поставил) в котором представлено более 205 тыс. различных иконок и даже есть анимированные. Правда фавикон-анимация будет Вам видна только в браузере Firefox (читайте так же как убрать рекламу в Firefox здесь ). Iconj.com - очень большая галерея favicons. Скачать favicon можно как в формате .ico так и в .gif. Существует возможность получить html-код любого favicon. Favicon.co.uk - тоже достаточно большая галерея. 58 страниц на каждой из которых более 120 иконок.

Вот в принципе все галереи которые я знаю и которыми пользовался. Если Вы пользовались другими большими галереями, пишите комментарии и я добавлю Ваш ресурс Это же касается и генераторов. Если знаете хорошие генераторы иконок, которые упрощают процедуру создания favicon, пишите комментарии, я их тоже добавлю

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

Для того, что б установить фавикон на сайт, вначале его нужно загрузить на сервер, где находится Ваш сайт, подключившись по протоколу FTP. Это можно сделать с помощью FTP клиента FileZilla . Чаще всего иконку загружают в корень сайта.

После загрузки, favicon нужно подключить. Это делается так:

Заходим в админку и идем по такому адресу: Внешний вид -> Редактор -> Находим файл header.php

Затем, после тега <head> нужно вставить такие строчки:

Обновляем файл (внизу кнопка «Обновить файл») вот в принципе и все. Как видите процесс установки фавикона на сайт WordPress очень простой. Ничего заумного и сильно хитрого тут нету. Со временем Яндекс бот проиндексирует картинку и посмотреть ее можно будет по такому адресу:

http://favicon.yandex.net/favicon/loleknbolek.com

Кто знаете какие-то прикольные штуки связанные с фавиконами (к примеру особенности работы с ними для Apple устройств и другое) пишите в комментарии и я дополню статью Вашим опытом и советами