Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Ico для сайта: Бесплатный лучший онлайн-генератор фавикон (favicon.ico) онлайн для вашего сайта

Содержание

Как сменить иконку сайта (favicon.ico) – Помощь

Иконка сайта должна быть в формате .ico, и файл должен иметь название favicon.ico. Для размещения сайта вы можете использовать бесплатный хостинг для сайтов HTML. Бесплатный тестовый режим предоставляется на 14 дней.

Если сайт был создан в Конструкторе REG.RU, добавьте фавикон по инструкции.
  1. 1. Загрузите файл иконки в каталог вашего сайта: В какой каталог нужно загружать файлы моего сайта.
  2. 2.

    Дополнительно (не обязательно, но рекомендовано) добавьте следующие строки в каждую страницу вашего сайта внутрь секции:

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

    или так:

    <link rel="icon" href="http://ваш-сайт.
     
     ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

    или так:

    <link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Отображение иконки сайта зависит только от вашего браузера и не зависит от настроек хостинга, так, например, старые версии Internet Explorer отображают иконки только у сайтов, добавленных в «Избранное».

Была ли эта статья полезной?

Да Нет

Пользователи, считающие этот материал полезным: 1 из 1

Какие нужны фавиконки — Блог HTML Academy

Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!

Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.

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

<link rel="icon">, то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.

<link rel="icon" src="images/my.ico">

При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.

Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.

<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

Иконки Apple в какой-то момент стали стандартом де-факто. Их начали подтягивать не только другие браузеры, но и другие сервисы, чтобы сделать иконку для вашего сайта. Проблема была в том, что это было слабо документировано, учитывало интересы только одной компании и несло само её имя в формате. Нужен был стандарт.

В HTML5 появилось расширенное описание<link rel="icon">: добавился атрибут sizes, чтобы указывать размеры, и атрибут type, чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes. Если иконка векторная — да, так тоже можно — укажите размер any. Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.

<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml

для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.

Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью <link rel="manifest"> на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.

{
  "name": "My App",
  "icons": [{
    "src": "64.png",
    "sizes": "64x64"
  }, {
    "src": "128.png",
    "sizes": "128x128"
  }],
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "tomato",
  "background_color": "cornflowerblue"
}

А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью <link rel="mask-icon"> для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.

<link rel="mask-icon" href="mask.svg" color="red">

Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.

Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png

размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.

Этого вам должно хватить, чтобы было красиво в основных современных браузерах. Но если нужно упороться по мелочам и сделать вот прямо идеально на каждой платформе — мои соболезнования и читайте документацию в описании к видео. Есть ещё сносный онлайновый генератор иконок, но я бы не доверил ему генерировать графику — будет мыльно. А вот код позаимствовать можно.

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

Favicon размеры? — CodeRoad



У меня есть favicon с размерами height=26px / width=20px с именем favicon.png

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />

Однако в моем браузере мой favicon.png полностью искажен.

Вопрос: Должен ли мой favicon.png быть определенного размера? Кроме того, могу ли я использовать нестандартный размер/размер и если да, то как?

html favicon
Поделиться Источник b2000zinger     15 февраля 2010 в 18:49

10 ответов

  • Расположение favicon местоположение

    Сайт использует favicon, хранящийся в корне, но раздел администратора https использует старый favicon, и я не уверен, откуда он взялся. Кто-нибудь знает способ найти ресурсы сайта favicon, то есть откуда они берутся? Все незащищенные страницы используют один и тот же заголовок CSS со ссылками на…

  • Favicon размер в закладках Google Chrome

    Кто-нибудь знает, как показать больший favicon в закладках Google Chrome на моих мобильных устройствах, например, этот fd-favicon ? (изображение) Мой сайт поддерживает размеры favicon: 16×16 72×72 114×114 120×120 144×144 152×152 Изображение: http://oi60.tinypic.com/1yl6ag.jpg Спасибо.


573

favicon должен представлять собой набор изображений 16×16, 32×32 и 48×48 в формате ICO . Формат ICO отличается от PNG. Неквадратные изображения не поддерживаются.

Для генерации favicon, по многим причинам, описанным ниже, я советую вам использовать этот генератор favicon . Полное раскрытие информации: Я являюсь автором этого сайта.

Favicon должно быть квадратным. Настольные браузеры и Apple iOS не поддерживают неквадратные значки.

favicon поддерживается несколькими файлами:

  • Значок favicon.ico .
  • Некоторые другие значки PNG.

Чтобы получить наилучшие результаты в настольных браузерах (Windows/IE, MacOS/Safari, и т. Д.), Вам необходимо объединить оба типа значков.

favicon.ico

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

Формат ICO отличается от формата PNG. Этот момент сложен, потому что некоторые браузеры достаточно умны, чтобы правильно обработать изображение PNG, даже если оно было ошибочно переименовано с расширением ICO.

Файл ICO может содержать несколько изображений, и Microsoft рекомендует поместить версии значка 16×16, 32×32 и 48×48 в favicon.ico . Например, IE будет использовать версию 16×16 для адресной строки и 32×32 для ярлыка на панели задач.

Объявите favicon с:

<link rel="icon" href="/path/to/icons/favicon.ico">

Однако рекомендуется поместить favicon.ico в корневой каталог веб-сайта и вообще не объявлять его , а позволить современным браузерам выбирать значки PNG.

PNG значков

Современные настольные браузеры (IE11, последние версии Chrome, Firefox…) предпочитают использовать значки PNG. Обычные ожидаемые размеры- 16×16, 32×32 и «as размером с possible» . Например, MacOS/Safari использует значок 196×196, если он самый большой, который он может найти.

Каковы рекомендуемые размеры? Выберите свои любимые платформы:

Значки PNG объявляются с:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png">
...

Будьте осторожны: Firefox не поддерживает атрибут sizes и использует последний найденный значок PNG . Обязательно объявите картинку 32×32 последней: она достаточно хороша для Firefox, и это помешает ей загрузить большую картинку, которая ей не нужна. правка: исправлено в 2016 году.

Также обратите внимание, что Chrome не поддерживает атрибут sizes и имеет тенденцию загружать все объявленные значки . Лучше не объявлять слишком много значков. правка: исправлено в 2018 году.

Мобильные платформы

Этот вопрос касается desktop favicon, поэтому нет необходимости слишком углубляться в эту тему.

Apple определяет сенсорный значок для платформы iOS . iOS не поддерживает неквадратный значок. Он просто масштабирует неквадратные изображения, чтобы сделать их квадратными (посмотрите на пример Kioskea) .

Android Chrome полагается на Apple touch icon, а также определяет значок 192×192 PNG .

Microsoft определяет изображение плитки и файл browserconfig.xml .

Вывод

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

Поделиться philippe_b     19 мая 2014 в 09:38

  • Сброс favicon html

    Я работаю над проектом. Использование mamp на Mac. Я пытаюсь сбросить favicon, но мой браузер привязан и полон решимости не менять его. Сначала я поменял файлы Затем я выключил и включил мамп Затем я опустошил catch и hard reset Затем я полностью удалил исходный каталог и опустошил его…

  • Я не могу изменить свой размер Favicon

    Я не могу изменить свой размер favicon даже после того, как я дам ему размеры=32×32, он не меняется, и я не знаю, в чем проблема. Мой код: <link rel=icon type=image/png href=Images/favicon-32×32.png sizes=32×32/>


107

16×16 пикселей, формат *.ico.

Поделиться Mark Hurd     15 февраля 2010 в 18:51


92

стандарты 2020 года благодаря faviconit

Я использую faviconit.com для лучшей поддержки браузера и устройства. Вы загружаете изображение, и этот сайт предоставляет вам код, преобразованные изображения и файл browserconfig.

Мы могли бы просто загрузить favicon вручную на наш веб-сайт размером 16×16, и он, вероятно, появится практически в любом браузере.

Но когда вы пометите его как один из ваших любимых на своем смартфоне или планшете, нам понадобятся изображения большего размера (от 60×60 до 144×144).

И допустим, один из наших пользователей создает ярлык на своем рабочем столе. В этом случае 196×196 выглядит лучше!

Пример кода того, что даст вам faviconit, рядом со всеми преобразованными изображениями:

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon-192.png">
<link rel="icon" type="image/png" href="/favicon-160.png">
<link rel="icon" type="image/png" href="/favicon-96.png">
<link rel="icon" type="image/png" href="/favicon-64.png">
<link rel="icon" type="image/png" href="/favicon-32.png">
<link rel="icon" type="image/png" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" href="/favicon-114.png">
<link rel="apple-touch-icon" href="/favicon-72.png">
<link rel="apple-touch-icon" href="/favicon-144.png">
<link rel="apple-touch-icon" href="/favicon-60.png">
<link rel="apple-touch-icon" href="/favicon-120.png">
<link rel="apple-touch-icon" href="/favicon-76.png">
<link rel="apple-touch-icon" href="/favicon-152.png">
<link rel="apple-touch-icon" href="/favicon-180.png">

С Windows 8

Но это еще не все. Начиная с windows 8 мы можем создавать ярлыки для веб-сайтов с помощью плиток!

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

Загрузите файл с именем browserconfig.xml (чтобы включить плитки в windows >8)

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Поделиться Derk Jan Speelman     01 апреля 2017 в 08:09


39

Самое простое решение в 2021 году-использовать одно(!) изображение PNG

