Favicon размеры?

Способы создания Фавикон для сайта

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

Готовые коллекции Фавикон

Если Вы не хотите заморачиваться с изготовлением изображения для иконки favicon, в помощь Вам готовые коллекции изображений.

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

Если же нет идей по поводу картинки, то можно попросту сделать рисунок с изображением одной или нескольких букв, по которым можно было бы узнать название или тематическое содержание сайта. Например, на сайте Одноклассники.ру на фавиконе размещены буквы «OK», по которым можно сразу узнать, что это за социальная сеть.

Ресурсы с иконками:

1. //www.thefavicongallery.com/ — небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
2. //www.iconj.com/ — содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в разных графических форматах.
3. //www.favicon.cc/ — огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
4. //www.favicon.by/ — не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
5. //www.flaticon.com — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.

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

Графические редакторы

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

Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.

Картинки в поисковых системах

Самый простой, но довольно эффективный способ для поиска будущего фавикона соответствующего тематике Вашего веб-сайта.

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

Изображения надо искать с прозрачным фоном (расширение PNG), размер не имеет значения. В последующем преобразуем выбранную картинку в нужный нам формат.

Иконки в Яндекс.Картинках

Онлайн сервисы создания Favicon

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

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

Вот список наиболее популярных сервисов для онлайн создания фавикон:

1. //www.favicon.cc/ — англоязычный сервис создания Favicon
2. //favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
3. //www.favicon.by/ — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.

Limitations

There are several limitations to the approaches described above,
including the preferred method (which is why the TAG continues to work
on the question):

• The approaches only work in HTML or XHTML
• The preferred approach associates a favicon with an HTML document,
  not a collection of documents (i.e., a site)
• The proposed profile for defining the «icon» value is not a
  recognized standard, which means there may be interoperability issues
  in practice.
• There is no standard (at least defined by HTML 4.01)
  for machine-readable profiles that would
  allow a browser to know «this means an image is a favicon.» Thus, a
  browser has to be programmed in advance to recognize this particular
  value of . For more information on the use of profiles
  in HTML and XHTML, see GRDDL
  [].

Как создать фавиконку?

• Самый простой способ — скачать в Сети. Благо, таких возможностей предоставлено с лихвой. Введите поисковый запрос «Скачать иконку сайта» и выберите, что Вам нравится.
• Можно нарисовать иконку самостоятельно. Если Вы владеете навыками работы с программой Photoshop, сделать это будет не сложно.
• Ну, и третий вариант, который я считаю оптимальным, — это использование онлайн-сервисов. Свою фавиконку я сделал именно таким образом. Поэтому позвольте представить Вам адрес этого онлайн-сервиса: //www.favicon.cc
  Мне он понравился больше остальных.

Здесь можно нарисовать свою иконку или загрузить изображение с компьютера. Используя картинку с компьютера, подготовьте её, отредактировав таким образом, чтобы она была квадратной или сразу придайте ей размеры 16×16 пикселов. Это позволит избежать искажений. После создания иконки, скачайте её на компьютер. Полученное изображение имеет расширение .ico.

Файл иконки загрузите в корневую директорию вашего сайта. И это всё! Более никаких действий от Вас не требуется.

Но, если Вы используете устаревшие браузеры, то в разделе HEAD прописывается следующий код:

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

Где favicon.ico — это файл иконки в корне сайта.

Перезагрузите страницу и проверьте, появилась ли иконка в установленном месте. На сайте она появляется сразу же, а в Яндекс.Вебмастере только после индексации.

Код понадобится так же в случае, если Вы пожелаете использовать изображение с другим расширением (допускается png и gif) или будете ставить для каждой страницы отдельный значок. В этом случае в секцию HEAD страницы нужно вставлять такой код:

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

Где image.png — файл иконки.

Как уже было оговорено, форматом файла может быть как png так и gif. В примере изображение имеет расширение png. В случае формата gif, в коде нужно сделать соответствующие замены (в двух местах png на gif).

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5, подробней читайте . Интересным здесь является атрибут , который задаёт размер иконок для визуально отображения в формате:

{ширина1}x{высота1} [{ширинаN}x{высотаN}] | any

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

<link rel=icon href=favicon.png sizes=»16×16″ type=»image/png»><link rel=icon href=windows.ico sizes=»32×32 48×48″ type=»image/vnd.microsoft.icon»><link rel=icon href=mac.icns sizes=»128×128 512×512 8192×8192 32768×32768″><link rel=icon href=iphone.png sizes=»57×57″ type=»image/png»><link rel=icon href=gnome.svg sizes=»any» type=»image/svg+xml»>

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Размеры фавикона

Итак, теперь поговорим о том, насколько большой должна быть картинка, которую мы видим рядом с названием сайта в поисковой выдаче. По умолчанию, как уже говорилось, ее размер составляет всего 16 пикселей (по каждой из сторон). Однако если вы попробуете редактировать это изображение в “Фотошопе”, сами убедитесь в том, насколько это неудобно. Поэтому рекомендуем работать с увеличенной картинкой, которую в дальнейшем можно будет просто сжать по краям и сохранить в требуемом формате.

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

• Чтобы создать такой файл, есть несколько инструментов.
• На веб-сайте вы найдете все необходимые значки, включая анимированную версию.

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

Что такое favicon и для чего он нужен?

Что такое Favicon?

Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

Oklick

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

После всех манипуляций нажимаем кнопку «Upload». Редактирование загруженной фавиконки будет доступно аналогичным способом, что и создание с нуля. Для скачивания готового шедевра на ПК следует нажать кнопку «Download».

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

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

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

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

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

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

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

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

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

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

• Галерея иконок для сайта favicon.ico;
• Iconj;
• Favicon.cc;
• The Favicon Gallery.

В них можно найти десятки тысяч мини-логотипов для своего проекта, как говорится на любой вкус и цвет.

Как разблокировать айфон, если забыл пароль

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

Но что делать, если забыл пароль от айфона, и вспомнить его не удается? Варианты, как разблокировать IPhone, существуют, но они довольно жесткие. Возможно это только в том случае, если не заблокирован Apple ID. Тогда помогут только в специальной службе поддержки. Понадобится перепрошить телефон, полностью переустановить систему. Это сложный и дорогостоящий процесс.

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

Через iTunes

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

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

Отменить процесс невозможно.

Пошаговая инструкция:

1. Подключить заблокированное устройство с помощью USB-кабеля к компьютеру с любой системой Windows, начиная с ХР, и запустить iTunes.
2. Провести жесткую перезагрузку айфона, айпода или айпада. Для запуска процесса нужно нажать кнопки выключения питания и «Домой». Для новых устройств, начиная с iOS 7, после подключения к iTunes выключить IPhone, затем зажать на несколько секунд кнопку включения. Не отпуская ее, нажать кнопку уменьшения громкости, удерживать их вместе 10 секунд, после чего отпустить кнопку включения и держать кнопку уменьшения громкости еще 5 секунд.
3. Удерживать кнопки жесткой перезагрузки до тех пор, пока на экране устройства не высветится логотип iTunes. Это признак того, что система начала восстанавливаться.
4. Из предложенных вариантов «Обновить» и «Восстановить» выбрать второй. После этого начнется загрузка системы.

Важно! Интернет-соединение должно быть высокоскоростным, чтобы вся процедура заняла не дольше 15 мин. Если не уложиться в этот срок, придется все начинать сначала. Подключение iPhone S к iTunes

Подключение iPhone S к iTunes

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

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

Через iCloud

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

В интернет-браузере открывается сервис iCloud, туда вводятся личные данные и выполняется вход в систему. Далее используется функция поиска устройства Apple, а когда оно будет обнаружено, появится функция «Стереть IPhone». Необходимо ей воспользоваться, в результате чего система снимет блок. Но и в этом случае придется смириться с тем, что устройство удалит все имеющиеся на нем старые данные.

Искушение № 2. Добавление трех и более объектов

Добавлять более двух различных объектов в иконку крайне нежелательно. Обычно, два простых объекта нормально входят даже в размере 16х16, хотя никогда не помешает задуматься, можно ли уменьшить число объектов для лучшей читабельности.

Пытайтесь отобразить какую-нибудь одну функцию иконки. Для иконки «Администратор сети» нарисуйте «ботаника» в очках, но не добавляйте гаечный ключ и компьютер, подключенный к сети.

Эта иконка установочного файла — наглядный пример перегруженной объектами иконки. Мы уже знаем, что программы, как правило, устанавливаются на компьютер. Мы уже знаем, что иногда программы распространяется на CD. Одной коробки было бы достаточно.

Другие расширения

Что касается остальных форматов, то у каждого есть как свои преимущества, так и недостатки. Все они проявляются в зависимости от того, в каком браузере отображаются. К примеру, картинки формата .gif не совместимы со старыми браузерами. Картинкам .jpg недостает качества и четкости изображения, однако здесь плавные переходы между цветами. Отличным качеством изображения обладают фавиконы формата .svg, вот только они доступны лишь в браузере Opera.

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

Реклама

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.

Для добавления favicon html код является следующим:

<link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />

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

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

Часто задаваемые вопросы

Method 2 (Discouraged): Putting the favicon at a predefined URI

A second method for specifying a favicon relies on using a
predefined URI to identify the image: «/favicon», which is relative to
the server root. This method works because some browsers have been
programmed to look for favicons using that URI. This approach is
inconsistent with some principles of Web architecture and is being
discussed by W3C’s Technical Architecture Group
(TAG) as their issue .
To summarize the issue: The Web architecture authorizes site managers
to manage their URI space (for a given domain name) as they see
fit. Conventions that do not represent community agreement and that
reduce the options available to a site manager do not scale and may
lead to conflict (since there is no well-known list of these
predefined URIs). One practical consideration illustrates the problem:
many users have Web sites even though they do not have their own
domain name. These users cannot specify favicons using the second
method if they cannot write to the server root. However, they can use
method one to specify a favicon since it is more flexible and does not
constrain the site manager to use a single favicon at a single place
on the site.

There are a few other well-known encroachments on URI space,
including the «robots.txt» file and the location of a P3P privacy
policy. The Technical Architecture Group is exploring alternatives
that do not impinge on URI space without license.

Генератор фавикон онлайн (favicon ico online)

Более того, создавая иконки в едином стиле, вы делаете их похожими друг на друга. Вместо этого используйте Руководство по стилю иконок от операционных систем. Начиная с ОС Windows XP, компания Microsoft вводит такие параметры, как перспектива, источник света и общий вид. Соответственно иконки для ОС Vista должны быть реалистичными, а источник света должен располагаться в левом верхнем углу, слегка перед иконкой.

В приложении для конференций Yugma логотип используется для всех пунктов стартового меню, так что здесь фирменная символика применена на все 100%. Сравните их с понятными иконками TuneUp Utilities 2008, которые отражают непосредственно свои функции.

Особенности форматов

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

Самые распространенные форматы на сегодня это .png и .ico:

• .ico- этот формат превосходно подходит для Windows. Картинки с таким расширением имеют разное разрешение и глубину цвета. То есть, битовую глубину, что характеризирует информацию о цвете для каждого пикселя и делает изображение более точным. Для браузера Internet Explorer это отличное решение, так как здесь могут использоваться фавиконы разных размеров.
• .png — файлы этого расширения более удобны в использовании. Это объясняется тем, что для создания иконки сайта не нужно никаких дополнительных инструментов. Более того, форматом поддерживается маска-канал, с помощью которой можно создать картинку самого маленького размера без потери качества изображения. Единственное, чем этот формат уступает предыдущему – невозможность отображения фавикона в Internet Explorer.

Что такое средство восстановления папки «Входящие»

Заключение