(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Создание и установка фавикона

Источник: webvim
webvim

Фавикон - значок сайта 16×16 пикселей в формате "ico". Он отображается в качестве картинки рядом с закладкой, во вкладках и в выдаче поисковых систем.

Что такое favicon?

ЗАЧЕМ НУЖЕН ФАВИКОН?

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

  • Сайт, который имеет фавикон, вызывает больше доверия. Вспомните себя, на какие ссылки в поисковой выдаче вы чаще кликаете: которые имеют фавикон или нет?
  • Фавикон придает сайту индивидуальный и законченный вид
  • Яркий фавикон привлекает внимание и откладывается в памяти

КАКИМ ДОЛЖЕН БЫТЬ ФАВИКОН?

Примеры favicon

Фавикон - это не, просто, очередная картинка, это "лицо" вашего сайта в уменьшенном виде. Советую уделить время на обдумывание этой мелкой, но, весьма, значительной детали.

  • Фавикон должен ассоциироваться с вашим сайтом
  • Выполнен должен быть в одном стиле с сайтом
  • Должен отличаться простотой. Разместить картину на площади 16×16 пикселей довольно сложно

КАК СДЕЛАТЬ ФАВИКОН?

Я опробовал 2 способа создания иконки фавикона:

  • С помощью сервиса favicon.cc
  • Вручную нарисовать в редакторе

Сервис favicon.cc

Создаем favicon

Нам дано уже готовое поле 16×16 пикселей. Рисуем нашу иконку, буквально, по пикселю. Есть возможность менять цвет, прозрачность. Результат нашего художества сразу же отображается в закладке рядом с названием сайта в реальном размере.

Рисуем вручную в Photoshop

Повозившись с сервисом favicon.cc желаемого результата я не достиг, поэтому решил рисовать вручную в Photoshop. Советую создать документ не 16×16 пикселей, а больше, например, 100×100 пикселей. Так будет удобней работать с нашим будущим фавиконом. Когда фавикон нарисован - уменьшаем размер изображения до 16×16 пикселей (Для этого заходим "Изображение" -> "Размер изображения" и выставляем нужные размеры) и сохраняем в формате jpg или png (Сохраняем в максимальном качестве).

Переходим на сервис генерации favicon. Я использовал favicon-generator.org. Можно еще здесь favicon.co.uk. Сохраняем полученный результат.

УСТАНОВКА ФАВИКОНА НА БЛОГ WORDPRESS

Чтобы наш фавикон появился на сайте выполняем следующие действия:

  • Загружаем полученную иконку в корень папки с WordPress
  • Открываем файл header.php и добавляем следующий код (Вместо site-url - адрес вашего сайта)
    1 <link rel="icon" fb_type=image fb_closeonclick=true fb_title='Открыть в полный размер' href="http://site-url/favicon.png" type="image/x-icon">

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

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 17.12.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
IBM Domino Enterprise Server Processor Value Unit (PVU) Annual SW Subscription & Support Renewal
IBM DOMINO ENTERPRISE CLIENT ACCESS LICENSE AUTHORIZED USER LICENSE + SW SUBSCRIPTION & SUPPORT 12 MONTHS
erwin Data Modeler Workgroup Edition r9.7 - Product plus 1 Year Enterprise Maintenance Commercial
Quest Software. TOAD for SQL Server Xpert Edition
Panda Internet Security - ESD версия - на 1 устройство - (лицензия на 1 год)
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
СУБД Oracle "с нуля"
Новые материалы
Программирование на Visual Basic/Visual Studio и ASP/ASP.NET
Новости мира 3D-ускорителей
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100