Просто добавьте это в заголовок вашего документа:

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

Последняя ссылка предназначена для Apple (домашний экран), вторая-для Android (домашний экран) и первая-для rest.

Обратите внимание, что это решение не поддерживает «tiles» в Windows 8/10., однако оно поддерживает изображения в ярлыках, закладках и вкладках браузера.

Размер в точности соответствует размеру главного экрана Android. Размер значка на главном экране Apple составляет 60 пикселей (3x), поэтому 180px и будет уменьшен. Другие платформы используют значок ярлыка по умолчанию, который также будет уменьшен.

Поделиться JoostS     06 февраля 2018 в 15:52


31

В Википедии есть что сказать:

Кроме того, такие файлы значков могут иметь размер 16×16 или 32×32 пикселя, а также 8-битную или 24-битную глубину цвета (обратите внимание, что GIF файлов имеют ограниченную 256 записей цветовой палитры).

Я думаю, что лучший способ-использовать gif 32×32 и протестировать его в разных браузерах.

Поделиться Otto Allmendinger     15 февраля 2010 в 18:52


1

Нет, вы не можете использовать нестандартный размер или размер, так как это приведет к хаосу в браузерах людей, где бы ни отображались значки. Вы можете сделать его 12×16 (с четырьмя пикселями белого/прозрачного заполнения на стороне 12 пикселей), чтобы сохранить соотношение сторон, но вы не можете увеличить его (ну, вы можете, но браузер уменьшит его).

Поделиться ceejayoz     15 февраля 2010 в 18:52


1

Формат favicon должен быть квадратным, иначе браузер растянет его. К сожалению, Internet Explorer < 11 не поддерживают типы файлов .gif или .png, а только формат Microsoft .ico. Вы можете использовать какое-нибудь приложение «favicon generator», например: http://favicon-generator.org/

Поделиться UbiQue     07 февраля 2014 в 16:08


1

favicon.ico — это 16×16

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

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

<link rel="apple-touch-icon-precomposed" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">

Важно использовать имя «favicon.ico» в корне, потому что многие браузеры сначала попытаются найти его там.

Поделиться Felipe     04 сентября 2014 в 17:40

Поделиться Pablo Fernandez     15 февраля 2010 в 18:52


0

формат выбранного изображения должен быть 16×16 пикселей или 32×32 пикселя, используя либо 8-битные, либо 24-битные цвета. Формат изображения должен быть одним из PNG (стандарт W3C), GIF или ICO. — Как добавить Favicon на ваш сайт — QA @ W3C

Поделиться blade19899     02 декабря 2013 в 14:18

Похожие вопросы:


Еще одно «почему мой Favicon не показывается?»

Обновление Я только что снова попробовал Pinning мой сайт на панель задач (после его удаления), но когда я нажал и удержал кнопку мыши на значке 16x16px внутри адресной строки (см. рис. ниже), вы…


Все ли размеры favicon извлекаются с сервера?

Если я укажу разные размеры изображений для favicon PNGs, например: <link rel=icon type=image/png sizes=16×16 href=/favicon.png /> <link rel=icon type=image/png sizes=24×24…


Favicon Не Показывается

У меня есть favicon в моем проекте ASP.NET, который не появляется. У меня есть мастер-страница, расположенная по адресу ~ / MasterPages/MasterPage.master, которая содержит favicon. Мой markup…


Расположение favicon местоположение

Сайт использует favicon, хранящийся в корне, но раздел администратора https использует старый favicon, и я не уверен, откуда он взялся. Кто-нибудь знает способ найти ресурсы сайта favicon, то есть…


Favicon размер в закладках Google Chrome

Кто-нибудь знает, как показать больший favicon в закладках Google Chrome на моих мобильных устройствах, например, этот fd-favicon ? (изображение) Мой сайт поддерживает размеры favicon: 16×16 72×72…


Сброс favicon html

Я работаю над проектом. Использование mamp на Mac. Я пытаюсь сбросить favicon, но мой браузер привязан и полон решимости не менять его. Сначала я поменял файлы Затем я выключил и включил мамп Затем…


Я не могу изменить свой размер Favicon

Я не могу изменить свой размер favicon даже после того, как я дам ему размеры=32×32, он не меняется, и я не знаю, в чем проблема. Мой код: <link rel=icon type=image/png…


Favicon Стандарт — 2021 — svg, ico, png и размеры?

Какие размеры favicon, форматы файлов и теги мета/ссылок следует использовать с 2021 года? Это включает в себя значок apple, windows, android и другие устройства, которые люди используют сегодня. Я…


Изменение размера favicon в HTML

В моем проекте я добавляю favicon, как показано здесь: <link rel=shortcut icon type=image/png href={% static ‘favicon.png’ %}/> В моем графическом редакторе я изменяю размер этой графики,…


добавить favicon — <doctype! html> не <!DOCTYPE html>

Мне нужно добавить favicon на мой сайт, но это <doctype! html> , и когда я добавляю команды, как это ничего не происходит <link rel=»icon»…

Житомир.info | Favicon.ico — это индивидуальность вашего сайта

Показателем грамотного подхода к оформлению сайта является наличие иконки, выделяющей сайт из множества ему подобных. Обычная или анимированная иконка привлечет посетителей еще на стадии поиска интересующей информации в поисковой системе Яндекс. В Яндексе предусмотрен специальный бот для поиска и преобразования вашего изображения из графического формата ICO в формат PNG (это касается обычной иконки).

Яндекс записывает его на собственный сервис, чтобы изображение занимало меньше места. Относительно анимированной иконки – то ее полноценное отображение возможно только в браузере FireFox.Favicon – это отличительный знак веб-сайта или веб-страницы, отображающийся браузером в адресной строке перед URL страницы. Также в качестве иконки рядом с закладкой, во вкладке и иных элементах интерфейса. Размер картинки favicon.ico 16х16 пикселей.

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

Онлайн сервисы по созданию фавикона удобны в использовании. Англоязычный генератор Antifavicon дает возможность создать иконку с текстовой надписью. Сервис favicon-Generator позволит генерировать иконку в онлайн режиме из загруженного изображения, либо воспользоваться специальным редактором и создать изображение с нуля. DeGraeve обладает широкими функциональными возможностями как для создания иконки с нуля, так и для корректировки ранее загруженного изображения. Вам останется лишь favicon ico скачать и загрузить на вашем сайте.

Принцип создания иконки у большинства генераторов один – вы указываете путь к картинке на своем компьютере, нажимаете кнопку «generate» и получаете готовый «фавикон» Онлайн генераторы предлагают услугу выдачи ссылки на ваш фавикон, при этом она сама остается на сайте сервиса. Не возникнет вопроса как сделать фавикон и на русскоязычных сервисах – детальная инструкция и удобный интерфейс способствуют быстрому созданию оригинальной иконки для вашего сайта. 

При желании сэкономить время и силы можно скачать favicon ico для сайта из достаточно обширных онлайн галерей и коллекций. Самой большой и разноплановой галереей является favicon.cc. Здесь можно найти обычные и анимированные иконки на все случаи жизни. Достаточно полной коллекцией обладает галерея audit4web. Не игнорируйте этот важный элемент веб-дизайна – сделайте сайт более запоминающимся для посетителей.

Підписуйтесь на Житомир.info в Telegram

Как поставить свою favicon.ico на сайт

Итак, вопрос:

vik wrote:
я хотел бы узнать как поставить лого сайта
перед урлом.у вас это—«W»у маил ру это»@»

И собственно ответ:

Favicon («избр. значок»; этот термин образован от слова «Favorites», обозначающего меню избранных ссылок в Internet Explorer) — это небольшая картинка, которая отображается рядом с названием вашего сайта в «Избранном», или в «Закладках», и рядом с адресом вашего сайта в адресной строке браузера вместо стандартной.

Обычно используется изображение размера 16?16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других.

Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера).

На сегодняшний день Internet Explorer — это единственный браузер, который показывает иконку сайта только если сайт добавлен в «Ибранное» (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера, но в последующих версиях разработчики обещают это исправить. К сайту иконка подвязывается прописанием в коде документа между тегами <head></head> следующего кода:

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

Если, например, вы используете WordPerss, то этот код нужно разместить между тегами <head></head> в файле темы header.php.

Для того чтобы создать иконку для сайта можно воспользоваться несколькими способами:

  1. Использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop.
  2. Использовать специальный плагин для Photoshop, например — IconBuilder-XP100
  3. Использовать онлайн ресурсы для создания favicon. Например — http://favicon.ru/

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

Сайт Favicon.ru полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32х32 и 48х48 для десктопа.

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

В принципе, думаю что вопрос раскрыт более-менее полно. Если вы считаете, что вопрос раскрыт недостаточно полно, то напишите, что еще вам нужно знать (или добавте что знаете вы) о favicon.

Favicon.ico для сайта

Что такое Фавикон и почему следует создать или скачать Favicon ico для сайта

Наверное, вы уже слышали про favicon ico, которая есть у большинства сайтов в не зависимости от используемых ими движков (Joomla, WordPress, Smf и т.п.). Если у вашего сайта фавикона нет, то самое время задуматься о ее создании и установки на свой сайт, т.к. это позволит вам привлекать большее количество посетителей с поисковой системы Яндекс (в поисковой выдаче Яндекс рядом с адресом вашего проекта будет красоваться фавикон ico, побуждая пользователей перейти именно на ваш ресурс).

В принципе, иконку фавикон с расширением ico нужного размера вы можете сделать и сами, но так же у вас будет возможность создать favicon ico с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать фавикон вместе из какой-нибудь online коллекции или галереи. Но сначала, для тех, кто не совсем понимает о чем идет речь, поясню, что такое фавикон, где ее можно увидеть, как ее сделать самому или создать онлайн и затем поставить на свой сайт.

Название Favicon ico произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Иконку фавикона вы можете видеть в адресной строке браузеров (например, в Опере или в Гугл Хроме), перед URL адресом открытой страницы и в закладках браузеров, перед названием закладки.

А так же, что не маловажно, поисковая система Яндекс отображает Favicon ico (фавикон) в поисковой выдаче (результатах поиска) для каждого ресурса, если у этого сайта фавикон будет иметься.

У Яндекса имеется специальный бот для индексации Favicon ico (поисковый робот), в задачу которого входит сбор и обновление фавикон для всех сайтов. Робот Яндекса, специализирующийся на индексации фавикон, посещает сайты с периодичностью от нескольких дней до одного месяца.

Поэтому не стоит ждать того, что недавно созданная в online generator или сделанная самостоятельно фавикон для сайта , сразу же появится в поисковой выдаче Яндекса, рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет вашу Favicon ico, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

1

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

Вам нужно будет в конце ссылки вместо URL моего блога написать URL вашего ресурса.

Так же очень важно, чтобы используемая вами Favicon ico (фавикон) привлекала внимание, что может привести к существенному увеличению количества посетителей, пришедших на ваш сайт с Яндекса. Да и пользователям будет удобнее находить ваш сайт среди множества открытых в браузере вкладок или среди сотен закладок. В общем, выгода очевидна. Осталось только понять, как создать (сделать) и поставить иконку фавикон на свой сайт.

Как создать Favicon для сайта — Photoshop, online generator, коллекция фавикон из галерей и каталогов

Для начала нужно понять, что из себя должна представлять иконка Favicon ico для сайта. По определению это должен быть графический файл формата ICO и при этом размер фавикон должен быть 16 на 16 пикселей.

В принципе, чтобы создать favicon вовсе не обязательно использовать какие-либо специальные online generator (онлайн генераторы), хотя, это довольно удобно и просто. Можно попытаться сделать Фавикон в Photoshop, но он, по умолчанию, он не умеет сохранять изображения в формате ICO. Поэтому, для того, чтобы научить Photoshop работать с ICO, нужно будет установить специальный плагин, который вы можете скачать, например, отсюда.

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

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

Создание фавикон для сайта в online generator (онлайн генераторе) Favicon.cs, коллекции и галереи фавикон пользователей

Первый онлайн генератор Фавикон, который я хочу предложить вашему вниманию — это Favicon.cc. Используя данный online generator вы можете создать свою иконку с нуля, нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favicon».

Как видите, в центре страницы генератора Favicon cs расположена область, каждый квадратик которой является пикселем вашей будущей иконки. Ваша задача при создании собственной иконки Фавикон состоит в закрашивания разными цветами этих квадратиков.

Для закрашивания одного квадратика цветом, вам нужно поставить галочку в правой части окна сервиса в поле «pick existing color», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски, поставьте галочку в поле «transparent» и щелкните по нужному квадратику, в результате чего он станет бесцветным (прозрачным).

Для перемещения нарисованной таким образом иконки Фавикон по холсту сервиса онлайн генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов по созданию иконки фавикон в реальном масштабе, вы сможете наблюдать в области «Preview» под холстом. Если созданная вами Фавикон вам подходит, то нажмите на кнопку «Download Favicon» для ее сохранения к себе на компьютер. В результате, вы получите графический файл favicon.ico, который сможете затем скачать и установить для своего сайта…

Теперь вы знаете как сделать фавикон для своего сайта с нуля. Но если вы не считаете себя способным нарисовать описанным выше способом достойную иконку, то можете загрузить на сервис онлайн генератора уже имеющееся у вас изображение, из которого вы хотели бы создать иконку для сайта. Изображение для будущей иконки фавикон может быть абсолютно любого размера и формата. Для загрузки своей картинки на онлайн сервис favicon generator вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

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

Это актуально, если загружаемое вами изображение не квадратное, как иконка Favicon (размер фавикон 16 на 16). В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions) либо преобразовать изображение к квадратному виду (Shrink to square icon). Во втором случае, изображение будущей фавикон будет искажено по одной из осей.

Для загрузки в online generator Favicon.cc и преобразования в формат фавикона выбранного вами изображения нужно нажать на кнопку «Upload». Созданная из загруженного изображения иконка Фавикон нужного размера будет доступна к редактированию точно так же, как и нарисованная вами иконка. Если сделанная в онлайн генераторе иконка фавикон вам подходит, то нажмите на кнопку «Download Favicon» для того, чтобы скачать фавикон к себе на компьютер.

На онлайн сервисе Favicon.cc так же имеется возможность использовать коллекции фавикон, созданные другими пользователями этого online generator и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся на онлайн сервисе галереи иконок, вам нужно будет нажать в левой части окна online сервиса либо на кнопку «Latest Favicons» для просмотра коллекций фавикон отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.

Как сделать фавикон из любой картинки в онлайн генераторе Favicon.ru

Сервис Favicon.ru значительно проще описанного выше онлайн генератора Favicon.cc. Favicon.ru позволяет только создавать из любого имеющегося у вас изображения иконку фавикон формата ICO размером 16 на 16 пикселей. Никаких настроек и доработок иконки фавикон в этом генераторе сделать нельзя. Просто вы указываете нужное изображение на своем компьютере или в интернете и получаете на выходе готовую к использованию фавиконку, которую останется только скачать.

Этот онлайн генератор примечателен, пожалуй, только тем, что он отечественный. Поэтому Favicon.ru и попал в эту статью. Итак, для работы с этим генератором вам нужно на главной странице вверху нажать на кнопку «Обзор» и указать путь до нужного изображения на вашем компьютере. Можно также ввести адрес (Url) изображения в поле расположенное ниже, в случае, если нужная вам картинка находится не у вас на компьютере, а в интернете.

После этого вам только остается нажать на кнопку «Создать favicon.ico». На открывшейся странице вы увидите ссылку для скачивания получившейся иконки «Скачать favicon.ico». Вот и все, ваша иконка фавикон готова и остается ее только скачать и установить на сайт. Но об этом читайте чуть ниже, а пока рассмотрим несколько онлайн сервисов, где можно сделать или скачать коллекции и галереи уже готовых иконок для того, чтобы их можно было использовать в качестве фавиконов для своего сайта.

Online favicon generator — создание фавикон для сайта, а так же коллекции и галереи иконок

Если вам по каким-либо причинам не понравились описанные выше онлайн сервисы favicon generator, то могу вам предложить попробовать создать или скачать иконку фавикон на одном из следующих сервисов:

  • FaviconGenerator — очень простой онлайн генератор иконок из загруженных вами файлов. Практически аналог online generator под названием Favicon ru, но только зарубежный.
  • AntiFavicon — достаточно интересный онлайн генератор фавикон для сайта. На нем вы можете создать иконку с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму будущей иконки фавикон можно настроить в области «Colors». Готовую иконку можно скачать по ссылке «Your generated favicon», расположенной вверху страницы генератора. Там же вы можете наблюдать превьюшку получающейся иконки
  • FavIcon from Pics 2.0 — еще один простой онлайн сервис, заточенный под создание иконок из любых графических файлов. Указываете путь до картинки на своем компьютере, создаете в генераторе и скачиваете архив с созданной иконкой фавикон в формате ICO и GIF.
  • Простой online favicon генератор на GraphicsGuru — указали путь к картинке на своем компьютере, нажали на кнопку «Generate» и получили вашу фавиконку, скачать которую можно будет нажав на ссылку «Download»
  • Iconj — еще один простой онлайн генератор фавиконов. Примечательно то, то созданную иконку Favicon ico вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
  • DeGraeve — достаточно мощный ресурс по созданию фавиков. По функционалу похож на рассмотренные ранее сервис Favicon.cs. Здесь тоже можно сделать свою иконку фавикон либо с нуля, либо загрузить изображение, которое в последствии можно будет подкорректировать и скачать уже в формате ICO подходящего размера.
  • Online редактор и favicon generator — русскоязычный сервис по созданию иконок фавикон с нуля. Весь интерфейс и инструкция по работе с сервисом полностью на русском, поэтому пояснения по работе с данным онлайн сервисом будут лишними.
  • Favicon-Generator — позволяет как генерировать фавикон иконку в онлайн режиме из загруженного изображения, так и создать ее с нуля в специальном редакторе.
  • WebScriptLab — ну и на закуску еще один простенький online генератор фавикон из любых изображений.

Где скачать коллекции Favicon ico, галереи и каталоги фавиконов

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

В идеале, пользователь должен будет узнавать ваш сайт по одному лишь фавикону, поэтому лучше, если ваша иконка Favicon ico будет уникальной. Но для этого нужно либо сделать фавикон в Photoshop с нуля, либо создать его в онлайн генераторе, как было описано чуть выше.

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего тогда будет попробовать скачать нужный вам фавикон в специально собранных галереях и коллекциях фавикон:

  • audit4web — галерея с более, чем 15000 фавиконок
  • Iconj — достаточно большая коллекция иконок Favicon на том же ресурсе, где находится и онлайн генератор фавиконов, описанный выше.
  • Favicon.cc — огромная коллекция и галерея на 55 тысяч различных фавиконов на все случаи жизни. Имеются так же анимированные Favicon ico, которые, правда, будут видны только в браузере FireFox
  • Gallery — еще немного галерей в каталоге фавиконов

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

Как установить Favicon ico на сайт под управлением Joomla или WordPress

Файл фавикон браузер и поисковый робот Яндекса будут искать прежде всего в корневой папке вашего сайта. Поэтому, можно подключиться по FTP к вашему сайту и загрузить в корневую папку (обычно это public_htm или htdocs) созданную иконку favicon.ico. Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли иконка фавикон в адресной строке.

Если поставить favicon для сайта таким образом у вас не получилось, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая фавиконка. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые на сайте изменения без очистки кэша.

Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить? Откройте исходный код любой страницы вашего проекта в том браузере, который вы используете. Если вы не в курсе, то посмотреть исходный код можно, просто щелкнув правой кнопкой мыши по этой странице в вашем браузере и выбрав пункт контекстного меню «Исходный код» (Opera), либо «Исходный код страницы» (Мазила Фаерфокс), либо «Просмотр кода страницы» (Google Chrome от лидера мирового поиска Гугл), либо «Просмотр HTML-кода» (IE).

Теперь поищите в верхней части исходного кода страницы вашего сайта строку, задающую путь до favicon.ico. Строка исходного кода будет выглядеть примерно так:

1

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" />

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

Файл фавиконки для сайта на Joomla обычно устанавливается в папку с используемым вами шаблоном Joomla, а путь до иконки фавикон прописан в файле index.php из папки с используемым вами шаблоном. Согласно этому пути favicon.ico должна лежать в папке с используемым вами шаблоном. Т.е. здесь:

1

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Путь до файла favicon ico для блога на WordPress, обычно задается в используемой вами теме WordPress. Согласно этому пути фавиконка для WordPress должна лежать в папке с используемой вами темой оформления. Т.е. здесь:

1

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

Как прописать в шаблоне сайта на Joomla, WordPress или Smf путь до Favicon ico

В общем случае, если хотите задать путь до вашей фавиконки, который бы поняли и браузеры и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или Smf, между открывающим и закрывающим тегами HEAD, следующие строчки кода:

1

2

<link rel="shortcut icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />

<link rel="icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона Joomla, WordPress или Smf нужно прописать эти строки, задающие путь до файла favicon.ico, зависит от движка вашего сайта.

Для того, чтобы прописать путь до favicon.ico в Joomla вам нужно будет открыть на редактирование файл index.php из папки используемого вами шаблона Joomla: /templates/Папка_с_шаблоном. В начале файла index.php вы найдете открывающий и закрывающий Html теги HEAD, между которыми вами и надо будет вставить строки с прописанным путем до файла фавиконки в Joomla:

1

2

<link rel="shortcut icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />

<link rel="icon" href="http:путь_до_вашей_иконки_Favicon/favicon.ico" type="image/x-icon" />

Для того, чтобы прописать путь до favicon.ico в WordPress вам нужно будет открыть на редактирование файл header.php из папки с используемой вами темой оформления WordPress: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете файл header.php в редакторе (например, Notepad ++) и в самом его начале находите открывающий Html тег HEAD, который в моем случае выглядит так:

1

<head profile="http://gmpg.org/xfn/11">

В любом месте за ним, но до закрывающего Html тега HEAD:

прописываете те две строчки кода с указание пути до вашего файла favicon.ico для блога на WordPress.

Для того, чтобы прописать путь до фавиконки в SMF вам нужно будет открыть на редактирование файл index.template.php из папки используемой вами темы оформления SMF. Если у вас на форуме SMF используется тема по умолчанию (дефолтная), то путь к папке будет следующий: Themes/default. С помощью встроенного поиска редактора Notepad ++ находите, например, это участок кода:

1

2

3

4

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.

echo '

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />

<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';

и добавляете между этими двумя строками, начинающимися с тега LINK, свои строки кода с указанием пути до вашего файла фавиконки для форума SMF.

Как установить анимированный Favicon ico для сайта

Да, в принципе, точно так же, как и обычную фавиконку. Будет отличаться только код вставляемый в шаблон вашего сайта (Joomla, WordPress или Smf), с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до вашего анимированного фавикона. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать, примерно, так:

1

2

<link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" >

