Hoe maak je een favicon voor de site: handige tips en diensten | Vertel het web
Воскресенье, 29.12.2013, 07:55
Заработок в интернете для новичков
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
МЕНЮ САЙТА
КАТЕГОРИИ раздела
  • Истории успеха
  • Оптимизация
  • B2b
  • Хлебные крошки
  • SEO
  • Социальные сети
  • Антивирус
  • Семантическое ядро
  • Реклама
  • Новости
  • Новости
    Оптимизация текстов под Яндекс и Гугл за счет их форматирования
    Обновлено: 17 февраля 2017 Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу продолжить тему, начатую в статье « Seo оптимизация текстов для коммерческого сайта ». В начале

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

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

    Команды для оптимизации cs go
    У многих людей слабое железо, и каждый второй хочет ускорить производительность своего компьютера и поднять FPS в играх CS:GO, CS:S, Minecraft и других играх. В этой статье я хочу раскрыть кучу секретов

    Настраиваем графику Assassin's Creed Unity
    Наконец-то вышла долгожданная Assassin’s Creed Unity, расширив возможности используемого в Assassin’s Creed IV: Black Flag движка AnvilNext по части стелс-экшна, игровой механики и почти безупречного воссоздания

    Антикризисная стратегия корпорации (компании) - АЛЬТ-Маркетинг - Альтернативные Маркетинговые Технологии
    АЛЬТ-Маркетинг - Альтернативные Маркетинговые Технологии Главная > Библиотека > Стратегическое планирование, разработка стратегии, корпоративные и функциональные стратегии

    Оптимизация SQL-запросов
    Метки статей: 100mbru , CentOS , cms , drupal , joomla , LAMP , linux , mysql , nicru , Open-Source , Red Hat , seo , Typo3 , ubuntu , авто , администрирование , алгоритмы , алкоголь

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

    Seo
    Как я и говорил, начинаю публикации в блоге со статей для новичков, так сказать, потрогаем азы… SEO  – это просто аббревиатура, которая в английском языке произносится и пишется как Search Engines

    Оптимизация производительности MySQL на ОС Linux
    Существует множество факторов, влияющих на производительность MySQL в Azure, которые зависят и от выбора виртуального оборудования, и от конфигурации программного обеспечения. Эта статья посвящена оптимизации

    Праздники России
    Статистика
    Rambler's Top100




    Онлайн всего: 0
    Гостей: 0
    Пользователей: 0

    Hoe maak je een favicon voor de site: handige tips en diensten

    1. Hoe een favicon te maken
    2. Hoe een favicon in Photoshop te maken
    3. Hoe een favicon op te slaan
    4. Hoe favicon-site in te voegen
    5. Hoe favicon te vervangen
    6. Hoe complexere favicons te maken

    Het is moeilijk om te raden wat een favicon is wanneer je dit woord voor het eerst hoort. Dit is een miniatuurpictogram dat wordt weergegeven op de tabbladen van browsers, in adresregels en andere gebieden, afhankelijk van het besturingssysteem dat u gebruikt en de internetbrowser. Het kan gerust een van de meest complexe en wispelturige elementen in website-ontwerp worden genoemd.

    Het maken van een goede favicon is best moeilijk, omdat het pictogram klein is, het duidelijk moet zijn en iets moet weergeven dat gerelateerd is aan uw site
    Het maken van een goede favicon is best moeilijk, omdat het pictogram klein is, het duidelijk moet zijn en iets moet weergeven dat gerelateerd is aan uw site. Het creëren van een favicon dat compatibel is met alle populaire browsers kan ook een ontmoedigende taak zijn. In dit artikel behandelen we alle complexe aspecten van de creatie. Als je ook een logo nodig hebt, dan hebben we dat een artikel hoe het te doen.

    Hoe een favicon te maken

    Laten we beginnen met het ontwerp van de favicon. Een goed ontwerp moet, ondanks zijn compactheid, de essentie van uw site weerspiegelen en een organisch onderdeel van de huisstijl zijn. Meestal is het pictogram een ​​grafisch teken (pictogram) van een bedrijf en niet een volledig logo (pictogram, tekst en slogan).

    Als favicon gebruiken deze websites hun pictogrammen (of afbeeldingen in de buurt ervan) Als favicon gebruiken deze websites hun pictogrammen (of afbeeldingen in de buurt ervan).

    De tekst in de favicon mag niet worden gebruikt, omdat deze tekst onleesbaar is vanwege de kleine afbeeldingsgrootte. De enige uitzonderingen op deze regel zijn wereldberoemde tekstkarakters die automatisch aan een specifiek merk worden gekoppeld. Bijvoorbeeld, de online bron Wikipedia liet op de favicon de hoofdletter "W" achter en Facebook - de letter "F".

    Op deze favicons staan ​​letters die sterk geassocieerd zijn met een bepaald merk
    Op deze favicons staan ​​letters die sterk geassocieerd zijn met een bepaald merk. Facebook gebruikt bijvoorbeeld zijn grafisch teken. Merk ook op dat pixels zichtbaar zijn op de Disney-afbeelding. Dit komt omdat de schermafbeelding is gemaakt op een Retina-display, dat compatibel is met 16 × 16 pictogrammen, terwijl websites 32 × 32 pictogrammen gebruiken.

    Aangezien favicons kleine afbeeldingen zijn, speelt elke pixel een belangrijke rol. Soms worden na het verkleinen van het logo afzonderlijke pixels zichtbaar, waardoor het beeld "wazig" wordt. Voor duidelijkheid moet u het pictogram op pixelniveau bewerken.

    Om dit te voorkomen, moet u het formaat van het logo aanpassen met behulp van speciale editors zoals Photoshop of GIMP
    Om dit te voorkomen, moet u het formaat van het logo aanpassen met behulp van speciale editors zoals Photoshop of GIMP. Eerst moet je de afbeelding verkleinen naar 64x64 pixels (dit is het grootste formaat favicon). Vervolgens moet u elke pixel bewerken met behulp van het gereedschap Potlood totdat het beeld vrij is. Dit is een moeizaam proces, maar het resultaat is het waard. Wanneer de favicon 64x64 gereed is, moet je dezelfde taak uitvoeren met de afbeelding van 16 × 16, 24 × 24 en 32 × 32 pixels. Zoveel maten dat je een afbeelding correct moet weergeven in alle browsers en gadgets:

    • 64x64 - Bladwijzers in Safari-browser;
    • 32x32 - beeldschermen met hoge resolutie (Retina);
    • 24x24 - bladwijzers Internet Explorer en MicroSoft Edge;
    • 16x16 - Google Chrome en andere browsers.

    Hoe een favicon in Photoshop te maken

    Eerst moet je een paar doeken maken met de bovenstaande afmetingen.

    Vervolgens moet u een pictogram, een letter of een andere afbeelding aan het canvas toevoegen
    Vervolgens moet u een pictogram, een letter of een andere afbeelding aan het canvas toevoegen.

    Vervolgens moet u een pictogram, een letter of een andere afbeelding aan het canvas toevoegen

    Hoe een favicon op te slaan

    Nadat u pictogrammen van verschillende grootten hebt gemaakt, slaat u ze allemaal op als een transparant PNG-bestand (24 bit). In Photoshop kunt u de functie Opslaan voor web gebruiken die beschikbaar is in het menu Bestand. Vervolgens moet u alle PNG-bestanden samenvoegen in één ICO-bestand. U kunt zowel PNG-bestanden als ICO-bestanden tegelijkertijd gebruiken, maar vaak geven zelfs Safari en Chrome de voorkeur aan alleen het ICO-formaat. Naar mijn mening is het gemakkelijker om één ICO-bestand te maken. ICO-indeling is niet erg gebruikelijk, maar gelukkig zijn er een aantal hulpprogramma's waarmee u uw bestanden naar dit formaat kunt converteren. Voor dit doel gebruik ik het liefst X-pictogram-editor . Dit is een gratis online service die gedownloade afbeeldingen direct converteert naar één ICO-bestand, waarna u het kunt downloaden. Dit is niets ingewikkelds, volg gewoon de instructies op de site. Als je jezelf een wanhopige persoon vindt, kun je met de pixeleditor van deze service experimenteren en zelf een favicon tekenen. (Hoewel ik liever favicons in een meer professionele editor bewerk, bijvoorbeeld in Photoshop).

    Door uw PNG-afbeeldingen te uploaden naar de X-pictogrameditor, krijgt u één ICO-bestand bij de uitvoer
    Door uw PNG-afbeeldingen te uploaden naar de X-pictogrameditor, krijgt u één ICO-bestand bij de uitvoer.

    Hoe favicon-site in te voegen

    Dus je hebt al een ICO-bestand. Nu moet je het toevoegen aan de website. Hernoem het bestand naar favicon.ico en plaats het in de hoofdmap van uw website (waar het index.html-bestand en andere standaardbestanden worden opgeslagen). Na de succesvolle toevoeging kunt u deze bekijken op uw website .com / favicon.ico. Bijna alle browsers zoeken naar het bestand favicon.ico in de hoofdmap. Daarom is het belangrijk dat u het favicon in deze map downloadt. Voor compatibiliteit met verschillende browsers is het beter om geen HTML-elementen of links toe te voegen die de locatie aangeven. Deze truc werkt voor alle browsers, tot IE6. Ook als u een WordPress-site heeft, kunt u in veel thema's een favicon toevoegen aan de thema-instellingen. Deze methode kan ook worden gebruikt.

    Hoe favicon te vervangen

    Om een ​​onverklaarbare reden voegen browsers het toe aan de cache. Daarom blijft de browser bij het uploaden van een nieuw ICO-bestand uw oude favicon weergeven. Wat te doen in dit geval? U kunt een tijdelijk HTML-bestand toevoegen dat de locatie van uw nieuwe favicon aangeeft. Ook aan het einde van de URL moet je een korte querystring toevoegen:

    <link rel = "snelkoppelingspictogram" href = "jouwe website .com / favicon.ico? v = 2" />

    Dus de browser zal denken dat dit een unieke URL is, en zal daarom worden gedwongen om een ​​nieuw pictogram weer te geven. Na het bijwerken van het favicon kan deze HTML-code volledig worden verwijderd. Als u wijzigingen in het favicon moet aanbrengen, gebruikt u dezelfde techniek, waarbij u telkens het aantal na de "v" in de queryreeks verhoogt. Daarom zal de browser deze URL elke keer als uniek beschouwen en de nieuwe versie ervan weergeven. En vergeet niet om de HTML-code te verwijderen na een succesvolle update.

    Hoe complexere favicons te maken

    In dit artikel wilde ik een universele en gemakkelijke manier beschrijven om favicons te maken die op vrijwel elk platform kunnen werken. Maar bij webontwerp en -ontwikkeling is er geen limiet aan perfectie. Als u wilt leren hoe u complexere pictogrammen kunt maken, kunt u proberen de service te gebruiken favico.js . Hiermee kunt u dynamische afbeeldingen met verschillende aantallen maken. Dankzij dit pictogram kunt u het aantal ongelezen berichten zien, zelfs als het bijbehorende tabblad niet actief is. Als u online geanimeerde favicons wilt maken, kunt u proberen een favicon-generator te gebruiken favicon.cc .

    Meer online generatoren die u kunt vinden hier .

    Als je je tips over het maken van favicons wilt delen of een vraag wilt stellen, wacht ik op je in de reacties!

    Wat te doen in dit geval?
    Ico?
    ДОБАВЬ В ЗАКЛАДКУ
    Форма входа
    ДРУЗЬЯ сайта

    Ярмарка Мастеров - ручная работа, handmade
    Способы заработка


    Copyright MyCorp © 2013
    Создать сайт бесплатно