Корректная favicon-иконка с прозрачностью

Дмитрий Корнев
18 сентября 2013

Позаботиться об иконке favicon.ico для своего сайта очень желательно. Это не просто картинка, которая показывается в адресной строке в браузере. Гораздо важнее, что она делает закладку с вашим сайтом в браузере более узнаваемой. Также сайт становится легко узнаваем в выдаче поисковиков.

Простой вариант

Делается favicon-иконка легко. В любом графическом редакторе готовим картинку размером 32x32 пикселя. Сегодня лучше именно такой размер, а не 16x16, как было ранее. Большая иконка без проблем подхватывается браузерами, а на всяких устройствах с Retina-дисплеями выглядит более гладко и красиво.

Под Windows могу рекомендовать редактор Paint.Net. Он бесплатен и все что нужно в нем есть.

Просто открываем в нем картинку, если нужно изменяем ее размер до 32x32.

Если у вас исходник не квадратный, то доводим его до квадрата, путем увеличения холста или обрезкой.

Favicon в Paint.Net

Картинку можно подготовить с прозрачным фоном. Если значок/буква, или что там у вас, заполняет не все пространство изображения, как в примере буква «D», то прозрачность крайне желательна. Сохранять результат следует в формат PNG 32-бит. Только так получится сделать PNG с прозрачностью.

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

Я пробовал разные сайты для генерации favicon-иконок, но именно этот мне понравился. Он делает корректную иконку/файл, который 100% открывается везде. Кроме того он не уродует контуры изображения на прозрачном фоне и вообще делает иконку с прозрачностью так, как надо.

Размещать файл favicon.ico следует обязательно в корне сайта.

Если у вас шаблон сайта или движок предусматривает расположение иконки в каком-то каталоге, то можете разместить её там, но дополнительно все равно скопируйте файл и в корень сайта. Так его точно подхватят все, кто только может.

В HTML-коде сайта favicon.ico прописывается внутри тега head так:

<link rel="shortcut icon" href="favicon.ico" >

Рекомендуемый вариант

Я последнее время пользуюсь этим сайтом. Он генерирует сразу несколько иконок, которые оптимизированы для использования на разных устройствах. При этом кроме самих иконок вам будет предложен HTML-код, который требуется разместить в шапке сайта. На входе там лучше использовать изображение логотипа в большом разрешении. Сайт сам делает оптимизацию и нужные форматы. Если исходник будет большой, то результат будет более качественный.

6 комментариев

Ze
Интресная программка, спасибо. Там еще заголовок надо добавить на Apache правильный ;)
По всей видимости имеется в виду файл .htaccess и команда image/x-icon ico, сообщающая что файлы ico являются типом image/x-icon. Я не использую Apache на серверах уже года два-три. Если действительно на Apache возникает ситуация, что ico-файлы не распознаются правильно, то команду стоит добавить, иначе поисковики не увидят иконку.
ir
Огромное спасибо, Дмитрий!!!! Несколько дней согласно разным статьям различными методами генерировала и ставила этот несчастный фавикон. По Вашей статье - за пять минут! И она СРАЗУ ЖЕ! Прозрачная! Появилась в ИЕ! )) И в других браузерах! Чудеса да и только! ))
ir
На заметку - пыталась авторизоваться через ФБ на Ваш сайт - вывалилась ошибка. А ВК рассказал предварительно какую-то страшную историю про пользование личными данными. Не знаю, на сколько это корректно. На всякий случай, - пишу
Вам тоже спасибо за информацию! ) Проверю авторизацию.
Ег
паинт нет не поддерживает этот формат.