При открытии любого сайта часто можно встретить маленькую картинку-значок: иконку сайта. От английского favicon. Иконка сайта своего рода визиткая карточка, логотип, отличительный знак среди множества открытых вкладок браузера. Сегодня я расскажу как установить favicon на сайт.
Вы только открыли магазин и стали заниматься его наполнением, дизайном и внешним видом. Именно сейчас и надо позаботиться о такой важной «мелочи» как иконка сайта. Чем раньше вы продумаете и установите ее, тем быстрее она начнет работать на вас!
Favicon отображается в браузере в левом верхнем углу, при добавлении сайта в закладки. И самое важное — в поисковой выдаче!
Не все поисковые системы поддерживают иконки. Из популярных (Гугл, яндекс) только Яндекс — отображает иконку сайта тем самым повышая кликабельность, эффективность и узнаваемость сайта в выдаче. После установки иконки яндекс не моментально забирает ее. Необходимо, чтобы прошло примерно 2-3 недели и только после этого иконка появится у адреса сайта в выдаче.
Общепринятые стандарты: 16х16, 32х32 пикселя. В таком миниатюрном окошке довольно проблематично уместить тематическую картинку для сайта с вменяемым содержимым.
Первый вариант сделать иконку для сайта — нарисовать ее в photoshop. Установить плагин для сохранения в .ico и сохранить… Но я не рекомендую запускать такую тяжеловесную программу для создания фавиконки. Это все равно что поехать на лимузине за картошкой в огород. Мы поступим проще и сразу воспользуемся вторым способом — генератором иконок…
Да, вы не ослышались! Делаем иконку сайта онлайн на специальных сервисах генераторах иконок. Обычно я использую вот эти:
После обработки вашей картинки вы получите файл с форматом .ico и названием favicon. Вам остается скачать favicon для сайта. Этот файлик как есть загружаете в корень через файловый менеджер, браузер автоматически подхватывает картинку. Если favicon не отображается, то…
Добавляете строчку в область перед закрывающим head файла отвечающего за «шапку»:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Советую иконку закидывать в корень сайта. Теперь то уж иконка должна появиться. Если не появилась — очистите кеш браузера.
Едем дальше 
у иконок обычно на заднем фоне остается белая, квадратная область. Руки так и чешутся ее немного подкорректировать…
Заходим на этот сайт. И вуаля! У вас получится иконка с прозрачностью. (Для этого заранее придется в редакторе изображений удалить ненужные места)
Все выше сказанное конечно, прекрасно, скажете вы. А как установить иконку в магазин простопринта?
Заходим в раздел «настройки->профиль» там будет сразу доступна кнопочка для загрузки иконки магазина.
Loading ...