<link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными и обычным фавиконом. Но следует учитывать, что будет работать анимированный Favicon только в FireFox, в остальных же браузерах анимированный фавикон будет статичным. Яндекс же, при загрузке вашей анимированной фавиконки, преобразует ее в статичный формат PNG. В общем, по моему, овчинка выделки не стоит — устанавливать вместо обычного фавикона анимированный не имеет смысла.

Ток, напряжение, измерение


Фавикон: зачем нужен, как создать и поставить на сайт

Подготовили для вас полную инструкцию по фавикон: что это за вид иконки, зачем он нужен вашему сайту, как его создать и поставить на сайт. Нашли требования «Яндекс» и Google к фавиконкам и подобрали четыре сервиса, которые бесплатно сделают за вас всю техническую часть работы.

Что такое фавикон

Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.

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

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

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

Помогает в навигации

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

Фавиконы можно увидеть:

Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Сравните сами: на скриншоте ниже вкладки в мобильном браузере Chrome. На второй снизу вкладке пустая иконка. Вкладку сложнее выделить взглядом среди остальных, да и выглядит она менее презентабельно, чем соседние.

Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Создание favicon

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

Визуальная составляющая

Что учитывать при создании фавиконки:

  • Размер. В некоторых интерфейсах и на маленьких экранах он может достигать 16 на 16 пикселей.
  • Читаемость. Иконка должна читаться в разном окружении — на вкладках и в истории, в результатах поиска.
  • Стиль бренда. Даже если ваш логотип не удается перенести в микро-формат, нужно сделать что-то связанное, в айдентике бренда.

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

Отличный фавикон у «Google Диска». Разноцветный треугольник хорошо смотрится в любом размере.

Логотип «Google Диска» и он же в виде фавиконки на вкладке

Мы тоже использовали для фавиконки графическую часть логотипа. Ее хорошо видно на вкладке благодаря различимой форме и контрастному цвету.

Логотип SendPulse и он же в виде фавиконки на вкладке

Если у вас буквенное лого, его тоже можно разместить на фавиконе. На примере от VC.ru видно, что при хорошо подобранном шрифте буквы нормально читаются даже на маленькой иконке. Для яркости добавили красную точку, так вкладку гораздо легче найти.

Логотип VC.ru и он же в виде фавиконки на вкладке

Требования «Яндекс» к фавиконке

Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.

Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.

Вот что «Яндекс» пишет по поводу фавиконок:

  • Робот возьмет любую из имеющихся иконок, которая ему доступна и подходит под требования сервиса, на котором нужно ее показать.
  • Если сайт недоступен, робот возьмет произвольную иконку хостинга со страницы-заглушки сайта.

Раздел «Яндекс.Справки» о фавиконках

Требования Google к фавиконке

Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.

Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.

Кроме этого, Google рекомендует следующее:

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

Раздел документации Google о фавиконках

Сервисы для создания фавиконки без программиста

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

Realfavicongenerator

Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.

Настройка получившихся иконок в Realfavicongenerator

В результате получаете пакет файлов для скачивания и код для встраивания на сайт.

Пакет нужно скачать в виде файлов и куска кода

Favic-o-matic

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

Результат создания фавиконок в Favic-o-Matic

Favicon.ico & App Icon Generator

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

Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator

Faviconit

Этот сервис попросит исходник минимум 310 на 310 пикселей и весом не более 5 Мб. После обработки вы получите пакет с файлами, внутри которого будет лежать и текстовый файл с кодом для встраивания на сайт.

Готовый пакет фавиконок и код для сайта в Faviconit

Как добавить фавикон на сайт

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

Загружаем иконки на сайт

Иконки нужно положить в корневую папку вашего сайта. Для этого понадобится доступ к сайту на хостинге, где он лежит. Загрузить файлы можно либо через собственную панель управления, если такая есть у вашего хостинг-провайдера, или какой-нибудь файловый менеджер, например, FileZilla.

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

Редактируем код

Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

<head>

…

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>

…

</head>

Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

Фавикон: что следует запомнить

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

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

Фавиконок нужно несколько на разные локации. Чтобы не запоминать размеры и свойства всех нужных иконок, используйте один из специальных сервисов. Сервис выдаст вам готовый пакет фавиконок и кусок кода, которые нужно будет загрузить в корневую папку вашего сайта и вставить в код главной страницы.

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

[Всего: 7   Средний:  4.9/5]

Список активных ICO и IEO (Token Sale) с рейтингами и анализом

BTC $ 56721 -5.6%

ETH $ 4127 -2.9%


* ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Вся информация, включая наш рейтинг «Уровень интереса», предоставляется только в информационных целях. ICO Drops не дает советов по инвестициям (подробнее)

Проект Интерес Категория Полученный Цель Дата окончания Теги

Все