Как сделать иконку сайта favicon.ico

Часто на биржах фрилансеров можно встретить заказы на создание иконки для сайта.
Как сделать иконку сайта? Легко и просто. И значит, заработать тоже.

Значение иконки сайта

Малое изображение 16Х16 пикселей форматом ico называется иконка. Иконку можно увидеть в адресной строке, «закладках», «истории», «избранном» оглавлениях страниц, находящихся в браузере, или же в результатах поисковой системы.иконка сайта

favicon.icoТакие иконки можно наблюдать также в RSS-лентах и других местах Интернета.
Пиктограмма выделяет ваш сайт из остальных ресурсов. Эстетичная иконка придаст сайту уникальный, оригинальный вид, привлечет внимание пользователей, из-за чего отнеситесь к процессу создания иконки ответственно. Не стоит позволять браузерам ставить Вашему сайту собственную стандартную, неинтересную пиктограмму.

Подключение иконки к своему сайту

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

Помните, у тега есть атрибуты:
hfref — дорога к файлу.
rel — показывает отношения текущего документа и файла (на этот файл создают ссылку).
? shortcut icon — показывает, что файл, который подключаем, является иконкой.
? stylesheet – показывает, что файл, который мы подключаем, имеет в себе таблицу стилей.
? application/rss xml — Файл форматом XML предназначен для описывания новостей.
type - MIME тип данных файла, который подключаем.
Он прописывается в начале документа среди тегов. Расположить его нужно в папке header.php вашей темы между html тегами head и /head в любом месте (на моем блоге после строки  link rel="profile" href="http://gmpg.org/xfn/11" /). Из-за чего вся запись вместе получает такой вид:

путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />
путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

Здесь favicon.ico — наименование иконки, которая находится в основной папке сайта.
К сведению, иконку для сайта обычно называют именно favicon.ico. Располагают ее в основной папке сайта (public_html в блоге WordPress). В случае, когда иконка имеет название favicon.ico и находится в корне сайта, то для многих браузеров этого уже достаточно, чтобы показывать пиктограмму «по умолчанию».
Фавикон может не сразу появиться в поисковой выдаче, так как у Яндекса есть специальные поисковые роботы (боты) для favicon.ico.Каждый сайт он посещает с разной периодичностью. После нахождения вашей иконки роботом, ее можно увидеть по адресу:

http://favicon.yandex.net/favicon/адрес_вашего_сайта

Как самим сделать файл favicon.ico?

Метод первый:

Найти в сети уже готовую иконку, которая Вам подходит в коллекциях.

Метод второй:

Можно сделать иконку при помощи какого-либо онлайн- сервиса. К примеру, http://favicon.ru/.

favicon.ruЗатем можете зайти на данный ресурс, загрузить большое изображение (лучше всего квадратное) при этом весом не более 300кб. К примеру, логотип сайта, кликаете «Сделать favicon.ico из изображения» и когда будете выходить, скачайте уменьшенную копию данного изображения 16×16 (а также, если захотите, 32×32 и 48×48) пикселей форматом ico. Довольно удобный ресурс, который позволяет за короткое время создать иконки хорошего качества. Подробно работу сервиса описывать не буду, здесь все интуитивно понятно

Третий метод:

Самым хорошим вариантом считается нарисовать иконку самим, когда каждый пиксель будет отображать Ваше желание. Многие популярные графические редакторы типа фотошопа не хотят сохранить изображение в формате ico. Есть выход! В Интернете находятся много хороших редакторов иконок, платных и бесплатных, функционально простых или же навороченных.
Воспользоваться можно и таким методом: для начала рисуете иконку в привычном Вам фотошопе, сохраняете её в формате jpg, а затем открываете это изображение при помощи нехитрой программки и сохраняете его же уже в формате ico.

В итоге, выходит, что Вы используете программу как «конвертор», а не графический редактор. Программа называется IcoFX, но, как уже сказано выше, есть много других программ, так что можете не останавливаться именно на этой. Вы можете найти для себя и более удобную программу. Поисковые машины вам в помощь!

One thought on “Как сделать иконку сайта favicon.ico

  1. I just want to tell you that I am just new to weblog and honestly liked your web blog. Probably I’m going to bookmark your blog . You definitely come with awesome posts. Many thanks for sharing with us your website page.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *