Секреты favicon.ico или как создать иконку для сайта в Photoshop

Почему фавикон важен

Несмотря на свой крошечный размер, фавиконы имеют большое значение для любого сайта: улучшают пользовательский опыт, являются частью брендинга и показывают профессионализм компании:

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

Брендинг. Фавикон является одним из элементов фирменного стиля, который способствует запоминаемости логотипа и фирменного стиля компании.

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

Что такое фавикон для сайта

Фавикон – это значок сайта. Своего рода миниатюра логотипа вашего сайта. Как правило, она представляет собой маленькую картинку – не более 16х16 пикселей. Но, не смотря на свой небольшой размер, этот значок может много значить для хозяина сайта. Сегодня мы расскажем, как установить favicon и для чего они нужны.

Пользователям это нужно для того, чтобы было зрительно быстрее и проще найти нужный сайт в закладках. Согласитесь, увидеть яркую (пусть и мелкую) картинку гораздо удобнее, чем прочитывать название каждой странички. Да и в поисквой выдаче, если рядом со строкой стоит маленький яркий логотип – это сразу привлекает внимание. Таким образом эмблема сайта сделает ваш ресурс более заметным и, значит, посещаемость его возрастет. Более того, миниатюрный лого позволит сделать ваш сайт более уникальным и узнаваемым.

Из всего этого следует вывод: логотип должен быть ярким, красочным и запомнающимся. Ведь чем интереснее и чем лучше он запомнится пользователям, тем больше шансов, что повторно люди выберут именно ваш сайт. Но в связи с этим возникает резонный вопрос вопрос: где же взять эту картинку? Здесь способов несколько:

  1. Можно самостоятельно создать лого для сайта с помощью генератора.
  2. Можно скачать уже готовый favicon .
  3. Или вы можете сделать собственную иконку посредством Фотошопа.

Далее мы расскажем, как сделать миниатюрный логотип на свой сайт. 

А прочитать подробно о том, как установить эмблему на сайт, можно в данной статье.

Делаем фавикон онлайн

Фавикон можно сделать в любом графическом редакторе, имея в нем минимальные навыки работы. Однако гораздо проще и быстрее использовать для этого специальные инструменты. Одним из них является бесплатный онлайн сервис FAVICON.CC. Это один из лучших сервисов для создания фавикона онлайн.

favicon-create.jpg

Перечислю основные его возможности:

  • можно нарисовать картинку самому, используя соответствующий мини-редактор и инструменты
  • можно создать фавикон из любого собственного изображения (например, из предварительно найденной иконки на сайте FindIcons)
  • можно сделать анимированное изображение
  • выбрать готовый фавикон для своего сайта из уже имеющейся базы изображений (около 130 тыс.)
  • предпросмотр на вкладке страницы сервиса, как будет выглядеть Ваша картинка в реале

Что такое фавикон (favicon)

favicons.png

Для многих этот термин, скорее всего, уже окажется знакомым. Слово «фавикон» было заимствовано и образовалось при слиянии двух слов: FAVorites ICON (значок/иконка для избранного). Из этимологии вытекает значение слова: фавикон (favicon) является значком веб-сайта или страницы. Браузер или поисковая система отображают его перед URL (в адресной строке), а также в качестве картинки рядом с закладкой, во вкладках и других элементах интерфейса. Практически все современные браузеры и поисковые системы отображают фавиконы не только в закладках или адресной строке но и при показе результатов запроса, как, например, наиболее популярный в России, Yandex.

Фавикон не отображается / обновляется

  1. Если после установки фавикона на сайт он не появился / обновился, значит нужно очистить кэш текущей страницы. Это делается с помощью комбинации клавиш Ctrl+F5. Данная комбинация обновляет страницу вместе с кэшированными данными. Работает она во всех популярных браузерах.
  2. Если очистка кэша не помогла, значит нужно убедиться в правильности расположения фавикона, открыв его через адресную строку браузера: протокол://домен/favicon.ico Если фавикон открылся, но предыдущий, значит нужно обновить само изображение, открытое в обозревателе, с помощью всё той же комбинации клавиш Ctrl+F5. Если же фавикон не открылся или обновление изображения не помогло, значит иконка находится не в корне проекта, а где-то в другом месте; поэтому её нужно переместить или закачать заново куда следует.
  3. Если выполнение описанных выше действий не привело к ожидаемым результатам, то остаётся только очистить кэш браузера «вручную» и фавикон точно должен появиться / обновиться, так как иначе что-то сделано не так, как указано выше.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий