Сайт

Значок для сайта: Как добавить иконку сайта в адресную строку браузера?

03.09.2021

Содержание

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

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

Продвигаем бизнес в Интернете с 2001 года
  • Продукты и решения
    • Увеличение продаж Назад
        • Поисковая оптимизация
        • Оптимизация поискового пространства
        • SEO-аудит
        • Контекстная реклама
        • Яндекс. Директ
        • Google Adwords
        • Юзабилити
        • Юзабилити-аудит
        • Повышение конверсии магазина
        • Ремаркетинг
        • Контекстный таргетинг в myTarget
        • Веб-аналитика
        • Performance-инструменты
    • Имидж и лояльность Назад
        • Медийная реклама
        • Баннеры
        • Видеореклама
        • Продвижение в социальных медиа
        • Ведение сообществ
        • Таргетированная реклама
        • Управление информационным фоном
        • Репутационный аудит
        • SERM
        • Контент-маркетинг
        • Внутренний
        • Внешний
    • Создание сайтов Назад
        • Проектирование интерфейсов
        • Разработка сайтов
        • Разработка интернет-магазина
        • Создание лендингов
        • Сопровождение сайтов
        • Аудит производительности
    • Сервисы и технологии Назад
        • SeoRate
        • Лаборатория поисковой аналитики
        • AnalyzeThis
        • Поисковая система
        • Крибрум
        • Семантическое зеркало
        • Веб-фильтр Remparo
        • Парсер социальных сетей Puzzle
        • Тургенев
    • Рейтинги
    • Все услуги
  • Компания
    • Новости
    • Мифы о компании
    • Партнеры
    • Команда
    • Отзывы клиентов
    • Работа у нас
  • Кейсы
  • Образование
    • Отраслевые конференции Назад
        • eTarget. Медицина 2021
        • eTarget. Авто 2021
    • Вебинары Назад
        • 7 особых требований к креативам в таргете
        • Медиапланирование в performance-маркетинге
    • Конференция Optimization
    • Конференция eTarget
    • Академия интернет-маркетинга
    • Книга
  • Акции
  • Блог
  • Контакты
  • Связаться с нами

      Иконка для сайта — Создать свой сайт бесплатно


      В поиске Яндекс возле названия сайта вы можете видеть маленький значок – иконка сайта. Он относится к фирменному стилю сайта, отличительная особенность не только в поиске от Яндекса, но и в закладках браузера.

      Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

      Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

      Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта.

      Как сделать иконку сайта?


      Поддерживаемые форматы иконки сайта: ICO, PNG, GIF, Анимированный GIF, JPEG, но если вы хотите, чтобы ваш фавикон отображался во всех браузерах выбирайте ICO.

      Вы можете скачать готовые иконки для сайта http://faviconka.ru/ нажав на нужной картинке правой мышкой и выбрав Сохранить изображение как левой кнопкой мышки, сами нарисовать в графическом редакторе или сделать из фото.

      Делаем favicon онлайн


      Перейти https://www.favicon.by

      Нарисовать в сетке нужную фигуру цветом подходящим к дизайну сайта


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

      Осталось скачать иконку нажав кнопку СКАЧАТЬ ФАВИКОНКУ 

       


      Logaster — конструктор фирменного стиля: лого, фавикон, визитка, конверт, бланк, русские шрифты. 

      Как установить фавикон на сайт на хостинге


      Копируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё.

       

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